I am using the split button component and would like to change the background when one of the options is selected.
I tried using the event handler and a temp state placed in the background color section input field of the split button but It doesn't seem to work.
Is there a way for me to do an event handler script to change the state of the object's variable?
splitbutton1.style.background = "danger";
something along those lines? using maybe Object.assign(target, source);
think you can resolve this by just adding a ternary within the styling.
below is the code I used in the background section:
{{splitButton1.selectedIndex == 0 ? 'yellow': 'red'}}
I believe this could work for this case, thank you @DavidD .
I was curious if there is a way to change object variables as well for other uses.
Has anyone come across a method to achieve this?
I did a javascript query to trigger when option closed is chosen with the code below and the console does show the new variable but the state in retool does not change. I am assuming it's being blocked or no refreshing?
splitButton1.style.background = "danger";
console.log(splitButton1.style.background);
you would have to have one of the functions like .setValue() with the component.
Alternatively, if you want to use a JS query to trigger it, you could have a JS query trigger a temporary state and reference the temporary state within the style's background
would look something like:
JS Query:
yourTempState.setvalue('danger')
split button style's background:
{{yourTempState.value}}
hope that helps!
@DavidD , I tried this method it was actually my first method that I tried. But it did not seem to work.
I am aware of the setValue() but not every object has this implemented is my issue.
Is there a method for setting a value for component object variables that do not have the setValue() function ?
Hi there! As alluded to in this thread, many properties in Retool, including the styles, are currently read only. You cannot set them to be equal to a new value using =.
The general solution to this limitation is to use temporary state, which can overwritten with .setValue()
For the component styles specifically, if you can handle it via a ternary instead of having to create a state variable, that may be preferred, as it saves you some steps. We'll submit a feature request internally to support programmatically setting component styles
@Tess , thank you for the response. I appreciate you submitting a feature request. I believe it is important to have these types of customizable features, a specially for users that come from typical programming backgrounds and don't have such limitations.