Update Custom CSS through a service

[AndyHilton]

I need my Custom CSS for a given mashup to be dynamic.  In order to do that I need to be able to update my mashup Custom CSS through a service.  Is there a way to do this?

[rjanardan]

CustomClass property is bindable. So you can dynamically change class name using the string output of a service. 

[AndyHilton]

I'm looking for something like the following but I don't know what output I
should use for the script or how I would bind it to the given widget.

https://community.ptc.com/t5/Vuforia-Studio/Edit-CSS-Styles-with-JavaScript/m-p/549899

[justinoberle]

If customClass is the only option, I will have to create dozens of classes in a service then create the css for each class. And even then, it would not be perfect. Ideally you have a variable from a service like a height of expected content and you send this to the css. I don't think thingworx is built for this type of design though. Any traditional web app language like react can compute the size and adjust it dynamically in the css. With thingworx I think the best you can do is create a million scenerios, or CustomClasses, and pick the right one at the right time. A LOT of extra work unfortunately.

[BogdanM]

One way you can do this is to use a legacy value display and set its formatting to unsanitized HTML. Just be very careful to properly secure the dynamic parts of your stylesheet so you don't create security issues. Also keep in mind that invalidating the stylesheets is slow so you shouldn't do it very often.

With those points in mind, you can write a service that outputs a style tag that then gets added to the page, e.g.:

const result = '<style> .MyClass { color: ' + myColor + '; } </style>';