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 lower 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 closes 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.
- Widget panel arrangement—Choose where widget panels appear:
- Floating—Widget panels appear floating next to the controller, anchored to each widget's icon.
- Fixed—Fix the widget panels to appear in one of the four corners of the canvas. You can set the panel width and height in pixels (px) or percent of the canvas (%). You can also set offsets for the x- and y-axes, and add an animation for when the panels appear.
Note:
The Widget panel arrangement setting only applies when the widget is viewed on large or medium sized screens. On small screen devices, widget panels appear at the bottom of the app. Learn more about refining layouts for all devices.
- 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, Selected, 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.
- Selected—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.