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 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.

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 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 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. 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 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).
• Advanced—Choose 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.