How can we help you today?

How to Embed a SharePoint Web Part into ShortPoint

To build a page, SharePoint allows you to add SharePoint web parts, which are customizable widgets that present information or facilitate interaction among your users.


SharePoint  web parts


This article will demonstrate how you can embed a SharePoint Web Part into ShortPoint. Below is an example of a page where we incorporated the Document Library into ShortPointGo through the interactive tutorial or follow the step-by-step guide to get started.


sample page with the SharePoint Web Part Design Element


NOTE: The SharePoint Web Part added using the SharePoint Web Part Design Element will retain its usual functions. For example, users can still add and upload new documents, as well as, open documents in the Document Library.


NOTE: This feature is currently available for SharePoint 2019 Microsoft 365 environments.



TABLE OF CONTENTS


Prerequisites

  • You must have SharePoint Microsoft 365 (We are currently working on a subsequent release of the feature for SharePoint 2019).
  • You must have ShortPoint SPFx version 8.2.0.1 or higher.
  • You must be a ShortPoint Designer with an active license.
  • You must have at least View permissions to the new page with the SharePoint web part.

Interactive Tutorial

Start the interactive tutorial to learn how to add the SharePoint Web Part Design Element:



NOTE: To see a detailed list of all SharePoint web parts, check out How to Add a SharePoint Web Part.


NOTE: You can also check out SharePoint Web Part Design Element Features to see the options you can customize using this Design Element.

Step-by-step Tutorial

We divided the steps into two parts. Follow them closely for a detailed guide on how to add the SharePoint Web Part Design Element:


PART 1: Get the SharePoint web part URL

In order to get the URL we will use for Part 2 of this tutorial, we must create and publish a new page with a SharePoint Web Part inside. Go through the steps to learn how:


Step 1: Create a New Page

  • Go to the SharePoint page where you want to embed the ShortPoint Web Part Design Element and click New.


New

  • Then, select Page.
  • Choose the Blank template.
  • Click Create a Page.
  • Add a Title to your page.

Step 2: Add a SharePoint Web Part

  • Hover over the new page's section and click the gray plus icon.

Gray plus icon

  • Choose the SharePoint Web Part you want to use.
  • Customize the web part according to your preference.
  • Once satisfied, click Publish.


NOTE: To learn more about adding SharePoint web parts and to see a detailed list of all available web parts, check out How to Add a SharePoint Web Part.

Step 3: Copy the URL 

  • Copy the URL of your newly created page.


NOTE: Make sure you have at least View permission on the new page you created with the SharePoint Web Part. Otherwise, you will not be able to successfully accomplish the 2nd part of this tutorial.

PART 2: Insert SharePoint Web Part Design Element

After copying the URL, you must now insert the SharePoint Web Part Design Element. Go through the steps to learn how:


Step 1: Go back to the main page and edit it

  • Go back to the main page where you want to add the SharePoint Web Part Design Element and click Edit.


Edit

  • Click the ShortPoint tag.
  • Select the pencil icon.

Step 2: Paste the copied URL

  • Click the plus icon.
  • Use the search bar to look for SharePoint Web Part and click it.
  • Paste the copied URL in the field provided.
  • (Optional) Adjust the size of the web part according to your preference.
  • Once you are satisfied, click the green checkmark.

Step 3: Save

  • Then, select the eye icon to see how your page will look when published.


eye icon

  • Click Save to apply all your changes.


Save


Congratulations! You now know how to embed a ShortPoint Web Part into a ShortPoint Design Element. Enjoy exploring this feature on your SharePoint pages.


NOTE: You can also check out SharePoint Web Part Design Element Features to see the options you can customize using this Design Element.

SharePoint Web Part Design Element Features

Listed below are the customizable features available for the SharePoint Web Part Design Element:


A. Design Tab


The Design tab contains the URL field which allows you to embed the SharePoint web part. It also allows you to adjust the size of the web part. Below are the available options:


Design tab


URL of Page containing the Web PartURL of Page containing the Web Partallows you to paste the URL of the page where you have added the SharePoint web part.
WidthWidthallows you to adjust the width of the SharePoint web part.
HeightHeightallows you to adjust the height of the SharePoint web part.


B. Spacing Tab

The Spacing tab allows you to customize the spacing around your Design Element. Below are the settings available:


Spacing tab


padding topPadding Topadjusts the top padding of the web part.
padding rightPadding Rightadjusts the right padding of the web part.
padding leftPadding Leftadjusts the left padding of the web part.
padding bottomPadding Bottomadjusts the bottom padding of the web part.
Apply different padding for tablet devicesApply different padding for Tablet Devicestoggle on if you want to customize the padding of the web part for tablet devices.
Tablet top paddingTablet Top Paddingadjusts the top padding of the web part for tablet devices.

Tablet right padding
Tablet Right Padding
adjusts the right padding of the web part for tablet devices.
Tablet left paddingTablet Left Padding
adjusts the left padding of the web part for tablet devices.
Tablet bottom paddingTablet Bottom Padding
adjusts the bottom padding of the web part for tablet devices.
Apply different padding for mobile devicesApply different padding for Mobile Devicestoggle on if you want to customize the padding of the web part for mobile devices.
Mobile top paddingMobile Top Paddingadjusts the top padding of the web part for mobile devices.
Mobile left paddingMobile Left Paddingadjusts the left padding of the web part for mobile devices.

Mobile right padding
Mobile Right Padding
adjusts the right padding of the web part for mobile devices.
Mobile bottom paddingMobile Bottom Padding
adjusts the bottom padding of the web part for mobile devices.



C. Custom CSS tab


This tab allows you to use your own CSS, HTML, and JavaScript code to customize the SharePoint Web Part Design Element. 

NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element (Basic Tutorial) to know more about Custom CSS.


Custom CSS tab


NOTEThe Visibility tab is currently not available in Live Mode.


That's it! You now know the features you can customize using the SharePoint Web Part Design Element.


Advanced: Hide an Embedded SharePoint Web Part's Title



Steps:


1. You need to copy the following code element then go to the page that the SharePoint Web Part is embedded on.


[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" /]


2. Paste the element on the page next to the ShortPoint "SharePoint Web Part" design element like so:

Result:

 


Advanced: Add a Calendar to a Page Using SharePoint Web Part


 


Steps:


1. Add a SharePoint Web Part Design Element to the page, and set the URL to be similar to this: <Site URL>/Lists/Events/calendar.aspx


2. Copy and paste this code element right below the added SharePoint Web Part Design Element to hide the unnecessary headers and elements from the page:

[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%20iframeElements%20%3D%20document.querySelectorAll('iframe%5Bid%5E%3D%22sharepoint-webpart-shortpoint%22%5D')%3B%0A%20%20if%20(iframeElements.length%20%3E%200)%20%7B%0A%20%20%20%20iframeElements.forEach(elem%20%3D%3E%20%7B%0A%20%20%20%20%20%20clearInterval(myInterval)%3B%0A%0A%20%20%20%20%20%20elem.addEventListener(%22load%22%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20var%20iframeDoc%20%3D%20elem.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%0A%20%20%20%20%20%20%20%20iframeDoc.querySelector(%22head%22).insertAdjacentHTML(%0A%20%20%20%20%20%20%20%20%20%20%22beforeend%22%2C%0A%20%20%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%23sideNavBox%2C%20%23suiteBarDelta%2C%20%23s4-titlerow%2C%20.ms-core-sideNavBox-removeLeftMargin%20%7B%20display%3A%20none%20!important%3B%20%7D%20%23contentBox%20%7Bmargin-left%3A%2010px%3B%20margin-right%3A%2010px%3B%20%7D%3C%2Fstyle%3E%60%20%20%20%20%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%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%20iframeElements%20%3D%20document.querySelectorAll('iframe%5Bid%5E%3D%5C%22sharepoint-webpart-shortpoint%5C%22%5D')%3B%5Cn%20%20if%20(iframeElements.length%20%3E%200)%20%7B%5Cn%20%20%20%20iframeElements.forEach(elem%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20clearInterval(myInterval)%3B%5Cn%5Cn%20%20%20%20%20%20elem.addEventListener(%5C%22load%5C%22%2C%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20var%20iframeDoc%20%3D%20elem.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%5Cn%20%20%20%20%20%20%20%20iframeDoc.querySelector(%5C%22head%5C%22).insertAdjacentHTML(%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22beforeend%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%5C%22text%2Fcss%5C%22%3E%20%23sideNavBox%2C%20%23suiteBarDelta%2C%20%23s4-titlerow%2C%20.ms-core-sideNavBox-removeLeftMargin%20%7B%20display%3A%20none%20!important%3B%20%7D%20%23contentBox%20%7Bmargin-left%3A%2010px%3B%20margin-right%3A%2010px%3B%20%7D%3C%2Fstyle%3E%60%20%20%20%20%5Cn%20%20%20%20%20%20%20%20)%3B%5Cn%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%7D)%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" /]


3. Done! You have a calendar embedded on your page now.



Advanced: Hide Any Element from Inside the Embedded Element or Apply Custom Styles


You can paste this code in the JavaScript section of a ShortPoint Code Design Element, then edit the CSS code that's in the middle of this snippet (between <style type="text/css"> and </style>).


Also, make sure to disable Sandbox mode.

(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);
})()

For example you can make your embedded web part's background completely transparent by applying this code:

(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);
})()



Related articles:








Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 63 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more