How can we help you today?

How to Set Colors Dynamically from a SharePoint List

By default, for a dynamically connected Design Element, the color setting will make all its items the same color. If you would like to set the colors dynamically for different items, this tutorial is for you. 


Before
After

TABLE OF CONTENTS


Before we begin

  • You have ShortPoint installed on your SharePoint site(s).
  • You are a ShortPoint user with an active license.


Note: This solution can be used for both Classic and Modern SharePoint experience.

Step 1. Create a single line of text column in your SharePoint list


Create the Single line of text column where you will define colors (in our example, we call this column Colors). 

Add the color values for the items in your SharePoint list. You can use the named colors (e.g. green, red, etc.), the brand colors that are set in your ShortPoint Theme Builder (e.g. primary, secondary, etc.), or the Hex color code (e.g #1B9DD8, #DAF7A6, etc.).



Note: To know more about the color options, available to set for ShortPoint Design Elements, check our solution article: Managing Color Settings of ShortPoint Design Elements.

Step 2. Add a ShortPoint Design Element to the page


You can easily add a ShortPoint Design Element to your pages using ShortPoint Page Builder. For the purpose of this article, we will use Tiles Design Element, however you may insert any Design Element that has color settings for its items.


  • Modern Page


You can start with adding a ShortPoint web part to your page by clicking the plus button and selecting ShortPoint from the list of the web parts:



Then, click the blue Insert button to open the ShortPoint Page Builder:



Note: If adding the ShortPoint web part for the first time, the Info Design Element will be added automatically. Click the cross icon to remove it. 


Then, click the blue Insert button to open the Page Builder.

  • Classic Page


1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.



Then, select the ShortPoint Design Element from the Page Builder grid. 



Step 3. Connect ShortPoint Design Element to a SharePoint list


Go to Connect tab and select the connection type depending on the location of your SharePoint list. 


Note: 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. 

After you are done, click Connect.



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



Note: To know more about the Connect feature in ShortPoint, please read this article: ShortPoint Connect: Basic Tutorial.

Step 4. Map the Items


Map the fields from your list/library in the Items (Tiles) tab.


Click the chain icon to open the drop-down options and select the columns from your SharePoint list that you would need to display information from. For the color field, select the column with the color values (in our case, Colors).



Step 5. Update the Design Element


After the mapping is done, you can click Preview to check the result: 



If you are happy with the result, click Insert to add the Design Element to the page.



Save and publish your page.


Result


Here is how your page will look like:



Enjoy and transform your site by dynamically changing colors with ShortPoint!


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