Skip to main content
Q
qumar1-Visitor
1-Visitor
April 13, 2017
Question

change the style of widget dynamically

  • April 13, 2017
  • 2 replies
  • 9499 views

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?

Regards,

Quadir

2 replies

K
katte5-Regular Member
5-Regular Member
April 14, 2017

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.

Thanks,
Giri

R
rabernathy12-Amethyst
12-Amethyst
April 16, 2017

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

             

   }       
    X
    xroot1-Visitor
    1-Visitor
    June 29, 2018

    Hi rabernathy, 

     

    Thank you for your reply. This works great with a button!

      

    thank you so much!

    C
    CarlesColl1-Visitor
    1-Visitor
    October 19, 2017

    Hi Neetu,


    I think you are asking for ThingWorx Composer Mashups not ThingWorx Studio, and Giri it's answering for ThingWorx Studio.

    On the case of ThingWorx Composer Mashups, you should look at ValueDisplay widget, you can have Conditional Styling using "ValueFormat" property.

    Best Regards,

    Carles

    N
    nagrawal-21-Visitor
    1-Visitor
    October 19, 2017

    Hi Carles,

    Thanks for your response.

    What I understood from ValueDisplay widget is to mainly display the data.

    What I want to do is to apply css styles to existing widgets. How would I achieve this in Thingworx Composer  Mashup ?


    Regards,

    Neetu

    C
    CarlesColl1-Visitor
    1-Visitor
    October 19, 2017

    Hi Neetu,

    No css modification on existing widgets for now. You should stick to ValueFormat semi dynamic formatting, this kind of dynamic formatting it's available on:

    • ValueDisplay
    • Grid
    • List
    • Some Charts (DataStyle parameters)
    • LED Display
    • Tree
    • Shape

    The good part is that's browser agnostic, the bad it's that you are limited to above options and all styles must be defined at design time.

    Best Regards,

    Carles.

      Terms & ConditionsAccessibility statement