Dynamic allocation of tag data into style

Ignition
1

Hello,

How can I dynamically allocate the tag data into style for example? consider we want to pass colour into style and further use that style for future views built how can we do it.

Thanks,
Kartik I

2

I'm not sure what you're asking.

Do you have some color code stored in a tag and you want to use it to apply color to a component ?

3

@pascal.fragnoud Yes I want to store colour and pass it to style.

4

You won't be able to use those in style classes, but it shouldn't be difficult to use tags directly in style properties with bindings.
For example, if you have a tag that's called [default]bg_color, you can bind a component's styles.backgroundColor property to your tag and it should work just fine.

But, I think an important question here is... why ? Why are styles in tags ? What are you trying to do exactly ?

5

you should store color vars in the stylesheet (does not work for some charts/pen colors)

https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-EnablingtheAdvancedStylesheet

image
image

image
image781×431 29 KB

Note
You might have to close and open the view again for it to work in the designer

If you really really need the colors to come from somewhere else you could inject it into your website with a markdown...
Put this in a view that is always open (like header dock)
But be sure that you know where this comes from because if you import some data users can enter freely this could pose a security risk

image
image1134×179 11.3 KB

[
  {
    "type": "ia.display.markdown",
    "version": 0,
    "props": {
      "markdown": {
        "escapeHtml": false
      }
    },
    "meta": {
      "name": "Markdown_0"
    },
    "position": {
      "x": 203,
      "y": 463,
      "height": 200,
      "width": 200
    },
    "custom": {},
    "propConfig": {
      "props.source": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "\"--special_color: #888800;\""
          },
          "transforms": [
            {
              "code": "\n\tcode =  \"\"\"<style>\n\t:root{\n\t\"\"\"+value+\"\"\"\n\t}\n\t</style>\"\"\".replace(\"\\n\", \"\").replace(\"\\t\", \"\")\n\treturn code\n",
              "type": "script"
            }
          ]
        }
      }
    }
  }
]
6

@pascal.fragnoud I have used binding and completed the task.

7

@pascal.fragnoud my query is I have stored colour data in one memory tag just using that tag data need to dynamically change style where i have made background colour property.

8

That doesn't tell us why you put styles in tags. There's probably a better way, but in order to help you find it we'd need to know what you want to do and why there are styles in tags.

9

I have already achieved my output with binding

10

I have already achieved my output with binding.

Yes, but we're concerned that your solution is not appropriate. I suspect that you should be storing the colors in either session or view custom properties and binding your component styles to those.

11

I think they should be in a stylesheet or style classes.

12

@Transistor so what I am exactly trying to achieve is dynamically pass the color from tag.

13

why from a tag? Where is the data stored? in a db? or is it just a static memory tag?

14

That's not WHAT you're trying to achieve but HOW you're trying to do it.

1 Like
15

Static memory tag

16

@pascal.fragnoud yeah but can we do it from tag thats still a question

17

That question has been answered. Yes, you can do it from a tag.

The question that we're asking is why it needs to be done from a tag at all? There are other mechanisms in perspective which are made for exactly this purpose. Data that should be client or session based should most likely not be stored in a tag.

1 Like
18

Tags are usually used for process information, PLC values, production counts, recipe transfer, etc. They can also be used to store some configuration information that might be stored in a database.

HMI styles can be handled in various ways - but generally not by tags. Let's use a label component as an example and let's say it has two states, normal and fault.

Easy way (hard-coded)

  • On the label props create style.backgroundColor
  • Create an expression binding on the new prop.
    if({[default]myFault}, "red", "white")
    When the myFault tag is true the background will be red. Otherwise white.
    The problem with this is that if you change the theme you have to edit every component's binding.

Better way (using Perspective Built-In Themes - Ignition User Manual 8.1 - Ignition Documentation)

  • On the label props create style.backgroundColor
  • Create an expression binding on the new prop.
    if({[default]myFault}, "--error", "--neutral-10")
    This has the advantage that you can now change the theme and all components using those theme colors will update automatically.

Another way (using style classes)

  • In Project Browser → Styles, right-click and create a style class. Let's call it errorLabel. Edit the class to give all the borders, colors, hover effects, etc., that you want for the error condition.
  • On the label props delete style.backgroundColor if it exists.
  • Create an expression binding on styles.classes.
    if({[default]myFault}, "errorLabel", "")
    This will apply the errorLabel class to the label in the event of a fault.

You can see that this doesn't use any tags other than to trigger the styling.

Keep content and style separate.

3 Likes