Create and customize pages

1. In the Create a page dialog, type the Page name.

   Use a clear and meaningful name so you can easily identify the page as the list of pages grows. For example, the page name Account_Details_Page indicates that the data comes from the Account object and displays the account details.

   Note: Page names on Nintex Apps can contain letters, numbers, spaces, underscores, and dashes.

2. Select the Page type.

   The following options are available:

   Dependent

   Note: This option is available only after a principal page has been created.

   A dependent page is created from a principal page and inherits the Models, Components, and page layout. You can add page-specific content within the Page Region component. For more information, see Add a Page Region component.

   • To create a dependent page, select an existing principal page from the drop-down.

   Standalone

   An independent page that is not connected to any other page. You can create the page with your own Models, Components, images, and content. Changes made to a standalone page do not affect any other page.

   Principal

   Functions as a template for dependent pages. This can include two types of content:

   • Static components: Images, components, or content that display consistently across all dependent pages. You cannot edit them from dependent pages.

   • Page Region component: Defines the section of the page that you can edit on dependent pages. This enables page-specific customization.

   Changes made to a principal page propagate to all dependent pages. For more information, see Principal and dependent pages.

3. Select the Page layout.

   Note: This option appears only for Standalone and Principal page types.

   • Navigation: Adds a navigation area to guide users through the page or app.

     • Horizontal: Displays a navigation bar across the top of the page. This selection includes the Footer and Left sidebar grid divisions by default.

     • Vertical: Displays a navigation bar along the left side of the page. This selection includes the Footer grid division by default.

     • None: No navigation bar is added.

   • Grid division: Divides the page into structured sections. You can add components into the respective divisions to organize your content.

     • Header: Adds a header at the top.

     • Footer: Adds a footer at the bottom.

     • Left sidebar: Adds a sidebar on the left.

     • Right sidebar: Adds a sidebar on the right.

   • Preview: Displays a preview of the selected navigation and grid divisions. This allows you to see how the page structure appears before you create the page.

4. Click Create.

1. In the Import a page dialog, type the Page name.

   Use a clear and meaningful name so you can easily identify the page as the list of pages grows. For example, the page name Account_Details_Page indicates that the data comes from the Account object and displays the account details.

   Note: Page names on Nintex Apps can contain letters, numbers, spaces, underscores, and dashes.

2. Select one of the following options:

   • Import XML file: Allows you to import a Nintex Apps page saved as an XML file on your machine.

     1. Drag and drop the XML file or click Browse to select the XML file to import.

     2. Select the file from the list and click Open.

        Note: To remove the file, click Remove.

     3. Click Create.

     Note: 

     If the copied XML includes a model attached to a connection that is not present in the current site, Nintex Apps will invite you to reassign the invalid connection.

     For each invalid connection, Nintex Apps provides the current (invalid) connection, and allows you to select a possible replacement from a Replacement connection picklist. Select a connection that matches the intent and service of the original page as closely as possible.

   • Paste XML: Allows you to paste the XML from a working page into a new one.

     1. Copy XML from the source.

     2. Paste the copied XML into the field.

     3. Click Create.

     Note: 

     If the copied XML includes a model attached to a connection that is not present in the current site, Nintex Apps will invite you to reassign the invalid connection.

     For each invalid connection, Nintex Apps provides the current (invalid) connection, and allows you to select a possible replacement from a Replacement connection picklist. Select a connection that matches the intent and service of the original page as closely as possible.

You can edit a page using the following options:

• In the App Designer:
  • Select the page you want to edit in the list.
  • Click next to the page you want to edit and click Open.
• In the Apps screen, within the All pages tab:
  • Select the page you want to edit in the list.
  • Click next to the page you want to edit.
    • To edit the page in the same tab, click Edit.
    • To edit the page in a new tab, click Edit in new tab.
• In Preview mode, hover over the right-side tab to slide it out, then click Edit Page.

You can preview a page using the following options:

• In the App Designer, click next to the page you want to preview, and click Preview.
• In the Apps screen, within the All pages tab, click next to the page you want to preview, and click Preview.
• In the Page Designer, click Preview.
• Use the keyboard shortcut Ctrl+P, or ⌘ +P to preview the page. For more information, see Using the keyboard: shortcuts, hotkeys, and accessibility.

When you preview a page, the runtime version opens in a separate tab.

Revisions are saved versions of a page at various stages of development. You can use them to roll back a Nintex Apps page to an earlier version. For more information, see Page revisions.

Cloning a page creates an exact copy. Use it to:

• Experiment with new features or layouts. This allows you to test options in a clone without affecting live pages.

• Share complex pages within your organization.

• Troubleshoot issues. Clone the page, identify the problem, and apply the solution to the original.

Note:  You can clone any page, but if you move a cloned page to a different org, the models may not work.

1. Open the Clone page dialog: 
   • In the Page Designer, click .
   • In the App Designer, click next to the page you want to clone.
   • In the Apps screen, within the All pages tab, click next to the page you want to clone.
2. Click Clone.
3. Type the Name.
4. If you are cloning the page from the All pages tab on the Apps screen, select the app that you want the page to belong to.
5. Click Clone.

You can use this option to download the page’s source XML file. Use it to:

• Maintain backups for your page.
• Move pages between organizations.
• Create new pages.
  1. In the Page Designer, click .
  2. Click Download as XML file.

After the download completes, find the file in your Downloads folder.

1. In the Apps screen, within the All pages tab, click next to the page you want to move.
2. Click Move to another app.
3. Select the app that you want the page to belong to.
4. Click Move.

Note: In Nintex Apps, dependency mechanisms ensure that included pages cannot be deleted until all references to them within container pages are removed. For more information, see Page Include. To see where a page is included, go to Apps > All Pages.

1. Open the Delete page dialog: 
   • In the Page Designer, click .
   • In the App Designer, click next to the page you want to delete.
   • In the Apps screen, within the All pages tab, click next to the page you want to delete.
2. Click Delete.

• Page name: Name displayed at the top of the page.
  Note: 

  • Page names on Nintex Apps can contain letters, numbers, spaces, underscores, and dashes.

  • When a page is included in other pages through a Page Include component, its Page name property cannot be changed. This is to ensure page references aren't broken.

  • To rename an included page, you must remove any references to it in Page Include components.

• Page title: The content used in a browser's title bar or on a tab label.

  Note: 

  This feature has no effect if the page is:

  • A dependent page. For more information, see Principal and dependent pages.
  • Displayed within a Page Include.

• Design system: The design system used to style the page.

  To access more options, click .

  • View: Opens the page's design system in the Design System Studio (DSS).
  • Change: Changes the page's design system. Once a new design system is selected, click Confirm to complete the change.
  • Update styles: Updates the page's design system options to match the latest changes. This is useful when design system changes are made in another window or by another user.

• Page style variant: Page style variants are created and managed in the Design System Studio. Pages have predefined variants in DSS. Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Page style variant drop-down.

  Note: 

  • To update the list of available style variants, click .

  • Use this option when changes to the design system, such as new style variants or variable options, have been made in another browser window or by another user.

• Max unnamed revisions: Limits the number of unnamed revisions that are created each time a Nintex Apps page is saved. Once the limit is reached, the oldest unnamed revisions are deleted first. For more information, see Page revisions.

• Personalization mode: Determines where user personalizations, such as selected tabs and filter values are stored.

  • Client-side: Use for non-authenticated users, such as visitors to a public website, community members, and portal.

    Note: Even if server-side is chosen for the page, non-authenticated users are defaulted to client-side storage for personalizations.

  • Server-side: (Default) Allows Nintex Apps to sync user personalizations across multiple devices.

• Available as a principal page: To set the page as a principal page, turn on the toggle. For more information, see Principal and dependent pages.

• Warn users if page has unsaved changes: To display a warning when a user attempts to close the page with unsaved changes, turn on the toggle.

  • Yes (default)

  • No

• Show custom header and Show custom footer: To show a custom header or footer, turn on the toggle.

  Note: 

  Once a header or footer is added, you can:

  • Style it in the Background tab.
  • Add components.
  • Keep it visible while scrolling by turning on the Sticky toggle in the General tab.

  For more information, see Principal and dependent pages, which uses a custom header and footer in the principal page.

• ARIA role: Determines which type of user interface element the component represents for assistive technology. The available options all refer to standard landmark ARIA roles. For more technical information on each role type, refer to MDN web docs.

  • Banner: Use to define global site details, such as company name, global search, logos, and similar information.

  • Complementary: Use to add content that, while related to the main content area, is not necessary for that area to stand alone. Typically applied to sidebars and other supplementary information.

  • Content Info: Use to create footers that appear on each page, which typically contain copyright information, navigation items, or similar content.

  • Form: Use to identify sections that make up a single form, even if it contains multiple components.

  • Main: Use to identify primary focus of the page.

  • Navigation: Use to indicate a section containing links for navigating a site.

  • Region: Use as a more generic landmark in order to indicate an area is relevant, but not categorized under the other available roles.

  • Search: Use to indicate a section contains elements for searching the page or site.

Note:  This tab is available when the Available as a principal page toggle is turned on in the General tab.

• View dependent pages: Click to view the list of dependent pages. In the Dependent pages dialog that appears, you can:
  • Search for a dependent page within the list.

  • Access more page options.

    Click next to the dependent page you want to manage.

    • Edit Page: Allows you to edit the dependent page in the Page Designer.

    • Preview: Opens the page in a new browser window.

  For more information, see Principal and dependent pages.

Determines how the page background is displayed.

• Background source: Select a background source from the drop-down.

  For more information, see the Styles tab in Component properties.

Interactions trigger Action flows based on typical ways an end user may interact with a page element or component. You can configure Interactions on various elements. Options vary, but may include:

• Click

• Right-click

• Hotkeys: For more information, see Using the keyboard: shortcuts, hotkeys, and accessibility.

• Events: For more information, see Publish event.