Change the colour of a box within a dataset using HEX code

Ask the community
,
1

I’m trying to make a little box in the corner of my repeater page which changes colour depending on how many people have booked a certain activity. There would be three colour options, Green, orange and red.

All I want is when I put the HEX code in a field in the dataset, the colour of #box1 on the repeater changes to that colour!

3

1640×924 205 KB

As you can see in the mock up, there are small bubbles which say, selling fast, Available and Sold out.

All i want is for my dataset to have two fields, one which decides the colour (which i can input into) and one which decides the text (I can do this myself).

4

@russian-dima you always seem to know what you’re doing, can you make sense of this?

5
  1. The element you want to change the color of, this element is a normal box?
  2. Where did you place this element? Inside a REPEATER ?
  3. You want to get all the colors from a database running in the background?
  4. This for you have a DB-Field for example called COLORS inside your DB, filled with all the colors?
  5. You want to use a dataset?

Which one ?

a) Dynamic
b) non-Dynamic?

What is your exact setup ?

To many unknown options.

6
  1. Yes it is a regular box #box1
  2. Yes the box is inside a repeater
  3. There are three colours I would like to use
  4. Yes there is a DB field called colours (text field)
  5. Yes I want to use the dataset

The dataset is a dynamic data set, all i want is when i place the HEX code into the Colour Field in the back end, that colour is displayed on #box1 in the front end.

7
  1. You start like -->ALWAYS<— with …
$w.onReady(()>{.........................});
  1. When working with DATASETS → a DATASET has to be ready first!!!
$w.onReady(()>{
    $w('#dynamicDataset').onReady(()=>{
    
    });
});
  1. You get the current-data out of your DB with the help of your DATASET (in this case a dynamic one…
$w.onReady(()>{
   $w('#dynamicDataset').onReady(()=>{
      let curData = $w('#dynamicDataset').getCurrentItem();
      console.log("Current-Data: ", curData);
   });
});

Now take a look onto the —> CONSOLE !
What do you get as RESULT ?
You should get something like an OBJeCT —> {…}
Open the OBJECT, by a click onto it.
You will be able to see all DATA of current selected ITEM (loaded from the DATABASE) including the COLORS-FIELD + DATA.

  1. Once you got that data, you can now load it into your REPEATER…
$w('#myRepeaterIDhere').data = curData

…or…

$w('#myRepeaterIDhere').data = curData[0]

…or

$w('#myRepeaterIDhere').data = curData[0].items
  1. Now you need to connect your REPEATER to the whole process…
    Your REPEATER now must react when it got new data…this can be done by…
$w('#myRepeaterIDhere').onItemReady(($i, iData, index)=>{
.......
});
  1. Now you need to know what is inside of your REPEATER (which elements) ???
    You have a —> box inside of your REPEATER → ‘#box1’
$w('#myRepeaterIDhere').onItemReady(($i, iData, index)=>{          
    $i("#box1").style.backgroundColor="rgba(255,0,0,0.5)";
});

So at the end you must have something like the following…

$w.onReady(()>{
   $w('#dynamicDataset').onReady(()=>{
      let curData = $w('#dynamicDataset').getCurrentItem();
      console.log("Current-Data: ", curData);
   });
   
   $w('#myRepeaterIDhere').onItemReady(($i,iData,index)=>{          
     //Here we are giving a fixed color for the box.
     $i('#box1').style.backgroundColor='rgba(255,0,0,0.5)';
     //Now let's load the color from DB...
     $i('#box1').style.backgroundColor='rgba('+myColor+')';
   });
});

data must be a string like ----> 255,0,0,0.5 <---- inside your DB.

  1. But first you have to get that data from your curData…
let myColor = curData[0].colours;
console.log("My-Found-Color: ", myColor);

Now, everytime you switch the DYNAMIC PAGE to show next item, each of the items should have an own colorized box.

You have here just an example. You surely will have to modify a little bit.
But the main process is described in detail.

EDIT: The same way you can use a HEX-VALUE inside of your DB, which would even be easiert to use.

EXAMPLE inside DB-FIELD (colours) —> #Fd5030 <—whatever color

let myColor = curData[0].colours;
console.log("My-Found-Color: ", myColor);

$i('#box1').style.backgroundColor= myColor
8

Hey @russian-dima , thanks for all your help. I want to use this on the main display page rather than the individual dynamic pages. How would I do that?

9

In your case it seems like you need an ORDINARY-DATASET instead of a dynamic one.

  1. Create a second DATASET → ORDINARY-ONE.
  2. change code and use…
	let a = from index;
	let b = number of items;

$w("#dataset1").getItems(a, b)
  .then( (result) => {
    let items = result.items;
    console.log(items);
    let totalCount = result.totalCount;
    console.log(totalCount);
  }).catch((err) => {console.log(err);});
10

Ok, so do I now need to make a new dataset, not quite sure what you mean?

11

That was your wish…

Hey @Velo-Ninja, thanks for all your help. I want to use this on the main display page rather than the individual dynamic pages. How would I do that?

If you want to display all the items at once, you will have to use an ordinary DATASET + REPEATER. Yes, you would have to generate a new ordinary dataset connecting it to your database.

On a dynamic page (which is connected to a dynamic dataset), you can show JUST ONE ITEM at same time.

This is the big difference between dynamic dataset and an ordinary one.