# Dynamic allocation of tag data into style

**URL:** <https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 18, 2024, 4:57am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424 "2024-01-18T04:57:25Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kartik\_I](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@Kartik\_I](https://forum.inductiveautomation.com/u/Kartik_I)\
**Post date:** [January 18, 2024, 4:57am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/1 "2024-01-18T04:57:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 18, 2024, 9:48am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/2 "2024-01-18T09:48:01Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![Kartik\_I](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@Kartik\_I](https://forum.inductiveautomation.com/u/Kartik_I)\
**Post date:** [January 19, 2024, 4:35am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/3 "2024-01-19T04:35:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 19, 2024, 8:49am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/4 "2024-01-19T08:49:59Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 19, 2024, 9:07am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/5 "2024-01-19T09:07:56Z")

</div>

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](https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-EnablingtheAdvancedStylesheet)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/2/82e7429b44cc744a6e4e5d713a963edf24c5b233.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/63fe29cbde486ceb3bc6ba8b699ff5acd8e36fe6.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/0/30330bb309208c7d110b84bcd6e68a8ad6d190e1.png)

**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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/0886b4ee8bb5a81e06a375ad9b4ee3064feb8e8a.png)

```auto
[
  {
    "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"
            }
          ]
        }
      }
    }
  }
]

```

---

<div class="post-metadata">

**Author:** ![Kartik\_I](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@Kartik\_I](https://forum.inductiveautomation.com/u/Kartik_I)\
**Post date:** [January 19, 2024, 9:19am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/6 "2024-01-19T09:19:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kartik\_I](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@Kartik\_I](https://forum.inductiveautomation.com/u/Kartik_I)\
**Post date:** [January 19, 2024, 9:26am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/7 "2024-01-19T09:26:39Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 19, 2024, 9:29am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/8 "2024-01-19T09:29:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Kartik\_I](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@Kartik\_I](https://forum.inductiveautomation.com/u/Kartik_I)\
**Post date:** [January 19, 2024, 9:58am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/9 "2024-01-19T09:58:35Z")

</div>

I have already achieved my output with binding

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 19, 2024, 10:35am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/10 "2024-01-19T10:35:48Z")

</div>

> 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.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 19, 2024, 10:58am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/11 "2024-01-19T10:58:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kartik\_I](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@Kartik\_I](https://forum.inductiveautomation.com/u/Kartik_I)\
**Post date:** [January 19, 2024, 11:33am UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/12 "2024-01-19T11:33:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 19, 2024, 12:07pm UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/13 "2024-01-19T12:07:04Z")

</div>

> [@Kartik\_I](#):
>
> from tag

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 19, 2024, 1:09pm UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/14 "2024-01-19T13:09:16Z")

</div>

> [@Kartik\_I](#):
>
> @Transistor so what I am exactly trying to achieve is dynamically pass the color from tag.

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

---

<div class="post-metadata">

**Author:** ![Kartik\_I](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@Kartik\_I](https://forum.inductiveautomation.com/u/Kartik_I)\
**Post date:** [January 19, 2024, 1:23pm UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/15 "2024-01-19T13:23:00Z")

</div>

Static memory tag

---

<div class="post-metadata">

**Author:** ![Kartik\_I](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@Kartik\_I](https://forum.inductiveautomation.com/u/Kartik_I)\
**Post date:** [January 19, 2024, 1:24pm UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/16 "2024-01-19T13:24:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [January 19, 2024, 2:02pm UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/17 "2024-01-19T14:02:29Z")

</div>

> [@Kartik\_I](#):
>
> yeah but can we do it from tag thats still a question

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.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [January 19, 2024, 2:03pm UTC](https://forum.inductiveautomation.com/t/dynamic-allocation-of-tag-data-into-style/84424/18 "2024-01-19T14:03:39Z")

</div>

**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](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes))

- 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.
