Embedding Toggle Sections within Sliders

How to: include toggle fields within sliders.

The Smart Grid “grid” UI doesn’t allow you to nest collapsible rows within a slider. When you’ve made a grid collapsible and selected the “slider” option the elements within that grid will not display the “collapsible row” option. Don’t despair. You are able to embed toggles within sliders, and the solution is simple.

Smart Grid allows you to nest forms. This is a really powerful feature. You can make a library of form components then re-use those components within any other form. I add a Form Type called “component” and use it to label the forms that I want to be able to embed in other forms.

In this case, I want to include a form component called “optional message.” It is a collapsible row with the toggle set to true. It contains a textarea input. To do so, make a new form. Give it a title “Optional Message”. Select the “component” form label. Create a collapsible row and place a textarea field within it. Save the form then return to the larger form.

In the large form add a new element within the slider you want the toggle section to appear in. Access the new element’s settings via the edit icon at the top-left and select “embed form”. Choose the item named “Optional Message” and update the form.

If you view your form in the front end you’ll see that you have a fully functional toggle field within your slider.