Try ShortPoint nowBy default, when you edit your SharePoint page, the SharePoint Toolbox pops up automatically:
In some cases, the Toolbox breaks the page and requires a reload before editing. If you’ve experienced this, this article will show you how to automatically hide the Toolbox when you edit the SharePoint page:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
Step-by-step Tutorial
Follow the steps to learn how to hide the Toolbox by default:
Step 1: Open the ShortPoint Theme Builder
NOTEBy using the ShortPoint Theme Builder, the code we will use in this article will be applied to your whole Site Collection.
Go to a SharePoint page and click the ShortPoint icon:
Select Theme Builder:
Step 2: Open Custom JavaScript
Scroll down and click Utilities:
Open Custom JavaScript:
Step 3: Copy code
Copy the code below:
function handleEditButtonClick(retryCount = 0) {
const editButton = document.querySelector('button[aria-label="Edit Page"]');
const toolBoxElement = document.querySelector('[data-automationid="panelHeader-closebutton"]');
++retryCount;
if (toolBoxElement) {
setTimeout(simulateToolBoxButtonClick, 500);
}
if (editButton) {
editButton.addEventListener('click', function(e) {
e.preventDefault();
console.log('Edit button clicked');
setTimeout(simulateToolBoxButtonClick, 1000);
});
} else if (retryCount < 5) {
console.error('Edit button not found');
setTimeout(() => {
handleEditButtonClick(retryCount);
}, 500);
}
}
const simulateToolBoxButtonClick = () => {
const toolBoxElement = document.querySelector('[data-automationid="panelHeader-closebutton"]');
if (toolBoxElement) {
toolBoxElement?.click();
} else {
setTimeout(() => {
simulateToolBoxButtonClick();
}, 500);
}
};
handleEditButtonClick();Step 4: Paste the code
Paste the code in the Custom JavaScript field:
Click Apply:
Step 5: Publish
Publish to save your changes:
NOTEIf you wish to apply this solution to only the SharePoint page you’re editing, you can use the Code Design Element. Simply paste the code in the JavaScript field and disable Sandbox Mode:
Congratulations! Now, when you edit the page, the Toolbox is automatically hidden:
Related articles:
