Intro


ShortPoint Connect allows you to display content from SharePoint Lists or Libraries, as well as other resources, in your page using ShortPoint design elements.


This tutorial will show the most basic type of connection: we will connect a Simple List element to a SharePoint List located on the same site as the page we are building.


Important!


1) This article shows the process of connection for Modern SharePoint experience, with ShortPoint SPFx 6.9 version or newer. 

2) This article features the updated version of Connect Feature UX. This means you will see differences in the user interface and experience if you are using ShortPoint Farm Solution or older than ShortPoint SPFx 6.9 version.


We plan to roll out the new Connect Feature UX in September 2020. After that this article will be valid for all platforms.



Step 1: Prepare a SharePoint List


Start with a SharePoint List or Library. Like this one, for example:




Step 2: Add a ShortPoint Web Part

Press the round 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, please check if you have finished installation correctly.


Delete the default Info element and activate the cursor inside the content area of the Section, as shown in the animation below.




Step 3: Insert a ShortPoint Design Element


Press the blue Insert button.

ShortPoint Page Builder will open.

Select a design element you want to use.

I want to go with a Simple List design element. 

Feel free to choose whatever element that suits your needs best.



Step 4: Connect


Switch to the Connect tab.

Select Current Site type of connection.


  • Note: visit this article folder if you would like to pick and learn about other connection types.


In the List / Library drop-down, select the name of your target list or library. 

In our case, it is the Open positions in May list that we have referred to in step 1.


You can indicate a specific SharePoint List or Library view other than the default one in the View drop-down.


You can indicate an items limit to show on your page 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 Enable Cache to improve the performance. 

This way, the element will update the connection once per a time interval instead of refreshing per each page reload.


Finally, click the green Connect button. Wait until the connection is established: you will see green success highlights.

If you want to make changes to your connection now, you need to click Disconnect to unlock the fields again.




Step 5: Map the Items


Click the Items tab to proceed to items mapping.

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 chain icon in each field you want to map. You will see a drop-down with the list of available columns. These are the columns enabled in your SharePoint List / Library view.



In the Simple List element that we are using for the purpose if 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. 
  • We have also mapped the Link field to the Item URL column to make sure that items are hyperlinked and point to the source item after clicking.



Step 6: Save 


Press Insert.

You will see the page in edit mode and the Simple List element inside the Section.

  • Note: Connected elements are marked with a chain icon in edit mode to stand out from static elements.

You can proceed with editing the page or press Republish to see the view mode.



Related articles: