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 on the Window tab’s Outline section and the quick navigation menu (at the bottom of the builder window). 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. 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), 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 for managing the windows in your 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 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.
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. But 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). Likewise, 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's position, size, and layout. Icons in the position and size settings indicate which screen size (large, medium, and small) the configuration applies to.
- Close options
- Click outside to close Window—Provide a way to close a window by clicking anywhere outside it.
- Interaction (fixed mode only)
- 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.
- "Do not show 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 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 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.
- 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 windows have this option.
- Background—Set the window’s background by choosing a fill color or image. You can use the Quick style button to select from preset designs that coordinate with your app's theme.
- Border—Set the window’s border by choosing its color, style, and width. You can change the radius size to shape the window corners. You can use the Quick style button to select from preset designs that coordinate with your app's theme.
- Box shadow—Add a shadow effect around the window. You can 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
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 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.
- Tooltip is a template for anchored windows that provide more information about the linked widget, such as a button or image.
- 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.
- Steps is a template designed to show or introduce information over multiple views.