Try ShortPoint nowShortPoint Connect allows you to display content from SharePoint Lists or Libraries, as well as other resources, on your page using ShortPoint design elements.
This tutorial will show you how to do the most basic type of connection. You will learn how to connect a Simple List element to a SharePoint List located on the same site as the page we are building.
TABLE OF CONTENTS
Before We Begin
- This article is for ShortPoint SPFx 6.9 version or higher. It showcases the connection process for the Modern SharePoint experience.
- This article features the updated version of Connect Feature UX. This means you will see differences in the user interface if you are using ShortPoint Farm Solution or ShortPoint SPFx versions older than ShortPoint SPFx 6.9.
NOTE: If you are using ShortPoint SPFx versions older than ShortPoint SPFx 6.9, check out ShortPoint Connect: Basic Tutorial (Classic Experience, Previous UX).
Step-by-step Tutorial
Step 1: Prepare a SharePoint List
Start with a SharePoint List or Library that you will be connecting to. For the purpose of this guide, we have created the list below:
Step 2: Add a ShortPoint Web Part
Hover over the plus button to add a new web part.
Choose ShortPoint from the list of web parts.
NOTE: If you don't see ShortPoint in the list of web parts, check if you have finished installation correctly.
Then, delete the default Info element.
Step 3: Insert a ShortPoint Design Element
Click the plus button to add a design element.
ShortPoint Page Builder will open.
Select a design element you want to use. For this guide, we will use the Simple List design element.
Step 4: Connect
Switch to the Connect tab.
From the list of connections, choose Current Site.
NOTE: If you want to learn more about other connection types, you can checkout our Connection Types Support Articles.
In the List / Library drop-down, select the name of your target list or library. In our case, it is the Open positions in October list.
In the View drop-down, you can select a specific SharePoint List or Library view you have created. For this guide, we will use the All Items view.
Then, you can indicate an item limit in the Items Limit field. If you don't want to limit items, leave 0 to show all items available in the view.
You can also choose the type of cache option you want for your site. The default cache option is always Smart Cache+, but you can change it according to your preference.
NOTE: If you want to learn more about Cache Options and its benefits to site performance, you can check out Caching Options for Dynamically Connected ShortPoint Design Elements.
Finally, click the green Connect button.
Once the connection is established successfully, you will see a success message highlighted in green.
Step 5: Map the Items
In this step, you will indicate which columns of your SharePoint List or Library will correspond to fields available in the Design Element. Click the Items tab to proceed to items mapping.
Click the chain icon in each field. You will see a drop-down with the list of available columns. These are the columns enabled in your SharePoint List / Library view.
For the purpose of this tutorial, we will map the following fields:
- The Title field will be mapped to the Title column of our SharePoint list.
- The Subtitle field will be mapped to the Office column.
- The Description field will be mapped to the Open since column.
NOTE: You can view how your list will look when published by clicking the Preview button.
Then, click Insert.
Step 6: Save
You may proceed to edit the page, add more design elements, and save your changes. Hit Publish and your connected Design Element will now display updated contents from your SharePoint List.
Related articles:
