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.

Page designer

Use the Page designer to design and customize pages in Nintex Apps. Create or edit pages using the drag-and-drop interface and actions directly on the canvas. The Page designer includes the Elements panel, Properties panel, global page actions, and the canvas. For advanced customization, integrate JavaScript (JS) snippets to extend functionality and tailor applications.

Jump to:

Navigate the Page designer

Elements panel

The Elements panel is on the left side of the Page designer. In this panel, you can select components for your page, configure models, create and set up action flows, and include JavaScript files.

  • Components: Use components to design the visual elements of your page. They display and allow you to interact with the data in your Models. For more information, see Components.

  • Index: An expandable and collapsible list of a page’s components and its child elements.

  • Models: Models provide components with data from objects, as well as external objects and services, providing the fields used on the page.

  • Action flows: Create reusable, named action flows that can be triggered by user interactions, events, or hotkeys.

  • Display Logic: Display logic statements control whether a component is rendered, enabled, selected, and styled. They are based on one or more rules.

  • JavaScript : Include custom JS in your Nintex Appspage. For more details, see JavaScript

Index and Surfaces

The Index shows the page's components and child elements in a tree view, displaying how they are arranged. Use the Index to drag new components onto the page or rearrange existing ones.

Surfaces are overlays, like sliding panels and modals, that appear on top of the main content to show details without leaving the page. The Surfaces area provides a centralized view of all overlays on the page.

Properties panel

The Properties panel is on the right side of the Page designer. It shows the options and settings for the Nintex Apps element currently in focus, such as components, models, or snippets. When you select an element in the Page designer, its properties appear in collapsible sections within the panel.

Global page actions

The global page actions, also known as the navigation bar, are at the top of the Page designer. These actions include:

  • The navigation menu: Provides links to manage Connections, Data, Design systems, and other Settings.

  • Canvas preview settings: Allows you to change how the canvas is rendered in the designer.

  • Undo and Redo: Click to undo the last action (keyboard shortcut: Cmd+Z on Mac, Ctrl+Z on Windows) or redo an undone action (keyboard shortcut: Cmd+Shift+Z or Cmd+Y on Mac, Ctrl+Y on Windows). Use these buttons to undo or redo actions on the page, in components, or within the models, action flows, or JavaScript tabs in the Elements panel.

  • Preview: Click to preview the live version of your Nintex Apps page.

  • Other options: Click on the to view other options.

    • Revisions: Click to view the list of revisions at different points in the page history. Revisions allow you to roll back a page to a previous point in the development process.

    • Clone: Create a duplicate of the current page.

    • Download as XML file: Download the current page as an XML file.

    • Delete: Delete the current page.

  • View XML: Click to view the XML version of the page you created.

  • Save: Click to save ( keyboard shortcut Ctrl+S on Windows, ⌘ +S on Mac).

  • Cancel: Click to discard the changes.

Canvas

This is the area in the Page designer where you drag and drop components, organizing the layout and functionality of your page.

Access the Page designer

In Nintex Apps, select an existing page or create a new one to open the Page designer.

  1. Drag a component from the Elements panel on the left side of the Page designer onto the canvas.

  2. Configure the component in the Properties panel on the right of the Page designer.

  3. For components such as a Table, click Add fieldsto add and configure fields.

    Note: 

    • Click the arrow between the Index panel and the canvas to expand or collapse the Index.
    • Click the arrow next to each property section to expand or collapse it.

For more information about specific components, see Components.

View XML

After saving a page, click View XML to access and interact with the XML version of the page. Here, you can copy the Nintex Apps XML to export your pages to other tenants. Sharing the XML is helpful for troubleshooting page issues, as it enables others to recreate the page and resolve problems more efficiently.

Add Pages to apps

Nintex Apps organizes pages into applications, managing their deployment to users and environments. Pages and their resources must be linked to one or more apps. The Page designer automatically adds resources, such as connections or included pages, if they aren't already linked to the page's apps. If another developer has added the resource, Nintex Apps resolves any conflicts and ensures proper association. However, the Page designer cannot automatically check all places where a file may be referenced, such as in Text components or embedded HTML. Ensure that any files used in your page are associated with the necessary apps. For more information, see Apps.