Insert widgets

Widgets are the building blocks of your apps. If you don't use the widgets in the various available templates for pages, windows, screen groups, and blocks, you can add widgets from the Insert widget panel using drag-and-drop placement. The Widget Controller and Placeholder widgets and scrolling panels in a screen group also have an Add widget button. Widgets can perform as app tools or act as containers for organizing the page and are grouped into six categories:

• Map-centric widgets are app tools that connect to a Map widget.
• Data-centric widgets are app tools that interact with data sources.
• Page element widgets are for adding images, text, and other media.
• Menu and toolbar widgets provide options that can help users use and share your app.
• Layout widgets are the containers that help organize widgets on the page.
• Section widgets showcase dynamic content in multiple views and allow users to switch between views.

As you add and nest widgets, refer to each page's interactive outline, which shows the widget hierarchy for the page and helps you organize, select, and configure nested widgets. When you hover over a widget in the outline, the corresponding widget is highlighted on the canvas. In the outline, click a widget and click the More button for a menu of widget operations such as rename, duplicate, delete, lock position and size, pin, arrange, and align. For widgets containing other widgets, click Expand all or Collapse all to show or hide the underlying hierarchy.

Use standard copy and paste keyboard shortcuts (Ctrl+C and Ctrl+V for Windows; Cmd+C and Cmd+V for Mac) to copy widgets across pages. Duplicating or copying a widget preserves all its settings except for the position on the page and the label. New widget labels follow a continued numbering rule. For example, duplicating Image 1 produces Image 2 or Image 3 if Image 2 already exists. Dragging widgets on the canvas to move and resize them displays snap lines or distance values that help you align and precisely position widgets in a fixed layout. When snap lines appear, the corresponding widgets snap together across all screen resolutions.

The Pending tab in the Insert widget panel is useful when you need to design your app for multiple screen sizes. For instance, there may be a design requirement where the map widget is implemented on large and medium screen sizes but not on small screen sizes. In this case, you can remove the map widget from the small screen size design and add it to the pending list.

Connect widgets

The widget configuration panel includes Content, Style, and Action settings. Content defines the behavior, data connections, and other settings for the widget. Widgets are aligned and styled on the Style tab with settings including size, position, animation, background, border, and box shadow. The location of widget panels is remembered in the live app. You can also use the widget toolbars to align, remove, or duplicate widgets.

Some widgets support adding actions that allow communication between widgets. For example, action in one widget triggers action in another widget, such as clicking a map feature to update the feature details shown in a Feature Info widget. You can add message actions for automatic interaction or data actions for end users to access at runtime from an Actions menu. Combine tools and widgets and connect them for additional interactivity. Help users browse your app by setting links to other content such as pages, windows, and section views.

Set links

You can add a hyperlink to your content  by using the Set link option, which allows you to direct users to another page, window, or section view in your app; to a print preview; or to another web address. On scrolling pages, you can set links on widgets to scroll to a particular block on the page or return to the top of the page. The following widgets support setting a link:

• Button widget
• Card widget
• Image widget
• Text widget