The Widget Controller widget is a container that you can use to organize other widgets into a toolbar. You can orient the widgets in the controller horizontally or vertically. You can 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 organize widgets in a toolbar-like controller.
- You want to add widgets to a full-screen map without having them take up much space.
- You want users to be able to open one or multiple widgets at a time to interact with a map.
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 in the controller to open its settings panel. Drag the lower corner of the widget panel to define its initial size.
When you click a widget in the controller to open its widget panel at run time, an indicator line appears under the widget's icon to communicate that the widget is active. You can use the Expand and Collapse buttons to change the amount of space that panels take up without fully closing them.
Click the Manage widgets button to view a list of all the widgets in the controller. You can reorder widgets, remove them, or place them in a group.
Groups
You can create a group in the controller by dragging a widget on top of another widget in the Manage widgets panel. Groups are simply Accordion widgets. They are useful because they allow you to place multiple widgets in one panel in the controller. A group has all the same settings as an Accordion widget, the only difference is that it is named a Group in the page outline. When you click a group in the controller, widgets in the group appear in a vertically stacked menu with expand and collapse buttons.
Off-panel widgets
Certain widgets have arrangement styles that are inappropriate for the controller panels or do not fit. For optimal display, when you click their controller icons these widgets appear like they normally would outside of the controller. In general, widgets with toolbar arrangement styles appear off panel when you add them to the controller and choose that arrangement style.
Some example of widgets that appear off panel are the 3D Toolbox widget, Draw widget, My Location widget, Share widget, Swipe widget, and Timeline widget.
Settings
The Widget Controller widget includes the following settings:
- Direction—Display the widgets in the controller either vertically or horizontally.
- Alignment—Choose how to align the widgets. You will only notice a difference between these options if the width or height of the controller is greater than the total length of the widgets.
- If you display the widgets horizontally, you can align them to the center, left, or right of the controller.
- If you display the widget vertically, you can align them to the center, top, or bottom of the controller.
- Behavior—Define the number of widgets that can be opened from the 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 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.
- Display type—This setting appears if you choose Multiple. Choose to have widget panels appear either stacked on top of each other or next to each other.
- Widget panel arrangement—This setting appears if you choose Single. 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 at one of nine anchor points on 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.
- You can also set the panel width and height to Stretch. If you do, the panel stretches to fill the area of the canvas within the Top, Bottom, Left, and Right margins, which you can define in pixels (px) or percent of the canvas (%).
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.
- 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 names of the widgets as labels under the icons. You can change these labels by editing the widget name in the settings panels or in the builder outline.
- Indicator—Include indicator lines that communicate which widgets are active.
- Tooltip—Include hover text for the buttons.
- Size—Change the size of the widget icons.
- Spacing—Specify the space between widget icons in pixels (px).
- Overflown style—If there are too many widgets to fit in the length of the controller, you have two options for how to display the extra widgets:
- Arrows—Add arrows for navigating through all the widgets in the controller.
- Popup window—Add an icon labeled More widgets to the end of the controller. When the user clicks this icon, a window appears listing the remaining widgets.
- Advanced—Choose how the buttons on the controller appear for the three states: Default, Selected, and Hover. If you turn on labels, you can change the font color and format the text in bold, italic, strikethrough, or underline. Under Icon style, you can change the icon color and background color. Under Shadow, you can add shadows to the icons by setting x- and y-offsets, blur radius, spread radius, and a shadow color.
- 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.
Interaction options
You can use a Button widget to open widgets in the controller.
To do this, add a Button widget and Widget Controller widget to your app. On the Action tab of the Button widget's settings, click Add a trigger, and select the Button click trigger. Select the Widget Controller widget as the target, select the Open widget action, and choose widgets in the controller from the drop-down menu under Action settings.
You can also open widgets in the controller with any widget that supports the Record selection changes trigger. For example, you can configure a Table widget in the controller to open every time you make a new selection with a Map widget.
To do this, add the Record selection changes trigger in the Map widget's settings. Select the Widget Controller widget as the target, select the Open widget action, and choose the Table widget from the drop-down menu under Open widget. You are prompted to set trigger data, which is the data that triggers the message action. You can choose from the following options:
- All data— Open the widget when the user selects features from any of the data sources connected to the source widget.
- Custom—Use specific layers as the trigger data. Custom trigger data is useful if you only want a specific data source to trigger the message action. For example, if you want a Chart widget to only open when the user selects a city on a map, you can select the cities layer as the trigger data.
You can also choose which widgets to open with the Open widget message action.