Setting a color for repeater's item

Ask the community
,
1

Hi people :slight_smile:
I have a dataset for products colors. Would like to represent it same way as products pictures and show colors on the page.
The color field contains #123456 color format, which I would like to represent by a color.
For implementation, I used a round box inside a repeater, and I would like to set the color of this box. The box has the style attribute which I can use, but I can’t find out how.

The idea looks something like that:
$w(“#datasetColors”).forEachItem(($w, itemData, index) => {
$w(“#boxColor”).style.backgroundColor = color;
});

Ideas will be very appriciated!!
Thank a lot!!

2

The ID of the box inside the first repeater item is boxColor, right? Try the below to see if that works.
$w(“#boxColor”).style.backgroundColor = “rgba(255,0,0,0.5)”;

3

Thanks
I think my problem is with the loop.
I get an error on forEach
The inside code works well outside the repeater

$w(" #datasetColors “).forEachItem(($w, itemData, index) => {
$w(” #boxColor ").style.backgroundColor = color;
});

4

Are you sure the id of your repeater is #datasetColors ?

5

Hey Dafna,

How about this:

A database collection called Colors:


On the page, a repeater with a box:


Configure with one item.


The elements on the page:

  • #repeaterColor

  • #boxColor is inside the repeater
    The page code:

import wixData from 'wix-data';

$w.onReady(function () {
   $w("#repeaterColor").onItemReady( ($w, itemData, index) => {
      $w("#boxColor").style.backgroundColor = itemData.title;
   } );

   wixData.query("Colors")
      .find()
      .then( (results) => {
         $w("#repeaterColor").data = results.items;
      } );
} );

Running in Preview:

Sorry, I cheated - I didn’t use a dataset, I used a database query.

I hope this helps.

Yisrael

6

Hi All,

I had a similar problem and managed to change my repeater box color with the HEX color code from my dataset.

You can refer to this website for a guide on how to change the color of your repeater items .

$w.onReady(function () {
    $w("#dataset1").onReady(() => {
        $w("#repeater1").forEachItem( ($w, itemData, index) => {
            let color = itemData.hex;
            $w("#box1").style.backgroundColor = color;
        });
    });
});

Good luck!

Cheers, Ben