Try ShortPoint nowThis article will provide you with a JavaScript code that you can modify to hide elements on your embedded SharePoint web part.
For example, you can hide the background of an embedded web part:
Before
After
TABLE OF CONTENTS
- 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.
- Make sure you already have an embedded SharePoint Web Part using the SharePoint Web Part Design Element.
Step-by-step Tutorial
Follow the steps below to learn how to hide elements of your embedded SharePoint web part:
Step 1: Edit the SharePoint web part
Go to the SharePoint page you want to use and click Edit:
Click the cross icon to close the Toolbox:
Click the ShortPoint tag:
Select the edit properties icon:
Step 2: Copy and modify the JavaScript code
NOTEBefore proceeding, make sure you already have a SharePoint web part Design Element on your page. Check out How to Embed a SharePoint Web Part into ShortPoint to learn how to add it to your page.
Copy the code below:
(function(){
const myInterval = setInterval(function () {
const iframeElement = document.querySelector('iframe[id^="sharepoint-webpart-shortpoint"]');
if (iframeElement != null) {
const iframeDoc = iframeElement.contentDocument || elem.contentWindow.document;
if (iframeDoc != null) {
iframeElement.setAttribute("allowtransparency", "true")
clearInterval(myInterval);
iframeDoc.querySelector("head").insertAdjacentHTML(
"beforeend",
`<style type="text/css">
#sideNavBox,
#suiteBarDelta,
#s4-titlerow,
.ms-core-sideNavBox-removeLeftMargin {
display: none !important;
}
#contentBox {
margin-left: 10px;
margin-right: 10px;
}
</style>`
);
}
}
}, 2000);
})()Edit the code that's in the middle of this snippet (between <style type="text/css"> and </style>) according to what you need to accomplish. For example, we want to turn the background of the embedded web part completely transparent, so we modified the code to look like the one below:
(function(){
const myInterval = setInterval(function () {
const iframeElement = document.querySelector('iframe[id^="sharepoint-webpart-shortpoint"]');
if (iframeElement != null) {
const iframeDoc = iframeElement.contentDocument || elem.contentWindow.document;
if (iframeDoc != null) {
iframeElement.setAttribute("allowtransparency", "true")
clearInterval(myInterval);
iframeDoc.querySelector("head").insertAdjacentHTML(
"beforeend",
`<style type="text/css">
body, .CanvasZone, .ControlZone {
background-color: transparent !important;
}
</style>`
);
}
}
}, 2000);
})()Step 3: Insert the Code Design Element
Click the plus icon to open the Library of Design Elements:
Use the search bar to look for Code and select it:
Step 4: Paste the code
Pate the modified code in the JavaScript field:
Navigate to the Design tab:
Make sure that [1] Sandbox Mode is disabled and click the [2] green check mark:
Step 5: Save
Click the eye icon to see your page in real-time:
Click Save to apply all your changes:
That’s it! You can now use the JavaScript code provided to hide elements of embedded SharePoint web parts.
Related articles:
