# Button background color change dynamically - Vision

**URL:** <https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [August 24, 2022, 1:43pm UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391 "2022-08-24T13:43:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [August 24, 2022, 1:43pm UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/1 "2022-08-24T13:43:23Z")

</div>

Hi,

I am using a button in the template and calling it in a template repeater in a window. I would like to change the background color of the button but the issue is,  
for eg in a template repeater, if there are 3 buttons, when i click on the button 1 - bG color should be changed and when i click on the button 2 - bG color should be changed for button2 whereas button 1 should go back to its original color.  
Is there any possibilities to achieve this.  
Awaiting for a quick response, Thanks in advance

---

<div class="post-metadata">

**Author:** ![JoeF](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@JoeF](https://forum.inductiveautomation.com/u/JoeF)\
**Post date:** [August 24, 2022, 2:09pm UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/2 "2022-08-24T14:09:14Z")

</div>

If your group of 3 buttons will only ever have one “activated”, then the Multi-State Button component could be an easy option to sync your background color needs: [Multi-State Button](https://docs.inductiveautomation.com/display/DOC80/Vision+-+Multi-State+Button#:~:text=The%20Multi%2DState%20Button%20works,the%20visual%20style%20will%20change.)

Otherwise, if you must stay with a standard Button component or Toggle Button component - you can use an expression binding or maybe a script to set the background colors per your desired conditions.

Basic example on a Toggle Button actionPerformed script, if your need customization beyond an expression:

```auto
if event.source.selected:
	event.source.buttonBG = 255,255,255 # one color here
else:
	event.source.buttonBG - 0,0,0 # other color here

```

---

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [August 24, 2022, 2:29pm UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/3 "2022-08-24T14:29:52Z")

</div>

Hey hi,

Thanks for the idea. The given script, worked only when i click on the button.  
When i click on the another button, previous button color is not going back to its original color

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [August 24, 2022, 2:41pm UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/4 "2022-08-24T14:41:24Z")

</div>

Each button’s ActionPerformed script should probably look something like this, where the other button’s colors are changed by the action

```auto
event.source.buttonBG = 255,255,255
event.source.parent.getComponent("Button 2").buttonBG = 0,0,0
event.source.parent.getComponent("Button 3").buttonBG = 0,0,0

```

---

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [August 24, 2022, 4:22pm UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/5 "2022-08-24T16:22:11Z")

</div>

But i am using a single button in the template which will be repeated twice or thrice.

---

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [August 24, 2022, 6:46pm UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/6 "2022-08-24T18:46:35Z")

</div>

Any ideas on this?

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [August 24, 2022, 6:51pm UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/7 "2022-08-24T18:51:53Z")

</div>

I’m not in a position where I can type the code, but you could getComponants, and then use a looping statement to check all of the components for your template path. Exception handling will need to be in place for the components that return a null template path.

```auto
try:
    [...]
except:
      pass

```

For each component that is from your template, set the BG color to 0,0,0 using the “.name” extension

Then, after the loop is completed, fire your` event.source.buttonBG = 255,255,255` code

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [August 24, 2022, 10:20pm UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/8 "2022-08-24T22:20:55Z")

</div>

I was on the road earlier and couldn’t type this out. Here is an approach that could accomplish your goal using a template button:

```auto
for comp in event.source.parent.getComponents():
	try:
		if “your template name” in comp.templatePath
			event.source.parent.getComponent(comp.name).buttonBG = 0,0,0
	except:
		pass
event.source.buttonBG = 255,255,255

```

This should find all the other buttons in the window that are template buttons, and modify them in the way you want.

---

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [August 25, 2022, 4:30am UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/9 "2022-08-25T04:30:10Z")

</div>

Hi,  
Where we have to use this script?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [August 25, 2022, 5:09am UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/10 "2022-08-25T05:09:38Z")

</div>

What happens when the button is clicked? Is there any tag that is set to a corresponding value? If so, you would just need to bind a custom prop to that tag and then call the script on property change of that value. Otherwise, to make it generic, you would need to get the template repeater object in script, traverse its repeating objects, and set their button background colours. You would need to clear them all first and then set the button that’s clicked to your colour

This might help to show you a breakdown of all components within an object (e.g. the template repeater component)

```auto
def printAllObjectComponents(object, indexPrefix = '', indent = ''):
	components = object.getComponents()
	for index, component in enumerate(components):
		print "%s %s%s %s" % (indent, indexPrefix, index, component)
		
		printAllObjectComponents(component, indexPrefix + str(index) + '.', indent + '\t')

```

using this, you can see that the templated objects are all contained within:

```auto
templateRepeater.getComponent(1).getComponent(0).getComponent(0)

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fa33bb7f798e3e7664af3c9221cde96d8d4e592a.png)  
(Area Alarms is the template I chose to repeat)

Then you can loop through this array and set the background colour of your buttons, for example:

```auto
if event.propertyName == 'refresh':
	tr = event.source
	templates = tr.getComponent(1).getComponent(0).getComponent(0).getComponents()
	
	for template in templates:
		label = template.getComponent('Label')
		label.text = 'Bob'

```

Just keep in mind that the component index positions could possibly change in the future if IA decide to shuffle stuff around. You _could_ mitigate this by looking for the template objects with inspiration taken from the printAllObjectComponents function

Also note, you will need to get a reference to the TemplateRepeater component from within one of the repeated templates first. You can do that using button.parent.parent… as many parents as you need to finally get to the templaterepeater object.

The easiest way is obviously not to go down this path and to instead use a tag 🙂

---

<div class="post-metadata">

**Author:** ![Dharani\_T](https://avatars.discourse-cdn.com/v4/letter/d/bc8723/32.png) [@Dharani\_T](https://forum.inductiveautomation.com/u/Dharani_T)\
**Post date:** [August 25, 2022, 6:26am UTC](https://forum.inductiveautomation.com/t/button-background-color-change-dynamically-vision/63391/11 "2022-08-25T06:26:39Z")

</div>

Hey hi,

Thanks a lot.  
Currently i have done this with the help of a vision client tag.  
I have binded the background color of the button as  
` if ({[client]btnColor}={Trend_btn.Button.text},color(71,255,71),color(138,255,255))`

Then on mouse click:  
`system.tag.writeBlocking("[client]btnColor", event.source.text)`