Changing Repeater Background Color based on Hex in Database

Ask the community
1

Is there a way to change the repeater’s background color based on the Hex value I have in the database.

2

It’s possible, just not natively. Currently container boxes aren’t supported by styleMixin .

What you’d have to do is have a text field in your database with the fieldKey “hex”. -Make sure all hex codes entered do not contain # like standard hex codes.

Add the below code to your page, obviously replacing the element IDs with your ones.

$w.onReady(function () {
    $w('#dataset1').onReady( () => {
    $w('#myRepeater').onItemReady(() => {
        $w('#myRepeater').forEachItem(($i, data, i) => {
            $i('#myRepeaterContainer').background.src = "https://dummyimage.com/1/" + data.hex;
        });
    });
    });
});

557×527 29.7 KB

You can find a demo here.

[EDIT] Just realized that there is a box style API, so it is possible natively. I think I’m going blind, lmao.

For the native version, you should have hashtags in the database.

$w.onReady(function () {
    $w('#dataset1').onReady( () => {
    $w('#myRepeater').onItemReady(() => { 
        $w('#myRepeater').forEachItem(($i, data, i) => { 
            $i('#myRepeaterContainer').style.backgroundColor = data.hex;
        });
    });
    });
});
3

Thank you this was incredibly helpful

4

When I try this, it is kicking back an error for each of these IDs “projects is not a valid selector”

I am brand new to adding code to Wix. Any ideas?

Thanks so much

1092×436 42.3 KB

5

Hi Bradley,

It looks like you might need to define your Dataset ID and Repeater ID. I do it like this:

Click on the dataset

Go to the properties panel and change the ID

474×648 28 KB

In your case, you would name the database projects. Follow the same process for your repeater.

6

I also need help with this code. I keep getting this error and I’m not sure what to do about it.

Here’s the error I’m getting:

Wix code SDK error: The “backgroundColor” property of “box1” was set to an invalid “rgbaColor” value. The value is expected in one of the following formats:““red”, “#FF0000”, “#FF000000”, “rgb(225, 0, 0)” or “rgba(225, 0, 0, 0)””. Read more about “rgbaColor” values: “Style - Velo API Reference - Wix.com”

Here’s the code I’m using:

$w.onReady(function () {
    $w('#brandColors').onReady( () => {
    $w('#repeater2').onItemReady(() => { 
        $w('#repeater2').forEachItem(($i, data, i) => { 
            $i('#box1').style.backgroundColor = data.primaryColor;
        });
    });
    });
});

Here’s my database set up:

2308×680 68.3 KB

and the field key in my database:

730×804 29.3 KB

Can anyone offer some insight?

7

Does anyone have any idea on how to do this to a strip on an item page? I want to have the strip color change based on the item page it opens up to