Changing color on click of box widget


I am using two boxes as tabs in my page. I want to add color on click of any of the two boxes and on clicking the other box the color should disappear. How can I achieve this. The tabs are Global and Workspace. I have already added color to global but I want to add color to workspace box on click and want the color to disappear if I switch the tab to global again. It is a bit urgent so would appreciate a quick response.

watermarking design.rp (1.1 MB)

Try this:
watermarking design.rp (1.1 MB)

The best way to accomplish this is to create a “selection group” so that only one of the tabs can be selected at any time. Then you just style the “unselected” and “selected” states and add an action for “select This” when clicked.

Your tabs were using Text Field widgets, set to “Read Only” (and no code assigned to the OnTextChange event) so they are basically just rectangle widgets (which is appropriate for tab objects which shouldn’t be user-editable. The difference is that Text Field widgets have very limited styling and cannot have different styles for “mouse down” “selected” etc.–indeed they cannot be set to “selected” so cannot change their style when clicked or selected.

So, I changed your Text Field widgets to Rectangle widgets and styled them similarly to your Text Fields (I added some details to better match the rest of the objects on the page, like rounded corners–you can inspect and change the styling as you need.) To help this, I created two new widget styles, “Tab” and “Tab-Selected” --The basic style of “Tab” defines the visual look and feel, and “Tab Selected” only changes the background fill and line color (line color not necessary but helps it look raised a little bit when selected; This is easily changed by editing the style and unchecking the “Line Color” checkbox for the “Tab Selected” style.)

So, the Global and Workspace tabs have a default style of “Tab” (white background) and they are both part of the Selection Group named “tabs” with the MouseDown and Selected states defined as “Tab Selected”:

The Global tab is set to “Selected” by default so when the page loads, it will show as selected (but this won’t show up in the editor.) Then I added two actions to each tab:

(Note: “Set selected to This to true” automatically de-selects any widget in the “tabs” group. “Bring This to front” is only needed to properly show the line color change.)