Pages and Navigation

Use the Pages drawer in Layout & Controls to organize your application without leaving the canvas. You can switch between pages, create or duplicate them, adjust their order, and open their settings in place.

Open and organize pages

1. Open the page control in the lower-left corner of Layout & Controls.
2. Select a page to display its actions. Choose Design page to edit its controls or Edit settings to configure the page. Clicking the selected page again also opens it.
3. Use Add New Page to create a blank page, or Duplicate to start from an existing page.
4. Drag a page's reorder handle to change the sequence. Review the order after moving pages because it affects the navigation bar and Back and Next navigation events.
5. Use the page actions to set the Home page or delete an eligible page. The current Home page does not offer all the same actions as other pages.

The Home page is the application's landing page. Before changing it or removing a page, check buttons and links that depend on the existing structure.

To add a designed screen or multi-page flow instead of starting blank, open Overview and select Design library. Its import review lets you place pages Before or After a reference page and optionally make the first imported page the Home page. See Build an Application with the Design Library.

Edit page settings in place

Select Edit settings from a page's actions. The editor includes Setup, Layout, Appearances, and Animation tabs with a page preview.

• Setup includes the page name, icon, description, page type, disabled-control labels, wizard tracking, and compact page style.
• Layout includes page width, horizontal and vertical padding, and desktop and mobile navigation.
• Appearances includes visual styles for navigation, wizard tracking, and loading feedback.
• Animation controls the transition into the selected page.

Changes save automatically. Use Done to leave the editor; it is not a separate save or publish step. Test page changes in Preview before publishing the application draft.

Page width and spacing

In Layout, choose Fluid to fill the available width, or Limited to center the page and cap its width on larger screens. Review Horizontal Page Padding and Vertical Page Padding alongside the compact-style setting below. Check both desktop and mobile previews rather than relying on one screen size.

Navigation Bar

In Edit settings → Layout → Navigation, configure Navigation Bar Orientation for desktop:

• None: Hide the navigation bar on the page.
• Top: Show navigation at the top.
• Left: Show navigation at the left side.
• Floating: Use floating navigation and choose its position: top left, top right, bottom left, or bottom right.

The menu lists pages that are visible to the end user. Review navigation for each page; use Apply to all only when you intend to apply that navigation choice across the application. Depending on the selected layout, additional navigation settings may be available.

You can use the navigation bar, Button controls with navigation events, or both to move users between pages.

Mobile Navigation Bar

Configure Mobile Navigation Bar Orientation separately in the same Layout tab. Use the mobile preview to review its effect.

• None: The navigation bar will be hidden.
• Top: The navigation bar will be shown on the top of the mobile page.
• Bottom: Show navigation along the bottom of the mobile page. Review any additional options offered for the selected layout and test the menu with your page names and icons.

Navigation appearance

Navigation orientation and appearance are separate choices. Use Layout to decide where navigation is placed, then Appearances to choose its visual treatment. A style change does not change the destination of a button or make a hidden page visible.

1. Open Edit settings → Appearances for the page.
2. Find Navigation appearance · Desktop and mobile.
3. Compare the themed style cards. Examples include Classic, Studio, Contour, Editorial, and Capsule.
4. Use the desktop and mobile previews to check the treatment with the selected navigation layout.
5. Use Apply for the current page, or Apply to all when you want that appearance across the application's pages.

The preview uses the application's theme. Compare the active page, other page names, and icons, especially when names are long or the mobile layout has less space.

This example is from the 26.10 release demonstration; your page content and selected theme may differ.

Loading screens

In Appearances, review both the loading-screen layout and its visual style:

• Splash Screen Type offers None, Mini, and Full screen.
• Loading appearance chooses the treatment used for loading feedback. Options include Classic, Dots, Ring, Bars, Pulse, and other themed styles.

Choosing a loading appearance is not the same as choosing a page transition. Loading feedback is shown while work is being prepared; a page transition describes how one page leaves and another enters.

Use the preview cards before applying a choice. Apply the setting to the current page, or use Apply to all deliberately for a consistent application-wide choice. Changing its visual treatment does not remove the time required to load or calculate the application.

Wizard Tracking

Enable Use Wizard Tracking in Setup for the pages participating in a guided, multi-step workflow. Review the available tracker appearance settings in Appearances along with the navigation and loading styles. Available controls depend on the page configuration; check the options offered for your selected layout.

Coordinate the tracker with the page order and the buttons that move users through the workflow. A visual tracker does not replace navigation events or validation rules. Check the current, completed, and upcoming stages in Preview, including what happens when a user goes back or encounters a validation error.

Check navigation and validation together

Allow Exit on Validation Errors is a behavior setting in Setup, not a tracker style. Review it according to the workflow's requirements. Do not change it merely to obtain a particular visual appearance. Test the complete journey with valid and invalid inputs before publishing.

Page transitions

Open Edit settings → Animation on the page that users will navigate to. The selected transition determines how the current page exits and then how this destination page enters.

The gallery offers Default · instant and 20 animated presets, including Fade, Rise, Slide left, Zoom in, Reveal from left, and Pop.

1. Hover over a style or focus it with the keyboard to preview both parts of the transition.
2. Compare the effect with the type of journey you are building. Retain Default · instant when animation is not useful.
3. Use Apply for the selected destination page, or Apply to all to use that transition throughout the application.
4. Preview navigation into the page from another page, rather than only looking at the page by itself.

This transition-gallery example is from the 26.10 release demonstration. Reduced-motion preferences are respected, so users may not see the same movement as the animated preview. Do not rely on an animation to communicate information that is absent from the page itself.

Apply, preview, and publish

Apply affects the setting on the current page. Apply to all applies the particular choice to the application's pages; it is not a command to copy every setting from the current page. Review the scope before using it in an application with intentionally different page designs.

Page settings save automatically. Done closes the editor and does not publish the application. This differs from the application-theme dialog, which has an explicit Save app theme action.

Before publishing the draft, use Preview app to check desktop and mobile navigation, page visibility, button destinations, wizard progress, validation, loading feedback, and transitions. Include pages that existed before the styling change and check reduced-motion behavior where relevant.

Show Disabled Controls As Labels

Enabling this feature will display all disabled controls as labels on this page.

Compact Page Style

Enabling this feature reduces the spacing between controls, resulting in a more compact page layout. This is particularly useful for applications that contain many controls on a single page.

Action Buttons

You can add any number of Button controls in Layout & Controls. Assign a Navigation event to a button, then configure the event from the button's settings in the Properties panel.

Here, you can select a Navigation Type property to redirect users to other pages. Options are,

• Back – Takes the user to the previous page in the page order defined in the Pages module. If there are no available pages to the end user, the button will not do anything other than calculate.
• Next – Takes the user to the next page in the page order defined in the Pages module. If there are no available pages to the end user, the button will not do anything other than calculate.
• Go To Page – This option creates a second property, Go To Page. You can select the specific page name from this input to direct the user to that page. If there are no available pages to the end user, the button will not do anything other than calculate.
• External – This option can be used to redirect the user to another website. Enabling Open in New Tab will open the external link on a new browser tab.
  • External Link Type – Determines whether the user will be redirected to a static URL or one generated dynamically by a workbook named range.
    • Static – You can manually enter the URL for redirect.
    • By Value Of – Allows selecting the URL target from a workbook Named Range.

Page Icons

Page icons are small images that are placed to the left of the page name on the Navigation Bar. The selected icon is also displayed on the Pages menu in the Designer interface.

You can add icons to pages from the Select Page Icon button. Simply select the icon you want to use, and press the OK button on the bottom of this menu. The selected icon will be displayed to the left of the page name when you review or publish your application. You can see the selected icon on the Select Page Icon area. To remove an icon, press Remove Page Icon.

Markdown Page

A Markdown Page is a content-focused page type that uses a Markdown editor with a live preview instead of the standard Layout & Controls workspace. Markdown Pages let you create rich, formatted content directly inside your application, such as documentation, onboarding instructions, landing pages, announcements, or internal user guides. Once published, a Markdown Page renders as a clean, responsive page that users can navigate to like any other page in the application.

Markdown Pages do not contain UI controls, calculations, or workbook-bound elements. They are intended for static content that supports the rest of your application.

Creating a Markdown Page

To add a Markdown Page, create a page from the Pages drawer, then open Edit settings → Setup. Under Page Type, select Markdown Page. Standard pages built in Layout & Controls remain the default. A Markdown Page uses the Markdown editor instead of the standard control canvas.

You can mix Standard and Markdown pages freely in the same application. Both page types appear in the Pages menu and the Navigation Bar, and both respect page order, page icons, and visibility rules.

Markdown Editor

The Markdown editor provides a split view with the Markdown source on one side and a live preview of the rendered page on the other. Changes are reflected in the preview as you type. The editor supports standard Markdown syntax for headings, lists, tables, blockquotes, code blocks, links, and emphasis, along with several SpreadsheetWeb-specific authoring features.

Icons

You can insert icons directly into Markdown content from the editor toolbar. Two icon types are supported:

• Regular Icons: A single icon inserted inline with your content. Useful for navigation menus, callouts, feature lists, and inline labels.
• Stacked Icons: Two icons layered together to form a single composite icon. Useful for status indicators, badges, and richer visual cues.

Once inserted, icons render in the live preview and in the published page.

Internal Page Links

You can link from one Markdown Page to any other page in the same application, including Standard pages. Use the Insert Internal Page Link option in the editor toolbar and select the target page from the dropdown. This makes it possible to build structured multi-page experiences such as help centers, onboarding flows, or documentation hubs without managing external URLs.

Internal links update automatically if the target page is renamed within the application.

Images and Carousels

You can upload images and insert image carousels into a Markdown Page from the editor toolbar. Uploaded images and carousel images are automatically persisted into the editor content, so image references are preserved without additional manual handling.

Setting a Markdown Page as the Home Page

A Markdown Page can be configured as the Home page using its page actions in the Pages drawer. This is useful when you want users to land on a content-rich introduction or instructions screen rather than a form or calculator. The Markdown Home page will be the first page users see when they open the application, and they can navigate to other pages from the navigation bar or action buttons as usual.

Markdown Pages do not support UI Controls, Events, or workbook-bound calculations, so use a Standard page when any of those are needed. They do, however, respect the Navigation Bar settings, Page Icons, and page visibility rules in the same way as Standard pages. The Compact Page Style and Show Disabled Controls As Labels options are not applicable to Markdown Pages.