Windows are panels that you can set to open when the app or a page loads, or when the user clicks a widget. Windows are appropriate for adding splash screens, confirmation messages, tutorials, and alerts to your web experiences.
To add windows to a web experience, go to the Page panel, click the Window tab, click the Add window button, and select a template. Unlike pages, windows only have body content. When you add widgets to a window, they are listed in the Outline section of the Window tab and on the quick navigation menu at the bottom of the builder window.
Windows are grouped into two categories, fixed and anchored. You can point to a window in the panel and click Set as splash if the window is not connected to open with a page. To change a window's name, duplicate it, or remove it, click the window’s More button and choose Rename, Duplicate, or Delete. When you add a new window, its label follows a continued numbering rule. For example, duplicating Window 1 produces Window 2, or Window 3 if Window 2 already exists. For fixed windows (except splash windows), the window's name is also used in the experience's URL. (If you change the name of a window after publishing, previously used URLs will still work.)
Use the following options to manage the windows in an app:
- Splash windows that open with the web experience can be set in the Window panel. Point to a window under Fixed windows (excluding those connected to open with a page) and click the Set as splash button. A web experience can have one splash window.
- For a window to open with a page, go to the Page settings and choose a fixed window from the Open with window menu. Windows set as splash do not appear in the options. Once a window is set to be opened with a page, the Opens with page icon appears next to it in the Window panel. Point to the icon for a tooltip with the name of the connected page. Page windows only appear once in the web experience unless the user refreshes the browser.
- Configure Set link to open a window using a widget setting. In a widget’s Set link window, for Link, choose Window, and select an anchored or fixed window (except splash). Windows triggered by widgets appear each time a user clicks the widget.
Settings
Windows include the following configuration settings:
- Mode
- Fixed—Appears in a fixed position.
- Anchored—Appears next to the linked widget.
Note:
You can change a window mode in its settings; however, because of the different activation mechanisms for fixed windows that are set as splash or connected to open with a page, you cannot change them to anchored mode (and vice versa).
- Position & Size
- Position—Fixed windows have five positions to display: center, left, top, right, and bottom. (Anchored windows appear next to the associated widget and the position is set automatically.)
- Size—You can specify values for width and height of an anchored window or a fixed window if it is positioned in the center. You can click the Aspect ratio button to keep the aspect ratio between width and height. If it is a fixed window positioned at the top or bottom, you can only specify values for height (width is automatically set based on page width). If it is a fixed window positioned at the left or right, you can only specify width values. You can also drag the edge in the canvas to resize the window.
Note:
When the window uses a custom layout for medium- or small-screen devices, you can customize the window position, size, and layout. Icons in the position and size settings indicate the screen size (large, medium, and small) that the configuration applies to.
- Block page—Prevent the user from clicking or otherwise interacting with other parts of the app while the window is active. This setting is only available for fixed windows.
- Mask color—Choose a color for the mask that fills the space around the window.
- Close options
- Click outside to close Window—Allow users to close a window by clicking anywhere outside it.
Note:
If you turn off Block page for a fixed window, this setting is unavailable.
- Interaction (fixed mode only)—Add an interaction to the bottom of the window.
- Style—Choose a layout for the check box and button.
- Type—Choose an interaction type for the window.
- Confirmation—Require end users to check the check box to close the window. This constraint applies to all close methods. This interaction type shows the window once by default, unless you turn on Always show this window.
- "Don't show this again" option—End users check this box in the window to prevent it from opening again. They can close the window with or without checking this box.
Tip:
To display the window again after the box has been checked, save the experience again and preview it, or republish the experience and view the published item.
- Checkbox text—Provide the text to appear next to the check box and change the font size (in pixels or rem).
- Button text—Provide the text to appear on the button (if applicable) and change the font size (in pixels or rem).
- You can also add a button widget in the window to close it. Use Set link in the button settings, and link the button to a page to close it. If you need to set several pages to open with one window, or buttons on different pages link to one window, linking to one specific page is not practical for these conditions, so you can set the link to the current page to go back to the page that activates the window.
Note:
Although you can set buttons on a window to link to another window in the app, it's not a recommended configuration.
- Click outside to close Window—Allow users to close a window by clicking anywhere outside it.
- Animation—Add animation for the window and for its contained widget.
- Background—Choose a fill color or image for the window background. Use the Quick style button to select from preset designs that coordinate with the app's theme.
- Border—Choose the color, style, and width for the window border. You can change the radius size to shape the window corners. Use the Quick style button to select from preset designs that coordinate with the app's theme.
- Box shadow—Add a shadow effect around the window. Use the Quick style button to select from preset designs, or use the following settings:
- Offset X—Set the horizontal distance of the shadow. A negative value places the shadow to the left of the window; a positive value places it to the right.
- Offset Y—Set the vertical distance of the shadow. A negative value places the shadow above the window; a positive value places it below.
- Blur radius—Apply a blur effect to the shadow.
- Spread radius—Adjust the size of the shadow.
- Color—Select a color.
Templates
Experience Builder offers the following window templates:
- Fixed blocker templates are appropriate if you want to block interaction with the rest of the app until the user closes the window.
- Blank window is an empty template.
- Confirm is a template preset with a close confirmation and is designed for content that needs verification or acceptance to continue.
- Alert is a template that allows users to accept or reject a message.
- Simple and Vogue templates are two different layouts designed to show or introduce information.
- Novel provides a layout with a close button outside of the core content.
- Sidebar is a template positioned on the right by default and is designed to display lengthy text to scroll vertically.
- Carousel is a template for a larger window to display multiple images and content in a cyclic view.
- Particulars is a template for a larger window that provides more information using a chart, table, list, images, and buttons, as well as social sharing options.
- Fixed passthrough templates are appropriate if you want users to interact with a window in parallel with other parts of the application.
- Footnote appears at the bottom of the app layout with a float-in animation.
- Item info appears at the right of the app layout with a fly-in animation.
- Anchored templates are appropriate if you want to link a window to a widget.
- Tooltip is appropriate for providing more information about the linked widget, which can be a Button or Image widget.
- Steps is designed to show or introduce information over multiple views.
URL parameters
The following is a list of URL parameters you can use to control the behavior of windows.
Open a window
To direct to a specific active window, use dlg followed by a window ID or label.https://experience.arcgis.com/experience/<AppId>/?dlg=Window-1
Control window focus
To embed an Experience Builder app with splash windows or page windows without the app automatically moving to those windows, use the disable_window_focus parameter to control that behavior. Add the following URL to the host web page to prevent the movement behavior. By default, disable_window_focus is false.https://experience.arcgis.com/experience/<AppId>/?disable_window_focus=true
To control window focus for a specific window, use dlg followed by a window ID or label and the disable_window_focus parameter, as in the following example:https://experience.arcgis.com/experience/<AppId>/?dlg=Window-1&disable_window_focus=true