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, you can rely on each page's interactive outline view, which shows the widget hierarchy for the page and helps you organize, select, and configure nested widgets. 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. When you duplicate or copy a widget, all its settings are preserved except for the position on the page.
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 an action trigger that allows communication between widgets—action in one widget triggers action in another widget. For example, click a map feature to update the feature details shown in a Feature Info widget. You can combine tools and widgets and connect them for additional interactivity. Help end users navigate your app by setting links to 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. 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 you app.
- Web address—Link that directs to a web address; you specify a URL.
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.