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 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, 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:
Settings
When setting a link, you can choose from the following options:
- Page—Link directs to a different page in your app.
- View—Link directs to a specific view in a Section widget.
- Window—Link opens a specific window in your app.
- URL*—Link directs to a web address (type a URL that begins with
https).:// - Block—Link scrolls to a specific block on the same scrolling page in your app. (Not available for the Text widget.)
- Page top—Link scrolls to the top of the page. (Not available for the Text widget.)
- Print preview—Link directs to a print preview.
- Cookie Banner—Link directs to the cookie banner.
*You can also use the URL option to link to an email address, phone number, and more. (For example, type mailto ). Currently, Set link supports the following URI schemes:
| Scheme | Purpose | Usage notes | Format | Examples |
|---|---|---|---|---|
https | Web addresses | https | https | |
mailto | Email addresses | Headers are optional but often include subject= . Prefill the body of a message using body= . | mailto mailto | mailto mailto |
tel | Telephone numbers | tel | tel | |
sms | SMS text messages | There are small formatting differences when using the sms scheme for Android versus iOS devices. | Android— sms iOS—sms | sms sms sms |
ftp | FTP resources | Use generic syntax for FTP resources. | ftp | ftp |
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.