Skip to Content
avatar image
Former Member

Change Color and Background Color in Icon component

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Mar 22, 2017 at 03:16 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 21, 2017 at 03:45 PM

    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");

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 21, 2017 at 04:02 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Awesome!

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

      Please can you mark my answer as correct?