The Widget Controller widget is a container you can use to organize other widgets as buttons, managing their life cycle and display. You can change the direction of the widgets in the controller, either horizontal or vertical. You can also control the number of widgets that can be opened and how the widget buttons display.
Example
Use this widget to support app design requirements such as the following:
- You want to create a full-screen, mapcentric app with widgets organized in a toolbar-like controller where users can open one or more widgets to interact with the map when needed.
Usage notes
To add widgets to the controller, click the Add widget button and select from a widget gallery or drag a widget from the Insert widget panel onto the controller. Configure the added widgets by clicking the widget on the controller to open its settings panel. Drag the bottom corner of the widget panel to define its initial size.
Settings
The Widget Controller widget includes the following settings:
- Direction—Display the controller in a vertical or horizontal direction.
- Behavior—Define the number of widgets that can be opened from this controller and which widgets open automatically when the page is loaded.
- Single—Only one widget can be opened at a time. Opening one widget will close another.
- Multiple—Multiple widgets can be opened and run at the same time. In this case, you can choose to show open widgets stacked or side by side.
Tip:
To experiment with these options, click Live view on the builder toolbar.
- Enable one or more widgets to be opened automatically when the page is loaded by selecting from the widgets list.
- Appearance—Select the widgets in the Widget Controller, and customize their icons, labels, or style.
- Icon—Use a circle or rectangle for the widget icons.
- Label—Show the name of the widget as a label under the icon. This text matches the default name; edit the widget name in the configuration panel so it’s meaningful to end users.
- Tooltip—Turn off hover text for the buttons if you opt to use labels instead.
- Size—Change the size of the widget icon.
- Spacing—Specify the space between widget icons.
- Advanced—Configure how the buttons on the controller appear for the three states: Default, Active, and Hover. You can change the icon background color, and if you turn on labels, you can change the font color and format the text in bold, italic, strikethrough, or underline.
- Default—The default state for a button without user interaction.
- Active—The state for a button that the user selects on the controller or for an opened widget.
- Hover—The state for a button that the user points to on the controller.
Note:
Your selected theme affects the color choices in the configuration options. Click More to choose a custom color if you want to use a color that’s not part of the app’s theme.