2 Replies Latest reply on Apr 16, 2017 7:24 PM by rabernathy RSS
    qumar Newbie

    change the style of widget dynamically

    Hi ,

         I want to change the style of the widget dynamically, for ex. i have to change the color of label on button click or any other event of any widget.How can i do that?



      • Re: change the style of widget dynamically
        giri Communicator

        Hi Qadir,


        You can change the color both statically and dynamically in ThingWorx Studio. For static (i.e., stable throughout the experience), you can either write a custom css (under Styles-> Application) or you can use ionic framework classes to auto-define styles, please follow the ionic framework reference doc. As shown below, I was using button class 'button-balanced' to change the background as green.

        Here, I'm using 'energized' class on a label to change the color of text.


        For dynamic styles, i.e., change on button click, you can write a custom JS code to toggle css class or execute a JS function to change the styles of a widget class. FYI, right next to click event you can click on the 'JS' button, here whichever code we write will be executed on click event. Wrt js code, I'll leave it to your usecase specific requirement and consensus.



          • Re: change the style of widget dynamically
            rabernathy Explorer

            If you want to remove a css class and add a new one to a button dynamically, here is a code sample:


            if (angular.element(document.querySelector('[widget-id="button-1"] button')).hasClass("OldButton")) {


            angular.element(document.querySelector('[widget-id="button-1"] button')).removeClass("OldButton");


            angular.element(document.querySelector('[widget-id="button-1"] button')).addClass("NewButton");