How to change text / button colour in repeater, based on ticked boolean in dataset?

Ask the community
,
1

My website for pop up camp sites is heavily controlled via datasets. I am a complete noob with velo and code in general having only dabbled in HTML CSS overrides etc.

My question is can I have a button / box / text colour change in a repeater, based on a certain boolean ticked in my dataset?

We have 3 different types of sites, Pop up sites, Pop up holiday sites and Special events. I have booleans in my dataset for all three as I used them to filter data on various pages. I would like to be able to change the colour of an object based on which one is ticked. i.e. If Special Events is ticked then the box is orange and if Pop up sites is ticked then the box is blue.

I know what I want to achieve but I just don’t know where to start. I’ve done some reading but I am really struggling with knowing where to begin in the code.

If anyone can help me it would be greatly appreciated.

2

Yes it is possible to colorize ELEMENTS inside your repeater.

Take a look onto the following example…
https://www.media-junkie.com/simple-repeater

Click onto one of the BOXES inside REPATER.

3

I know how to style my repeater, this obviously repeats the same for each site, but I need to have different colours throughout the repeater based on a tick box in the dataset.

4

@richirv

  1. You have a DB with a BOOLEAN-DATAFIELD → lets call it “myDATAFIELD”
    In this DATAFIELD you have stored some VALUES —> TRUE / FALSE
  2. You have a BOX inside REPEATER with following ID → “#box1”
$w.onReady(function () {
     $w("#repeater1").onItemReady(($item, itemData, index) => {
        //Take a look onto ---> CONSOLE! What do you get, when you click on button?
	  $item('#box1').onClick(()=>{
	     console.log(itemData);
             console.log("DATAFIELD-STATE: ", itemData.myDATAFIELD[index]);
             
             // Code your if-else-query here..... expand your code-functionality.....
             if(?????) {$item('#box1').style.backgroundColor = "red"}
             else {$item('#box1').style.backgroundColor = "green"}
 	  });
     });
});
5

Another way would be just to create a futher DATAFIELD in your DB called “color” & insert for every of your DB lines the related color into the color-datafield and read it out later by dataset/code.

6

@russian-dima The alternative method you mentioned sounds like its more my skill level. The problem is you can’t link a button background colour to a data field.

7

@russian-dima Thanks so much for taking the time to reply.

I have used the code and amended to this,

$w . onReady ( function () {
$w ( “#sitelist” ). onItemReady (( $item , itemData , index ) => {
$item ( ‘#seemore’ ). onClick (()=>{
console . log ( itemData );
console . log ( "weekendPopUpSite: " , itemData . weekendPopUpSite [ index ]);
if ( true ) { $item ( ‘#seemore’ ). style . backgroundColor = “red” }
});
});
});

This seems to work but only when the button is clicked, what do it need to change when the button is clicked, can you explain how to make it so the colour is on all the time? I tried changing . onClick (()=>{ to a few other things but they all seem to error.

Thanks

8

@richirv
This example of → Kristof, could perhaps help you a lot.
https://volkaertskristof.wixsite.com/helpcenter/crbbod