Example: Toggling Visibility

Custom scripts can be used for many different use cases; an example is toggling the visibility of components on a screen. Let's have a look at an example of how to do that:

1. First, we create a screen; let's call it "ToggleScreen."
2. Now, we add the button that we will use to toggle the visibility.
3. We add a component to toggle, e.g., a rectangle. Let's call it "ToggleCntr."
4. And now we add the Script component and connect it to the button.

Our setup now looks like this:

Now let's edit the script and add the following code:

let toggleScreen = qux.getScreen('ToggleScreen')

let widget = toggleScreen.getWidget('ToggleCntr')

widget.toggle()

The script uses the qux API object.

1. In the first line, it will get the screen by its name.
2. In the second line, we get the "ToggleCntr"
3. In the last line, we will toggle() its visibility.

You can also use the hide() and show() methods to set the visiblity depending on a value!

If you want to hide several elements, you need to group them and use the getGroup() method.

let toggleScreen = qux.getScreen('ToggleScreen')

let group = toggleScreen.getGroup('ToggleGroup')

group.toggle()