Add and connect widgets

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 page templates and block templates, you can add widgets to the page from the Insert widget panel using drag-and-drop placement. The Widget Controller and Placeholder widgets 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.

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, background, border, and box shadow. You can also use the widget toolbars to remove or align widgets. The location of widget panels is remembered in the live app.

You can combine tools and widgets and connect them for additional interactivity. Help end users navigate your app by setting links to pages and section views. 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.

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