Try ShortPoint nowBy default, SharePoint web parts embedded using the SharePoint web part Design Element shows a title:
In this article, you will learn how to hide this title using a code.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have the SharePoint Web Part Design Element on your page.
Step-by-step Tutorial
Follow the steps below for a detailed guide on how to hide the title of an 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 the code
Copy the code below:
[code code_html="%3C!--%20Add%20your%20HTML%20code%20here%20--%3E%20%0A" code_css="%2F*%20Add%20your%20CSS%20code%20here%20*%2F%20%0A" code_js="var%20myInterval%20%3D%20setInterval(function()%20%7B%20%0A%20%20var%20iframeElement%20%3D%20document.querySelector('iframe%5Bid%5E%3D%22sharepoint-webpart-shortpoint%22%5D')%3B%0A%20%20if%20(iframeElement%20!%3D%20null)%20%7B%0A%20%20%20%20clearInterval(myInterval)%3B%0A%20%20%20%20%0A%20%20%20%20iframeElement.addEventListener(%22load%22%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20var%20iframeDoc%20%3D%20iframeElement.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%0A%20%20%20%20%20%20iframeDoc.querySelector(%22head%22).insertAdjacentHTML(%0A%20%20%20%20%20%20%20%20%22beforeend%22%2C%0A%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%22text%2Fcss%22%3E%20div%5Bdata-automation-id%3D%22webPartHeader%22%5D%20span%5Brole%3D%22heading%22%5D%20%7B%20display%3A%20none%20!important%3B%20%7D%20%3C%2Fstyle%3E%60%20%20%20%20%0A%20%20%20%20%20%20)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D%0A%7D%2C%201000)" code="%7B%22html%22%3A%22%3C!--%20Add%20your%20HTML%20code%20here%20--%3E%20%5Cn%22%2C%22css%22%3A%22%2F*%20Add%20your%20CSS%20code%20here%20*%2F%20%5Cn%22%2C%22javascript%22%3A%22var%20myInterval%20%3D%20setInterval(function()%20%7B%20%5Cn%20%20var%20iframeElement%20%3D%20document.querySelector('iframe%5Bid%5E%3D%5C%22sharepoint-webpart-shortpoint%5C%22%5D')%3B%5Cn%20%20if%20(iframeElement%20!%3D%20null)%20%7B%5Cn%20%20%20%20clearInterval(myInterval)%3B%5Cn%20%20%20%20%5Cn%20%20%20%20iframeElement.addEventListener(%5C%22load%5C%22%2C%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20var%20iframeDoc%20%3D%20iframeElement.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%5Cn%20%20%20%20%20%20iframeDoc.querySelector(%5C%22head%5C%22).insertAdjacentHTML(%5Cn%20%20%20%20%20%20%20%20%5C%22beforeend%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%5C%22text%2Fcss%5C%22%3E%20div%5Bdata-automation-id%3D%5C%22webPartHeader%5C%22%5D%20span%5Brole%3D%5C%22heading%5C%22%5D%20%7B%20display%3A%20none%20!important%3B%20%7D%20%3C%2Fstyle%3E%60%20%20%20%20%5Cn%20%20%20%20%20%20)%3B%5Cn%20%20%20%20%7D)%3B%5Cn%20%20%7D%5Cn%7D%2C%201000)%22%2C%22showErrors%22%3Afalse%7D" padding-top="6px" padding-right="6px" padding-bottom="6px" padding-left="6px" /]Step 3: Switch to Grid Mode
NOTEBefore proceeding, make sure you already have a SharePoint Web Part Design Element on your page. To add it to your page, check out How to Embed a SharePoint Web Part into ShortPoint.
Click the Switch to Grid Mode icon:
Step 4: Paste the code
Scroll down to the SharePoint Web Part Design Element, right-click, and select Paste Code After SharePoint Web Part:
Step 5: Disable Sandbox Mode
Hover over Code and select the cogwheel icon:
Make sure that Sandbox Mode is disabled:
Click Update:
Step 6: Save
Click the eye icon to see your page in real-time:
Click Save to apply your changes:
That’s it! You can now hide the title of an embedded SharePoint web part.
Related articles:
