cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Adding a state definition to a button

Tomellache2B
12-Amethyst

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.

1 ACCEPTED SOLUTION

Accepted Solutions
jensc
13-Aquamarine
(To:Tomellache2B)

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 solution in original post

2 REPLIES 2

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.

 

jensc
13-Aquamarine
(To:Tomellache2B)

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.

Announcements