So, you've installed ShortPoint SPFx package for Modern SharePoint. Congratulations! In this article, we'll walk you through the process of adding ShortPoint web parts to a Modern Page.


Before we begin

Please make sure you updated the ShortPoint app to the latest SPFx version.

We will start from a blank Modern Page. A brief tutorial on how to create it lives here.


Step 1. Add a ShortPoint Web Part.

  • On your Modern Page, click Edit in the top right corner.
  • Click the + button in the top center of the page and choose ShortPoint.
  • Immediately, you will see a ShortPoint web part embedded to the page. You will see a ShortPoint Section, a Row and a Column. If you have used ShortPoint before in Classic Pages, these layout elements will be familiar to you.




Step 2. Add a ShortPoint Element.

  • On the top of the web part, you will see ShortPoint Insert buttons: BLUE one for adding an Element, and WHITE one for adding a Section. I will press the blue one and see the Page Builder open.
  • From there, I've chosen an element (in our example, we went with a Note). 
  • I created a title for the Note and put some content into it. 
  • Then, I clicked Insert. This made the new element appear on the page.
  • Add as many elements as you want. Everything, from the number and type of elements to design customization, is up to you. 



Step 3. Publish Your Page.

  • After you have finished adding the elements, press the Publish button on the top right of your screen.



Thank you for your attention!


For a collection of ShortPoint elements with examples of use, please visit our Demo Website.

To read other articles about ShortPoint SPFx, please navigate here.