Skip to main content
Janicen16-Pearl
16-Pearl
November 10, 2022
Solved

Adding a state definition to a button

Hello everyone,

 

I hope you are well.

I want to create a service that changes the value of a property. This service takes in an input (true or false) which is then assigned to the property's value. 

I want to use the button to accomplish this. Meaning only when I click the button will I get either a true or false value. This will cause the property to change value whenever the button is clicked.

 

The problem is buttons do not take in state definitions (Where I planned to keep the true/false). 

How else can I accomplish this?

Your suggestions will be much appreciated.

 

Regards.

jenscAnswer
17-Peridot
November 15, 2022

Hello,

 

You could use an expression to set your buttons custom css class dependent on your boolean value.

 

So maybe something like this: 

 

if (true) {
 result = myButtonClass1
} else {
 result = myButtonClass2 
}


Put these in the Custom CSS tab

and then bind the custom CSS input on your button to the result of your expression.

.myButtonClass1 .widget-ptcsbutton {
 background-color: red !important;

}

.myButtonClass2 .widget-ptcsbutton {
 background-color: green!important;

}

 

 

Hope this helps.

View in thread

2 replies

Janicen16-PearlAuthor
16-Pearl
November 10, 2022

I managed to do this using a service. 

In my service, I used a conditional statement to check the current value of the property and then assigned the property a new value.

Now I am looking to change the color of the button depending on the property value (either true or false).

Is it possible to do this using an expression?

 

Best Regards.

 

Translate
jensc17-PeridotAnswer
17-Peridot
November 15, 2022

Hello,

 

You could use an expression to set your buttons custom css class dependent on your boolean value.

 

So maybe something like this: 

 

if (true) {
 result = myButtonClass1
} else {
 result = myButtonClass2 
}


Put these in the Custom CSS tab

and then bind the custom CSS input on your button to the result of your expression.

.myButtonClass1 .widget-ptcsbutton {
 background-color: red !important;

}

.myButtonClass2 .widget-ptcsbutton {
 background-color: green!important;

}

 

 

Hope this helps.

Translate
Terms & ConditionsAccessibility statement