Try ShortPoint nowIf you would like to set the icons dynamically connected from a SharePoint list, we have prepared a quick step-by-step procedure that you can follow.
Here is what we can achieve after successfully performing these steps:
Before we begin
- Make sure you already prepared a SharePoint list that you can use while following this article.
- We recommend that you always have the latest ShortPoint installed. Visit our Download ShortPoint page to get the latest version of ShortPoint, or you can use the ShortPoint SPFx Auto Upgrade Feature to ensure you always have the latest version.
- You have ShortPoint installed on your SharePoint site.
- Make sure that you are a ShortPoint user with an active license.
Step 1: Create a Single Line of Text Column in Your Sharepoint List
In your SharePoint list, create the Single line of text column and name it Icon. Add icon's names for every item where you want to display it. You can find the list of all ShortPoint icons and their names on our Icon list page.
Step 2: Add the Icon List Design Element to your page
Please refer to the instructions below how to add the Icon List Design Element to your page depending on the ShortPoint version you have:
Note: ShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid mode was formerly known as Wireframe Builder.
In Live Mode
Locate an area where you would like to add the Icon List Design Element and click the plus sign:
Select the Icon List Design Element in the Page Builder by typing it from the search bar (1) or by scrolling through the list (2):
Note: Learn more about ShortPoint Live Mode by checking Getting Started: The Basics of ShortPoint Page Builder Live Mode.
In Grid Mode
Click the plus sign to add the Icon List Design Element:
Select the Icon List Design Element from the Page Builder:
In Legacy Page Builder
Click the big blue plus icon to open the page builder:
Select the Icon List Design Element:
Step 3: Connect the Icon List Design Element to your SharePoint list
Once you have located the Icon List Design Element, let us now configure its connection to proceed with adding it to the page. Go to the Connect tab and select the connection type depending on the location of your SharePoint list.
Note: Connect feature is not yet available in ShortPoint Live Mode. If you are currently on the Beta version, you can switch to Grid View to proceed:
Info: This solution will work for three Connection types: Current site, Other sites and SharePoint Site URL.
Select the List/Library and its View name to set up the connection. You can also set the Items Limit, if you'd like to.
If the connection is successful, you will see the following indicators:
Step 4: Map the Items
Map the field from your list/library in the Items tab.
Click the chain icon to open the drop-down options and select the columns from your SharePoint list that you would like to display information from. For the icon field, select the name of the column with the icon values. In this example, we use Icons.
You may also go to the Settings tab to add some styles in your Design Element. Once you are satisfied, you may click Preview, or you can proceed with clicking the Insert button to insert the Design Element and save your changes.
Make sure to save and publish your page.
Result
You now have icons that are connected dynamically and displayed in your ShortPoint Icon List:
Related articles:
