How can we help you today?

How to Dynamically Set Colors from a SharePoint List

By default, connected Design Elements will inherit the primary color of your SharePoint site. As you may notice in our example below, all items on the connected Design Element have the same color.


same color connected design element


But, if you want to create distinction, you can assign different colors for each item using SharePoint List. Follow the steps below to learn how.


different color connected design element


TABLE OF CONTENTS


Prerequisites

  • You must have the latest version of ShortPoint SPFx installed on your SharePoint site(s).
  • You must be a ShortPoint Designer with an active license.
  • You must have a SharePoint List you want to connect to a Design Element:


SharePoint List


Step-by-step Tutorial

There are two parts to this tutorial. Follow the instructions carefully to get started:


Part 1: Set up your SharePoint List

Part 1 involves your SharePoint list. Before proceeding, make sure you already have an existing SharePoint List.


SharePoint List


Step 1: Add a Color Column


Go to the SharePoint list you want to use and click +Add Column:


+Add Column


Select [1] Text and click [2] Next:


Text and Next


Add [1] Color as Title and click [2] Save:


Color and Save


Step 2: Edit the List 


Click Edit in grid view:


Edit in grid view


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


add color value


Note: To know more about the color options you can set for ShortPoint Design Elements, check out Managing Color Settings of ShortPoint Design Elements.


Once done, click Exit Grid View:


Exit Grid view


Now that your SharePoint List is ready, you may proceed to Part 2 of this tutorial.


Part 2: Connect the SharePoint List to a Design Element

Part 2 will demonstrate how to connect a SharePoint List to a Design Element. You can use any Design Element that allows color setting. For this guide, we will use the Tiles Design Element.


Step 1: Edit the ShortPoint web part

Go to the SharePoint page you want to use and click Edit:

Edit


Click the ShortPoint tag:

ShortPoint tag


Select the pencil icon:


pencil icon


Step 2: Switch to Grid Mode


NOTEShortPoint Connect is currently only available in Grid Mode.


Click the Switch to Grid Mode icon:


Switch to Grid Mode icon


Step 3: Insert the Design Element


NOTEYou can use any Design Element that allows color setting. For this guide, we will use the Tiles Design Element.


Click the gray plus icon:


gray plus icon


Use the search bar to look for the Design Element you want to use and select it:


select design element


Step 4: Connect the Design Element

Navigate to the Connect tab:


Connect tab


Select the Connection type based on the location of your SharePoint list. This solution will work for three Connection types: Current Site, Other sites, and SharePoint Site URL


connection types


Find and select the name of your List/Library from the drop-down:


List/Library dorp-down


Choose the View you want to see. For this guide, we will go with the default All Items View:


View


Then, click Connect:


Connect


NOTETo learn more about the Connect feature in ShortPoint, read this article: ShortPoint Connect: Basic Tutorial.

Step 5: Map Items


Navigate to the Items/Tiles tab:

Items / Tiles tab


Delete default content:


delete default content


Click the link icon to open the drop-down options and select the columns from your SharePoint list that you would need to display. In this case, we want to display the Title and the Description columns:


link icon


NOTETo learn more about Items mapping, read this article: ShortPoint Connect: Basic Tutorial.

Then, look for the color field and click the link icon:


link icon


Then, select Color:


Color


Click Preview to see how the Design Element will look on your page:


Preview


Once satisfied, click Insert:


Insert


Step 6: Save 

Click the eye icon to see your page in real-time:


eye icon


Then, click Save to apply all your changes:


Save


Congratulations! You can now dynamically set colors from a SharePoint List. Enjoy trying this hack on your pages.


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