How can we help you today?

How to Set Icons Dynamically from a SharePoint List

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


Icons example



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


Sample SharePoint list


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:

Live Mode


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

adding design element: Live Mode


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:

Grid Mode


Select the Icon List Design Element from the Page Builder:

Select Icon List



  • In Legacy Page Builder


Click the big blue plus icon to open the page builder:

Legacy Page Builder


Select the Icon List Design Element:

Select Icon List


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:
Switch to Grid View


Info: This solution will work for three Connection types: Current site, Other sites and SharePoint Site URL.


go to the connect tab and select your coonnection


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.


Connect to your SharePoint List


If the connection is successful, you will see the following indicators:

Indicators for successful connection


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.


Map the items


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.


save changes and insert


Make sure to save and publish your page.


Result


You now have icons that are connected dynamically and displayed in your ShortPoint Icon List:


result


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