Skip to Content
0

Change Color and Background Color in Icon component

Mar 21, 2017 at 03:33 PM

341

avatar image
Former Member

I have a small requirement and been struggling since yesterday afternoon on it. I have two buttons on top of my dashboard which you can see in the image. I have added two icons with infographics. The current Color of ICON_1 is black and background color is white and for ICON_2 is white and black respectively. I want to change them when you click on Demographics button. something like below in images.

In the onclick properties of Button_2 i write below code to change Color and BGColor of ICON_1&2.

ICON_1.setColor(white);

ICON_1.setBackGroundColor(black);

ICON_2.setColor(black);

ICON_2.setBackGroundColor(white);

this throws error.

I tried Hex code and RGB also but nothing is acceptable by script.

So wanted to check what should be the correct code to change Color and Background Color. I searched a lot but did not find a solution in any of the forums.

(this is a manually set ICON property for example of what i want to acheive)

onload.png (2.5 kB)
onclick.png (1.5 kB)
onclick.png (1.5 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Mustafa Bensan Mar 22, 2017 at 03:16 AM
1

Hi Rajasekhar,

As an enhancement to Agata's solution and matter of good coding practice, I would recommend you define the colours as Global Script Variables instead of hardcoding them. This has the following advantages:

  1. The code is more readable;
  2. If in future you decide you need to change the colours, you only need to update the variable values instead of updating all of the hard-coded occurrences of the colour assignments throughout your script.

The Global Script Variables would be defined as follows:

The revised script code of the "On Click" event script for BUTTON_2 would look like this:

ICON_1.setColor(colour1);
ICON_1.setBackgroundColor(colour2);

ICON_2.setColor(colour2);
ICON_2.setBackgroundColor(colour1);

Regards,

Mustafa.


Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Mar 21, 2017 at 03:45 PM
0

Rajasekhar,

This code worked for me:

ICON_1.setColor("#ffffff");

ICON_1.setBackgroundColor("#333333");

ICON_2.setColor("#333333");

ICON_2.setBackgroundColor("#ffffff");

and the other button:

ICON_2.setColor("#ffffff");

ICON_2.setBackgroundColor("#333333");

ICON_1.setColor("#333333");

ICON_1.setBackgroundColor("#ffffff");

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Mar 21, 2017 at 04:02 PM
0

Aha... i was having those Hex codes in single quotes assuming that is how we do it for CSSClass. Double quotes worked like a charm.

Thanks Agata.

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Awesome!

I never use single quotes in coding, for that very reason.

Please can you mark my answer as correct?

0