Is there a way to add “rules” or a filter to the CMS color fields?
Wix Editor
On my site, I’m using CMS and datasets I have a to-do list type page. Members of our site will add tasks onto this list, and one of the required fields when adding an item to this list is the category.
So for example someone could add a task and then categorise it as Health & Safety, or Infection Control etc…
Is there a way that I can automatically get wix to assign a colour to each category, so that when the list is displayed on the website, Health & Safety would be green, Infection Control would be Blue and so on…
I know I can manually do this myself through the CMS, but it would be amazing if this could just be set with a rule or filter. E.g. If Health & Safety is selected then this hex code is used as the button background.
I did a quick test and not sure if this is exactly like you want.
I created a new cms for colours.
The fields being and the Primary field is set to the ColourTag field
( note I named the fields before I had an idea of exactly how I was going to do this, your can be made the make more sense for the items)
And a Test cms , which would be the main one where entries go.
The Main cms has a reference field which is referencing the colours cms
.
Your form or whatever you use would need to select the ColourTag field. Should not be too hard to figure out.
On the page code, I then set up a Dataset linked to the Main cms and get the hex code associated with the Category.
Then use a web API to return a colour sig image to use as he back ground.
If you did not want to use that service, you could simple replace the hex code field with your own colour images. ( which I personally would do)
import wixData from 'wix-data';
$w("#dataset4").onReady(() => {
// Access the repeater
$w("#repeater7").onItemReady(($item, itemData) => {
// Retrieve the referenced HexColour field from the dataset
const hexColor = itemData.colourTag.hexCode; // Reference field from TestColours CMS
console.log(hexColor); // Log the hex color for debugging
if (hexColor) {
// Generate the URL for the solid color SVG
const solidColorImage = `https://www.thecolorapi.com/id?named=false&format=svg&hex=${hexColor.replace('#', '')}`;
// Set the background of the container
$item("#container7").background.src = solidColorImage;
}
});
});
4 Likes
Thank you Mark, this is really helpful!
