Try ShortPoint nowBy 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
- Step 1. Create a single line of text column in your SharePoint list
- Step 2. Add a ShortPoint Design Element to the page
- Step 3. Connect ShortPoint Design Element to a SharePoint list
- Step 4. Map the Items
- Step 5. Update the Design Element
- Result
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:
