Add functional and layout widgets to the apps you create with Experience Builder. You can accept default styles or customize the appearance and connect widgets to data, links, and other widgets for a unique web experience.
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 are grouped into basic and layout categories. Basic widgets are functional widgets that can perform as app tools and layout widgets are the containers for organizing widgets on the page.
As you add and nest widgets, refer to each page's interactive outline view, 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 highlights 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. Use standard copy/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. 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 will snap together across all screen resolutions.
The Pending tab on the Insert widget panel is useful when you need to design your app for multiple screen sizes. For instance, there might 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 could remove the map widget from the small screen size design and add it to the pending list.
Connecting 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 in 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 end users navigate 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 that allows you to direct end users to another page, window, or section view in your app or to another web address. In 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:
Settings
When setting a link, you can choose from the following options:
- Page—Link that directs to a different page in your app.
- View—Link that directs to a specific view in a Section widget.
- Window—Link that opens a specific window in your app.
- URL—Link that directs to a web address (type a URL that begins with https://).
- Block—Link that scrolls to a specific block on the same scrolling page in your app. (Not available for the Text widget.)
- Page top—Link that scrolls to the top of the page. (Not available for the Text widget.)
You can also decide where the linked content should open:
- App window—Linked content opens in the current browser window that your app uses.
- Top window—Linked content breaks outside of all the frames it’s nested in and opens on top of other opened windows.
- New window—Linked content opens in a new browser window, keeping the app open in another window.