A Window is complementary to the app’s layout. 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 a page, a window only has Body content. When you add widgets to a window, they’re listed in the Window tab’s Outline view. Windows are grouped by fixed and anchored windows. You can point to a window in the panel and click Set as splash if the window isn’t already connected to open with a page. To change the name or remove a window, click the window’s more options button and choose Rename or Delete.
Use the following options for managing the windows in your app:
- Splash windows that open with the web experience can be set in the Window panel. Point to 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 will 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.
Windows include the following configuration settings:
- Fixed—Appears in a fixed position.
- Anchored—Appears next to the linked widget
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 center. You can click the lock icon to keep the aspect ratio between width and height. But if it is a Fixed window positioned top/bottom, you can only specify values for height (width is auto-set based on page width). Likewise, if it is a Fixed window positioned left/right, you can only specify width values.
Click outside—Provide a way to close a window by clicking anywhere outside it.
Confirmation—Require the end user to check the checkbox to close the window. This constraint applies to Click outside. Only Fixed window has this option.
- Confirmation text—Provide the text to appear next to the checkbox and change the font size (in pixels or rem).
- Button text—Provide the text to appear on the button 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 you can 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 very practical for these conditions, so you can set link to the current page to go back to the page that activates the window.
Animation—Add animation for the window and for its contained widget.
Mask color—Choose a color for the mask that fills the space around the window. Only Fixed window has this option.
Background—Set the window’s background by choosing a fill color or image.
Border—Set the window’s border by choosing its color, style, and width. You can change the radius size to shape the window corners.
Box shadow—Add a shadow effect around the window.
The configurable windows have the following predefined templates:
- 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 end 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 icon 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.