# Toggle Button Question

**URL:** <https://rossvideo.community/t/toggle-button-question/8549>\
**Category:** Automation & Control\
**Created:** [February 16, 2021, 11:33pm UTC](https://rossvideo.community/t/toggle-button-question/8549 "2021-02-16T23:33:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jerryburianyk](https://rossvideo.community/letter_avatar_proxy/v4/letter/j/b38774/32.png) [@jerryburianyk](https://rossvideo.community/u/jerryburianyk)\
**Post date:** [February 16, 2021, 11:33pm UTC](https://rossvideo.community/t/toggle-button-question/8549/1 "2021-02-16T23:33:00Z")

</div>

Is it possible to put a variable in for the constraint key text block

> CLICK FOR ON\< in the example below?

-Jerry

```
     <param access="1" constrainttype="INT_CHOICE" name="bname2" oid="bname2" precision="0" type="INT32" value="0" widget="toggle">
        <constraint key="0">CLICK FOR ON</constraint>
        <constraint key="1">CLICK FOROFF</constraint>
     </param>

```

---

<div class="post-metadata">

**Author:** ![antonygiraldo](https://rossvideo.community/letter_avatar_proxy/v4/letter/a/ac8455/32.png) [@antonygiraldo](https://rossvideo.community/u/antonygiraldo)\
**Post date:** [February 23, 2021, 2:16am UTC](https://rossvideo.community/t/toggle-button-question/8549/2 "2021-02-23T02:16:00Z")

</div>

There is no way to put a variable directly into the source code.

But you could utilize a script that changes your constraints. This could be ran from an api if needed to be ran at load time. See below…

 CLICK FOR ON CLICK FOR OFF var choices = []; choices[0] = 'CLICK FOR ON'; choices[1] = 'CLICK FOR OFF';

var choiceConstraint = params.createIntChoiceConstraint(choices);

params.replaceConstraint(‘bname2’, choiceConstraint);  
  
  
  
var choices = ;  
choices[2] = ‘CLICK FOR ON’;  
choices[3] = ‘CLICK FOR OFF’;

var choiceConstraint = params.createIntChoiceConstraint(choices);

params.replaceConstraint(‘bname2’, choiceConstraint);

  
  
  
var numList = params.getConstraint(“bname2”);  
var choices = numList.getChoices();  
var output = “Constraints are:”;  
for (var i = 0; i \< choices.length; i++) {  
output = output + "\nkey: " + choices[i].getValue() + " = " + choices[i].getName();  
}  
ogscript.rename(“output”, output);  
  

|
| |
|
| |

 [#DashBoard](https://livinglive.community/search?s=tags%3A%22DashBoard%22&executesearch=true)

---

<div class="post-metadata">

**Author:** ![jerryburianyk](https://rossvideo.community/letter_avatar_proxy/v4/letter/j/b38774/32.png) [@jerryburianyk](https://rossvideo.community/u/jerryburianyk)\
**Post date:** [February 23, 2021, 7:40pm UTC](https://rossvideo.community/t/toggle-button-question/8549/3 "2021-02-23T19:40:00Z")

</div>

Thanks for the response on this.  
I guess this would be a feature request.  
It seems like a lot of hoops to jump through just to have a more flexible way to customize the label a toggle button.

[#DashBoard](https://livinglive.community/search?s=tags%3A%22DashBoard%22&executesearch=true)

---

<div class="post-metadata">

**Author:** ![brandonbaker](https://rossvideo.community/letter_avatar_proxy/v4/letter/b/71c47a/32.png) [@brandonbaker](https://rossvideo.community/u/brandonbaker)\
**Post date:** [February 24, 2021, 12:41am UTC](https://rossvideo.community/t/toggle-button-question/8549/4 "2021-02-24T00:41:00Z")

</div>

Yo dude!

Here is a quick panel to help with toggling states. while there are a million ways to do this, I hope some of this code helps you figure out a way that works for you. I wrote a bunch of green text to help figure out what the code is doing. Keep in mind that this won’t be persistent so every time you close the panel and restart it the button will default to off.

// toggle button API to change color and name

var state = {style:{on:‘bg#selectbg’, off:‘bg#buttonbg’}, name:{on:‘Click for off’,off:‘Click for on’}}// this look s complicated but it is keeping style and name data for later use. fell free to change anything in the quotes and it will change how the button do.  
var toggleState = 0 // 0= off 1 = on

function ButtonToggle(buttonName){// the button name is set but the function call which in this case is just the ID for later use. Check the button if you want to see how it is being called \<\<–  
if(toggleState == 0){// Yo is the state off by that I mean 0? if so do this  
toggleState = 1; // first set the state to on so I know for next time  
ogscript.setStyle(buttonName, state[‘style’][‘on’]);//lets go ahead and change the style to what we are calling on up in the above object  
ogscript.rename(buttonName, state[‘name’][‘on’]);// changing that name here too  
}else{// oh dang so it wasn’t off?  
if(toggleState == 1){//Hmmmm lets see if it is on. Oh it is? sweet do this!  
toggleState = 0;// set the state to off for next time  
ogscript.setStyle(buttonName, state[‘style’][‘off’]);// lets set the style like above but for off now  
ogscript.rename(buttonName, state[‘name’][‘off’]);// second verse here comes the name.  
}  
}  
}

ButtonToggle(component.getClientProperty('id')); // yo do the function in the API and use my ID as the "buttonName". Boom Town!

[#DashBoard](https://livinglive.community/search?s=tags%3A%22DashBoard%22&executesearch=true)

---

<div class="post-metadata">

**Author:** ![brandonbaker](https://rossvideo.community/letter_avatar_proxy/v4/letter/b/71c47a/32.png) [@brandonbaker](https://rossvideo.community/u/brandonbaker)\
**Post date:** [February 24, 2021, 2:24am UTC](https://rossvideo.community/t/toggle-button-question/8549/5 "2021-02-24T02:24:00Z")

</div>

I should mention that to the best of my knowledge there is not a good way to trigger a toggle buttons style from script so I just keep the style in the api and tell the button what to do hence the ogscript.setStyle([ID],[style]). Here is another way to do it that simply uses params and a task in the button. keep in mind just use a button instead of a param that looks like a button. You have a bit more flexibility that way. Good luck dude.

var name = {on:'This button is on', off:'This button is off'};// names to be used if on or off var style = {on:'bg#selectbg', off:'bg#buttonbg'} var value = params.getValue('ToggleButton', 0);//what is the current state of the param var button = component.getClientProperty('id');//what is the name of this button

if(value == 0){// if the param is off do this  
ogscript.rename(button, name[‘on’]);//rename this button  
params.setValue(‘ToggleButton’, 0, 1);//set the param value to on  
ogscript.setStyle(button, style[‘on’])  
}else{  
if(value == 1){ //if the param is on do this  
ogscript.rename(button, name[‘off’]);// rename the button the off value  
params.setValue(‘ToggleButton’, 0, 0);  
ogscript.setStyle(button, style[‘off’])  
}  
}  
  
  
  
[#DashBoard](https://livinglive.community/search?s=tags%3A%22DashBoard%22&executesearch=true)

---

<div class="post-metadata">

**Author:** ![jerryburianyk](https://rossvideo.community/letter_avatar_proxy/v4/letter/j/b38774/32.png) [@jerryburianyk](https://rossvideo.community/u/jerryburianyk)\
**Post date:** [March 12, 2021, 1:40am UTC](https://rossvideo.community/t/toggle-button-question/8549/6 "2021-03-12T01:40:00Z")

</div>

Thanks - lots ponder here!!

[#DashBoard](https://livinglive.community/search?s=tags%3A%22DashBoard%22&executesearch=true)