Try ShortPoint nowShortPoint Connect allows you to present information dynamically in your SharePoint list/library to your ShortPoint Design Element. As a result, if there are any changes to the data in your lists/libraries, the changes will also be reflected on your page.
In this article, we will show you how to connect an Inline Design Element to a SharePoint List / Library. For example, we will connect this SharePoint List to the Abbreviation Inline Design Element:
Here is the result:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must have an existing SharePoint List / Library you want to connect to.
Step-by-step Tutorial
Follow the steps below to learn how to accomplish this:
NOTEBefore proceeding, make sure you already have a SharePoint List / Library you want to connect to.
Step 1: Edit the ShortPoint web part
Go to the SharePoint page you want to use and click Edit:
Click the ShortPoint tag:
Select the pencil icon:
Step 2: Switch to Grid Mode
Click the Switch to Grid Mode icon:
NOTEShortPoint Connect is currently only available in Grid Mode.
Step 3: Insert the Text Design Element
Click the plus icon to see the library of Design Elements:
Use the search bar to look for Text and select it:
Step 4: Connect the SharePoint List / Library
Navigate to the Connect tab:
Choose the connection type that corresponds to the location of your SharePoint List/Library. You can use any of the following:
[1] Current Site - allows you to connect ShortPoint elements to existing site assets located on the same site;
[2] Other Sites - allows you to connect ShortPoint elements to existing site assets located on other sites within your SharePoint tenancy;
Or [3] SharePoint Site URL - allows you to connect ShortPoint elements to existing site assets located on another site using a specific SharePoint Site URL.
For this guide, we will use Current Site.
Select the [1] List / Library name and the [2] View you want to use:
Then, click Connect:
Step 5: Map Items
Navigate to the Content tab:
NOTEFor this article, we will use the Abbreviation Inline Design Element as an example. However, you can use any Inline Design Element. Check out Introducing Inline Design Elements to see all the elements available for you to use.Since we will be using the Abbreviation Inline Design Element, we will need a Title and a Content. In our SharePoint List, we will use the Title column as the Title of the Abbreviation and the Description column as the Content of the Abbreviation.
Click the link icon:
Then, select the columns from your SharePoint List/ Library you want to display. Since we want to display the Title and the Description columns, we will choose that:
Since we will use #Description as the Content of the Abbreviation, we need to Cut it:
NOTEIf #Description is not removed, it will also appear on your page like the image below. Make sure to remove it if you only want this content to be shown when a user hovers over it.
Step 6: Insert the Inline Design Element
Then, we will proceed to insert the Abbreviation. To do this, highlight #LinkTitle and click the ShortPoint icon:
Select the Abbreviation icon:
Paste #Description inside the Content field:
Click Apply:
Step 7: Save
Click Preview to see how the Inline Design Element will look on your page:
Once satisfied, click Insert:
Then, click the eye icon to see your page in real-time:
Click Save to apply all changes:
That’s it! You now know how to map the items for an Inline Design Element inside a Connected Text Design Element.
Related articles:
