cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

change the style of widget dynamically

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?

Regards,

Quadir

Tags (1)
11 REPLIES 11

Re: change the style of widget dynamically

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

Re: change the style of widget dynamically

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

             

   }       

Re: change the style of widget dynamically

Hi giri,

Where exactly we can write the custom css in the platform ?

Regards,

Neetu

Re: change the style of widget dynamically

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

Re: change the style of widget dynamically

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

Re: change the style of widget dynamically

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.

Re: change the style of widget dynamically

Hi Carles,

Thanks for your response.

So there is no way to customise the styles of Widgets and upload them back on Thingworx Composer to use ? The UI thingworx support is very basic and seems bit old style. I want to implement UI with recent layouts like material design.

Regards,

Neetu

Re: change the style of widget dynamically

You can customize the styles using Style properties, before you asked for Dynamic Styling not static. But anyway, yes it kind of limited, but depending on what you need to get you can do it, this is for Industrial IoT not mass wide user interface.

Anyway, always you can chose the UI framework that you want and use ThingWorx REST API.

Best Regards,

Carles.

Re: change the style of widget dynamically

Hi Carles,

I am sorry if I haven't put my query in right words.

What I was trying to ask is to add css code to existing Widgets to amend their styles in our way.

Thanks for your response.

Regards,

Neetu