Split Button Conditional Color Change

I am using the split button component and would like to change the background when one of the options is selected.

Screenshot 2023-02-14 at 9.53.08 PM
Screenshot 2023-02-14 at 9.52.46 PM

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'}}

Shared with CloudApp

1 Like

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";

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:

split button style's background:

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.