Try ShortPoint nowBy 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.
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.
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:
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.
Step 1: Add a Color Column
Go to the SharePoint list you want to use and click +Add Column:
Select [1] Text and click [2] Next:
Add [1] Color as Title and click [2] Save:
Step 2: Edit the List
Click 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.).
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:
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:
Click the ShortPoint tag:
Select the pencil icon:
Step 2: Switch to Grid Mode
NOTEShortPoint Connect is currently only available in Grid Mode.
Click the 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:
Use the search bar to look for the Design Element you want to use and select it:
Step 4: Connect the Design Element
Navigate to the 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.
Find and select the name of your List/Library from the drop-down:
Choose the View you want to see. For this guide, we will go with the default All Items View:
Then, click 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:
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:
NOTETo learn more about Items mapping, read this article: ShortPoint Connect: Basic Tutorial.
Then, look for the color field and click the link icon:
Then, select Color:
Click Preview to see how the Design Element will look on your page:
Once satisfied, click Insert:
Step 6: Save
Click the eye icon to see your page in real-time:
Then, click Save to apply all your changes:
Congratulations! You can now dynamically set colors from a SharePoint List. Enjoy trying this hack on your pages.
Related articles:
