If Cell empty; change button colour

Discussion Ask a question
,
1

Hey, I’m trying to convert my static pages into dynamic but I stumbled on a issue I just cant solve.
Basically, I have buttons (with hyperlinks associated) which are usually coloured blue-royal and they’re red-coloured when links arent available for that subject.

Up-to-recently, I’ve been manually changing the colour of the button when there wasn’t a hyperlink available (ie reference cell in database is empty).

Does anybody know how to dynamically change button colour in similar contexts?

website: emunations.com

2

To change the button text color, you can do something like this:

$w("#button1").style.color = "red"; // or use rgb, for example: "rgb(255,0,0)" instead of the color name.

You can also make it conditional:

!$w('#dynamicDataset').getCurrentItem.url ? $w("#button1").style.color = "red" : $w("#button1").style.color = "blue"; //use the dataset property name, the button property name and the link field key (here I used the field key "url" as an example)
1 Like
3

Thanks for the reply. It’s inline with what I needed :slight_smile:

4

Hey, I’m now converting pages to be rendered “dynamically & with a repeater” but I tried adapting the existing code to apply in this new scenario and it doesn’t seem to work:

$w.onReady( function () {
!$w(‘#dynamicDataset’).getCurrentItem.url5 ? $w(“#buttond5”).style.backgroundColor = “rgb(255,128,128)” : $w(“#buttond5”).style.backgroundColor = “rgb(42,83,193)”;
});

This is an example of 1 button in which it’s either REDish or BLUEish depending if the cell is empty.

A little parenthesis: the database is connected to COLLECTION A, which is referencing COLLECTION B.url5 column for the info…

Any help would be much appreciated and thanks for your time!

5

The code for items inside a repeater is different:

$w.onReady(function () { 
$w('#repeater1').onItemReady(($i, iData, inx) => {
!iData.url5 ? $i("#buttond5").style.backgroundColor = "rgb(255,128,128)" : $i("#buttond5").style.backgroundColor = "rgb(42,83,193)"; 
})
});
6

I tried the provided code and they all still appear the same background color rbg(255,128,128). That said, I think you’re on the right path for sure…