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

Adding a state definition to a button

  • November 10, 2022
  • 1 reply
  • 1394 views

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.

Best answer by jensc

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.

1 reply

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

 

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

Terms & ConditionsAccessibility statement