Create and customize Nintex Apps pages

Starting with a blank page means that the page will have no associated models and no pre-loaded components. You can open the page and start building!

Create a Nintex Apps page as a dependent page from a principal page. Principal pages function like templates for their dependent pages, allowing builders to brand all connected pages with specific colors, images, and content. principal pages can contain two types of content:

• Components, images, and other content that displays consistently in all dependent pages built from the principal page. This content cannot be modified from the dependent pages.
• A Page Region component. This component identifies the portion of the page that can be modified from the dependent page, allowing the builder to add page-specific content.

When you create an app page from a principal page, the new page—called a "dependent page"—inherits the models and components that are on the principal. You can then add page-specific models and components directly onto the dependent page.

Note:  You must have a previously-created principal page available to select this option.

1. Select the principal page from the drop-down list or start typing the name of the principal page into the entry field and then select it.
2. Click Create to open the Page Designer or click Save and next.

Want to see the list of dependent pages associated with a particular principal page? Open the principal page and click add-user dependent pages. Nintex Apps opens a pop-up window listing of all dependent pages. You can also create a dependent page from this popup by clicking add Create New dependent page.

See an example of creating principal and dependent pages.

This option allows you to paste the XML from a working page into a new one.

1. Copy XML from the desired source.

2. In the Create new page modal, select Create from XML.

3. Select Paste XML.

4. Paste the copied XML into the field.

5. Click Create to open the Page Designer or click Save and next.

   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 invalid connections.

   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's as closely as possible.

You can also click Find Sample Pages to search through samples available in Nintex Apps's Sample Pages GitHub repository. Follow the instructions at that site to open the desired page, copy its XML, and then paste the XML into the entry field.

If you have a Nintex Apps page saved as an XML file on your machine—perhaps to share with other builders or downloaded from elsewhere—this option allows you to search for that saved XML file and import it.

1. In the Create new page modal, select Create from XML.

2. Select Import XML file, and then click Browse to search for the saved XML file.

3. Select the file from the list, and click Open.

4. Click Create to open the Page Designer or click Save and next.

   Note: 

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

   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's as closely as possible.

There are several ways to open a page for editing:

• In the app's detail screen, within the Pages tab, click the vertical dots on the desired page. Select Edit from the menu.
• In the App screen, within the All pages tab, click the vertical dots on the desired page. Select Edit from the menu.
• When a page is open in Preview, click the edit-page Edit Page tab that slides out from the left side.

There are several ways to see how a page looks to an end user. When you preview a page, a runtime version of the page opens in a separate tab.

• In the app's detail screen, within the Pages tab, click the vertical dots on the desired page. Select Preview from the menu.
• In the App screen, within the All pages tab, click the vertical dots on the desired page. Select Preview from the menu.
• In the Page Designer, click Preview.
• Use the keyboard shortcut Ctrl+P, or ⌘ +P to preview the page.

Revisions are like "snapshots" of the page, taken at different points in its development. They can be used to roll back an app page to a previous point in the development process. For more information, see Page Revisions.

Cloning a page makes an exact copy of the page. This can be handy when:

• Experimenting with new features or layouts—try the options out in a clone without affecting live pages.
• Sharing complex pages within an organization.
• Troubleshooting (clone the page, find the problem, and then apply the solution to the original page.)

Note:  Any page can be cloned, but if a cloned page is moved to a different org, the models may not work.

1. Open the Clone page popup: 
   • In the Page Designer, click the vertical dots.
   • In the app's detail screen, within the Pages tab, click the vertical dots on the desired page.
   • In the App screen, within the All pages tab, click the vertical dots on the desired page.
2. Select Clone.
3. Give the new clone a 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 part of. This feature enables you to more easily reuse a page across apps. For more information, see Apps.
5. Click Clone.

This option downloads a page's source XML as a file. Having a page XML file is useful for:

• Maintaining backups of your page.
• Moving pages from org to org.
• Creating new pages.

From the page you'd like to download:

1. In the Page Designer, click the vertical dots.
2. Select Download as XML file.

Once the download is complete, you will see it in your Downloads folder.

1. Open the Move popup: 
   • In the app's detail screen, within the Pages tab, click the vertical dots on the desired page.
   • In the App screen, within the All pages tab, click the vertical dots on the desired page.
2. Select Move to another app.
3. Select the app that you want the page to part of. For more information, see Apps.
4. Click Move.

1. Open the Delete page popup: 
   • In the Page Designer, click the vertical dots.
   • In the app's detail screen, within the Pages tab, click the vertical dots on the desired page.
   • In the App screen, within the All pages tab, click the vertical dots on the desired page.
2. Select Delete.
3. Confirm the deletion.

Recovering Deleted Pages ( Nintex Apps for Salesforce Only)

If you accidentally delete a Nintex Apps page, it may be possible to retrieve it— provided you are using Salesforce Classic. Since Nintex Apps pages are stored as data records, check Salesforce Recycle Bin to see if you can recover the page.

Click to configure the Salesforce sharing access for this particular Nintex Apps page.

• Page name: The name describing 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.

• API version: The API version the page is built on.

  Note:  The API version selected at page creation determines the features available to the page. You may only use the components associated with a page's API version. Also:

  • The API version of both principal and dependent pages must match.
  • The API version of a host page must match the API version of the Page Include component calling that page.

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

• Max auto-saves: Limits the number of auto-save revisions that can be generated. These types of revisions are created each time a Nintex Apps page is saved. Once this limit is reached, auto-save revisions are deleted—oldest first.

  Note:  Despite the name, Nintex Apps pages do not automatically save as they would in a productivity app, like Microsoft Word or Google Docs. Clicking the Save button generates an auto-save that is available to you as a page revision.

• 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: Used for defining global site details, such as company name, global search, logos, and similar information.
  • Complementary: Used for content that, while related to the main content area, is not necessary for that main area to stand alone. Typically used for sidebars and other supplementary information.
  • Content Info: Used for footers that appear on each page, which typically contain copyright information, navigation items, or similar content.
  • Form: Used to identify sections that comprise a singular form--even though it may be comprised of multiple components.
  • Main: Used to identify primary focus of the page.
  • Navigation: Used to indicate a section containing links for navigating a site.
  • Region: Used as a more generic landmark in order to indicate an area is relevant, but not categorized under the other available roles.
  • Search: Used to indicate a section contains elements for searching the page or site.

• Design system: The name of the design system that governs the page's styling.

  Several options are available in the dots-vertical Open design system options menu:

  • View: Opens the page's design system in the Design System Studio.

  • Change: Changes the page's design system. Once a new design system is selected, click Confirm to complete the change.

  • Refresh: Syncs the page's available design system options with any recent changes made to the design system. Useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

    Note:  It's also possible to refresh design system options by clicking refresh Refresh style variants beside the Style variant property within a component's Styles tab.

• Warn users if page has unsaved changes: If checked, when a end user tries to close the page when there are unsaved changes, Nintex Apps issues a warning.

  • No
  • Yes ( default )

• Personalization mode: Indicates where user personalizations—remembered settings like selected tabs, filter values, etc.—are stored.

  • Client-side: Use for non-authenticated users (visitors to a public-facing website, community and portal users).

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

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

• Available as a principal page: When checked, the page can be selected as a principal page when creating new pages.

• Show custom header and Show custom footer: When checked, the page displays a custom header or footer, which are separate page elements than the main canvas.

To learn more, see Create a principal and dependent page, which employs a custom header and footer in the principal page.

Adds interactions—actions from the Action Framework —to the page. Page-level interactions extend to the full page—a click anywhere on the page triggers the interaction.

Click add Add interaction then select:

• Action type: Determines the type of user interaction that triggers the action script.

In the dots-vertical More Options menu on the selected interaction, click Add action, then edit the Action Type:

• Action Type: Use the Action Framework to launch actions.

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

• Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, 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 Style Variant dropdown menu.

  Note: 

  To refresh available style variant options, click refresh Refresh style variants.

  This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

• Background: All Page background properties are the same as the Wrapper background section