How can we help you today?

ShortPoint Connect: Basic Tutorial

ShortPoint 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: 

Sample List



Step 2: Add a ShortPoint Web Part


Hover over the plus button to add a new web part.

Plus button


Choose ShortPoint from the list of web parts.

ShortPoint web part

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.

Delete info element


Step 3: Insert a ShortPoint Design Element


Click the plus button to add a design element.

Plus button


ShortPoint Page Builder will open.

ShortPoint Page Builder



Select a design element you want to use. For this guide, we will use the Simple List design element. 

Simple list Design Element



Step 4: Connect


Switch to the Connect tab.

Connect tab



From the list of connections, choose Current Site.

Current Site connection type


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.

Selecting a 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.

view drop-down



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.

Items Limit field


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.

Cache Options


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. 

Connect button


Once the connection is established successfully, you will see a success message highlighted in green.

Success Message


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.

Items tab



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.

chain icon



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. 

sample Items Mapping


NOTE: You can view how your list will look when published by clicking the Preview button.



Then, click Insert.

Insert button


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.

Published list


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 6 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