[feature] Get property from style class

I would like to obtain with script or expression some style property, especially background.

Use case
In some component with color property, and without style to drive it, I dont want to hard code the color value…

Is there any way to manipulate style classe with script or sdk ?

I’m not sure that I understand your question but if you want to change the style then …

  • Create the two styles in Perspective | Styles.
  • In the Perspective Property Editor select one of the styles in props.style.classes.
  • Add an expression binding to the props.style.classes. In the example below we change the style from blinking to noBlink depending on the value of tag_x.
    if({[default]tag_x}, "blinking", "noBlink")

Are you asking specifically about modifying Perspective style classes or just the style property of certain components?

Just to get the easiest case out of the way:

The issue is for example to set a color property on a component, this color property is not in a style class.
I would like to read the value of the color from a style ressource.

It’s still not clear what you are asking. Can you add a bit more detail what problem you’re trying to solve?

You can’t read the CSS files, as far as I know.
Are you using themes properly? (They’re great for maintaining consistency across an application.)


See down at the bottom where all the presets are defined for you.

True you cant really get the css file, but the styles are stored in json.

C:\Program Files\Inductive Automation\Ignition\data\projects\PROJECTNAME\com.inductiveautomation.perspective\style-classes\STYLENAME\style.json

Idk why you would want to get this though. if you want to use fixed/dynamic colors in a style, you can use var() or -- (i think?)

Yes I use some theme variable for main colors, but other colors are stored in style classes.

You can also create your own css variables in the :root

(example with injection)
} :root{--test:red;} {

(note that it might take a restart of the page before it works in the designer)

I still don’t understand what you are trying to do. Please give us an example with some screenshots and code.

just a wat to bind the color from a styles class to the color property of an icon

OK. You want to apply a color defined in a style to a component that does not accept style classes such as the icon component. (This is sensible as it allows you to maintain the theme.)
I can’t see a way to do that. I’ll have a further think.

A style class that sets the Font Color will do this. Is there any reason it needs to be done in binding instead of just using the style itself?

1 Like