Note: Nintex Apps data centers are located in West US and Australia (AUS). In-region processing of Nintex Apps data is only available in these regions.

Create and Customize Nintex Apps Pages

To create a new page, navigate to the app you wish the page to reside in:

  1. Click Apps in the navigation bar.
  2. Click the app.
  3. Click the Pages tab.
  4. Click Create

It's also possible to create pages from the Pages screen, though this page will not be associated with any apps by default.

  1. Click Pages in the navigation bar.
  2. On the Pages list, click Create.

Note:  You can also make a page by clicking Help > Resources from the navigation bar. On the Resources page, click Create a page.

When you create a new page, Nintex Apps opens the Create New Page dialog, where you define the page:

  • Page name: A practical and descriptive name for the page, so you can find it as the list of pages grows. For example, Account_Details_Page describes both the data used (data from an Account object), and the page's function ("details").

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

  • Apply principal page: Use this if you are creating a dependent page.

  • Page API version: Select the API version the page will be 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 any pages called via a Page Include component must match the API version of the host page it is called from.

  • XML options: Use this upload an XML file or use XML from a Nintex Apps page.

Once you've made your selection, click Create to begin building your page in the Page Designer.

Page Creation Options

Starting with a blank page means that the page will have no associated models and no pre-loaded components.

When creating blank pages:

  1. Click Create.

Once the page opens, start building!

Create a Nintex Apps 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 by clicking Apply principal page. Nintex Apps opens an entry field. Start typing the name of the principal page into this entry field and Nintex Apps begins to autofill a dropdown with selectable options.
  2. Click Create.

Want to see the list of dependent pages associated with a particular principal page? Open the principal and click add-user dependent pages. Nintex Apps opens a popup 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, click XML options.

  3. Click Paste XML.

  4. Nintex Apps opens an input field. Paste the copied XML into the field.

  5. Click Create

    Note: 

    If the uploaded 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 upload it.

  1. In the Create new page modal, click XML options.

  2. Click Upload 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.

    Note: 

    If the uploaded 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.

Working with Pages

There are several ways to open a page for editing.

  • In page's app detail screen, within the Pages tab, click dots-vertical on the desired page. Select Compose from the menu.
  • Click Pages on the navigation bar to open the page list, then click dots-vertical on the desired page. Select Compose from the menu.
  • When a page is open in Preview, click the edit-page Edit Page tab that slides out from the left side.

To see how a page looks to an end user, click Preview in the Page Designer. A runtime version of the page opens in a separate tab. You can also 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 rollback an app page to a previous point in the development process. Learn more about 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.

From the page you'd like to clone:

  1. Click the chevron-down next to Revisions.
  2. Select Clone.
  3. Give the new clone a Page name.
  4. Click Create Cloned Page.

After cloning the page, Nintex Apps asks if you want to open the cloned page or stay on the original one. If you choose to open the clone, it opens in a new window, ready to be edited.

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. Click the chevron-down next to Revisions.
  2. Select Download as XML file.

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

There are two ways to delete a page:

Note:  In Nintex Apps, there are dependency mechanisms to ensure included pages cannot be deleted until all references to them within container pages and apps are removed. You can see where a page has been included on an app' detail screen and the Pages screen.

From the Page list

  1. From the Nintex Apps navigation bar, navigate to the page you want to delete, and click dots-vertical to open the menu.
  2. Click Delete.
  3. In the delete page modal, click Yes, delete this page.

From the Page itself

  1. Click the chevron-down next to Revisions.
  2. Select Delete.

Nintex Apps will ask you to confirm or cancel the deletion.

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 undelete the page.

Nintex Apps for Salesforce

If you are using Nintex Apps for Salesforce, there is an option in the Revisions dropdown.

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

Properties

Page properties

  • 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)

Note: 

This feature has no effect if the page is:

  • 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.
Note: 

Once a header or footer is enabled, click on it, and it:

  • can be styled from the Styles tab
  • components can be added to it
  • can be made "sticky" (it remains visible no matter how much a user scrolls through the page) by selecting Sticky in the General tab.

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:

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.