Discuss

Using the Toggle Component

On this page

Intro

The тoggle component is a simple, but quite handy component. It can be used to toggle visibility, styling, classes of the elements on your pages. In this tutorial we will show you a couple of examples - toggling visibility and toggling a class.

Toggle Component Overview

As all the App Connect components, the toggle component should be added in the App Structure, before you can use it. Right click App:

Screenshot_1|690x431

Then select Data > Toggle:

Screenshot_2|690x431

The toggle component has been added to your page:

Screenshot_3|690x431

The way the toggle component works is quite simple. It has two states - checked and not checked` Its state can be changed using the dynamic events.

The properties of the toggle component are also quite simple. Its default state is unchecked, but you can also change it to checked in the properties:

Screenshot_4|690x431

Toggling Visibility

You can easily toggle the visibility of any element using the toggle component. We'd like to toggle the visibility of a div block on our page, when clicking the button:

Screenshot_5|690x431

So select the element and add new dynamic attribute:

Screenshot_6|690x431

Select Display > Show:

Screenshot_7|690x431

Click the dynamic data picker to select when to show the element:

Screenshot_8|690x431

And select Toggle > Checked

Screenshot_9|690x431

Now, let's setup the button. Select the button or the element you want to use to control the toggle with:

Screenshot_10|690x431

Add new dynamic event:

Screenshot_11|690x431

And select Mouse > Click:

Screenshot_12|690x431

Then click the dynamic event picker icon to select the action for this event:

Screenshot_13|690x431

Select the toggle action, under the Toggle Component:

Screenshot_14|690x431

This will toggle the component state from checked to not checked and vice versa. Click Select:

Screenshot_15|690x431

Save your page and preview the results. You can see that clicking the button toggles the visibility of the div:

toggle-visibility|690x418

Toggling CSS Classes

You can use the toggle component, to toggle CSS classes for the elements on the page. We want to change the class of a div block on our page, when the button is clicked:

Screenshot_18|690x431

Select the div and add new dynamic attribute:

Screenshot_19|690x431

Select Styling > Class toggle:

Screenshot_20|690x431

And enter the name of the class you want to toggle. We enter one of the standard Bootstrap classes bg-warning, which will make the background color yellow:

Screenshot_21|690x431

Then click the dynamic data picker, to select when to apply this class:

Screenshot_22|690x431

And select Toggle > Checked. So the class will be applied when the toggle component state is checked:

Screenshot_23|690x431

Now, let's setup the button. Select the button or the element you want to use to control the toggle with:

Screenshot_24|690x431

Add new dynamic event:

Screenshot_25|690x431

And select Mouse > Click:

Screenshot_26|690x431

Then click the dynamic event picker icon to select the action for this event:

Screenshot_27|690x431

Select the toggle action, under the Toggle Component:

Screenshot_28|690x431

This will toggle the component state from checked to not checked and vice versa. Click Select:

Screenshot_29|690x431

Save your page and preview the results. You can see the bg-yellow class is being toggled on button click:

toggle-class|690x418