Quick Start: Step-by-step

These brief step-by-step tutorials walk you through the basics of using Nintex Apps, as well as the main ways it brings together other Nintex Automation Cloud features.

This guide is intended to quickly demonstrate several important systems in Nintex Apps. It isn’t meant to create a production ready application, nor serve as an in-depth introduction to the various concepts listed here.

Jump to:

Introductory training course

The best way to begin understanding Nintex Apps is by completing the Nintex Apps - Level I training course (login required).

Prerequisites

These tutorials assume you’re working in a connected experience environment, with Nintex Automation Cloud and Nintex Apps as a paired tenant set. They also assume you’ve created workflows, assigned tasks, and created Data tables.

We highly encourage you to read the linked documentation below.

Important: Follow these instructions in a development environment to avoid altering production data.

Apps basics

Apps are made up pages, connections, files, and other resources. Pages are the user interface (UI), and they are built in the Page Designer. Using this designer, you'll connect the UI to data using components and models. You can further enhance pages with interactive elements that trigger actions and workflows, as well as dynamic visual styling. Pages are then published at specific URLs.

The following sections walk through the basics of creating an app, building a page, and publishing the app. Understanding these fundamentals will help you navigate Nintex Apps and serve as a foundation for further learning.

Step 1: Create an app and a page

An app is a collection of app pages, connections, files, permissions, and other resources. Once you create an app, you’ll navigate its collected resources as tabs in its detail screen.

To create an app:

  1. Click Apps in the navigation bar.
  2. Click Create.
  3. Set the app’s properties:
    • Name: This name appears in the Apps list for administrators as well as end users within the My Apps menu. For this example, use Quick start.
    • URL: This is the URL your app will be accessible from for end users. For this example, use quick-start.
    • Design system: Design systems determine the visual styles of your app. For this example, leave this as the default setting.
  4. Click Create.

The newly created app’s detail screen appears. You’ll often revisit the details of your app as you add additional resources: pages, files, connections, workflows. Your detail screen is also where you’ll create and manage app permission sets.

To create a page:

  1. If you’ve explored the other app detail tabs, click Pages.
  2. Click Create.
  3. Configure the page’s properties, clicking Save and next after setting each one: Set Page name to Example page.
  4. Click Save and next.
  5. Do not adjust the page URL for this example.
  6. Click Save and compose page.

The page is created, and the Page Designer appears. If this is your first time in the designer, consider taking the brief overview tour. It’ll cover some of the same ideas discussed here, but we’ll continue walking through them step-by-step.

Step 2: Drag a component onto the canvas

App pages are built with components . They’re the drag-and-drop building blocks that make up your page’s user interface. In this example, we’ll use a Table component to display row data from a Nintex Data table.

  1. In the Elements panel, click Components.
  2. Navigate to or search for the Table component.
  3. Click the component’s block and drag it into the canvas.

The Table component appears in the canvas—however, it doesn’t have data to display yet. That’s because components receive data from models. Next, let’s create a model for our data.

Step 3: Create a model to retrieve rows from a Nintex Data table

Models are the bridge between components and your connections. They retrieve and contain data, then provide that data to components. They can be connected to one or more components.

Let’s create a model that connects to a Nintex Data table in this tenant. For this example, we’ll use a table named Example data, which simulates account data you might find in a CRM. However, you can follow these instructions using your own table and columns—the intent is to just bring some data in to the page.

Note: Remember that models read and write data. As you explore, consider doing so in a test environment to avoid interacting with production data.

  1. Within the Table, click Create model to begin.
  2. Set the model’s properties:
    • Model Id: Determines how the model is referenced by the page’s components. For this example, use ExampleData.
    • Model description: An optional field to describe the purpose of this model for future reference. For this example, you can leave this property blank.
    • Connection: Select Nintex Data.
    • Object: Models call the things they connect to objects. For this example, your object will be a Nintex Data table. Select the most appropriate table you have; we’ll use Example data.
    • How would you like this model to function?: This determines how the model handles rows of data. For this example, select Basic.
  3. Click OK. The model’s details appear in the expanded Elements panel. The Data tab appears first, which displays the fields available to retrieve from the connection. In this example, your Nintex Data table’s columns are represented as fields.
  4. For this example, select all fields to add them to the model.
  5. Click the X icon to close the Elements panel.

Step 4: Add model fields to the Table

In the previous step, all fields from the Nintex Data table were added to the model. But the Table component still says it requires fields. Why is that?

Models can retrieve many fields and make them available to components. You’ll then need to add fields to each component. This means multiple components only show the data they need to, all while they’re connected to the same model.

To illustrate this, let’s add just a few fields to the Table:

  1. In the Table within the canvas, click Add fields.

  2. Click the + (plus icon) beside several fields to select them.

  3. Click Ok .

The Table refreshes to display the newly added fields in the canvas. With that, we’ve built a page that can display data!

Step 5: Save and preview

With the page constructed, it’s time to see it in action.

  1. Click Save.
  2. Click Preview.

A new tab opens with the page. This is known as runtime Runtime refers to when users are actually working in an app page, instead of constructing them in the Page Designer.—it’s what your end users will see when the page is published. You’ll often be jumping back and forth between the Page Designer and runtime to validate your changes appear as expected.

Step 6: Review page building essentials

We’ve covered the essentials of building pages in the Page Designer. The important things to remember:

  • Components determine the layout of your page
  • Components get data from models
  • Models get data from connections

Use workflows and tasks in Apps

Apps provides a way to build intuitive UIs, but those pages become really powerful when used alongside Nintex’s other features. You can use workflows and tasks in your pages—displaying them as data, or activating them via actions.

You can display things like tasks, workflows, and instances in much the same way as Nintex Data above. Create a model on the Workflow connector instead of Nintex Data, and the list of available objects will appear. The optimal way to display this information will vary.

Activate a workflow using an action flow

To activate an Nintex Automation Cloud workflow, use an action flow.

  1. In the Elements panel, click the Action flows tab.
  2. Click Add a flow.
  3. Set the action flow’s properties:
    • Name: Set a name that describes which workflow this will activate.
    • Description: Set a description that provides any other helpful details for the chosen workflow.
  4. Click Create.

The action flow builder appears—which shares many similarities with the Workflow designer. Here you’ll assemble flows from sets of actions.

  1. Click Add action in the canvas.
  2. Click the Workflow connection.
  3. Click the Start component workflow action.
  4. Click Create. The Start component workflow action appears within the canvas, and the action’s properties populate the Properties panel.
  5. In the Workflow_Id property, select the workflow. Any start variables required by the workflow appear as additional properties.
  6. Enter start variable information for any required variables.

Next, we’ll need a page element that activates this action flow. For this example, let’s use a button.

  1. In the Elements panel, click Components.
  2. Navigate to or search for the Button Set component.
  3. Click the component’s block and drag it into the canvas. The Button Set appears with a default Run actions button.
  4. Click the default button that appears.
  5. In the Properties panel, click the Actions section.
  6. Click Add.
  7. Click Add action flow.
  8. Click the newly created action flow.

The button will now trigger the specified action flow, and that action flow will activate the designated work flow.

Other actions

Action flows can do more than just call workflows. There’s a whole set of actions that can trigger UI elements, like toast messages, or update data in highly specific ways.

Try tailoring a Show toast message to the button you created above telling the user that a workflow has been activated.

  1. In the Start component workflow action’s card, there are Success and Error branches. Click Add action beneath Success.
  2. In Core actions, click the Show toast action.
  3. Click Create.
  4. Set the action’s properties:
    • Message to display: Workflow activated!
    • Click to dismiss: Enabled
    • Leave all other properties as their default values.
  5. Click Save.

Now, when a user clicks the button to activate the workflow, they’ll also see a toast message confirming their action within the app.

Actions are a powerful way to enhance your apps. Try other actions to see what you can build.

Use the Workflow Form component to display forms in the app page

While the Apps Form component provides a way to create a form UI without building a workflow, you can also include workflow forms built in Nintex Automation Cloud’s Form designer in your app.

  1. In the Elements panel, click Components.
  2. Navigate to or search for the Workflow Form component.
  3. Click the component’s block and drag it into the canvas. The component’s properties appear in the Properties panel.
  4. Click the Workflow property.
  5. Click the workflow with the desired form.
  6. Click Save
  7. Click Preview

The page appears with the workflow start form embedded within it. If in a non-production environment, try filling out the form and submitting it. After doing so, you’ll see the workflow instance as expected in Nintex Automation Cloud.

Other features to enhance your app

Apps is a broad product with many features in its various workspaces. While what we’ve covered so far is enough to get started, consider trying out some of the activities listed below to explore further.

Display logic

Display logic determines when and how components appear. In the Display logic tab, you can create logic statements containing one or more rules. You can then attach those statements to one of the following features on a component:

  • Conditional rendering: Whether or not the component appears
  • Conditional enablement: Whether or not the component can be interacted with—like a button being clicked
  • Style variant conditions: Which visual style to use for the component—configured in the app’s design system

When a statement’s conditions are met, that statement activates on any feature it’s attached to. A single statement could enable a button, hide a section of data, and change the color of the dashboard.

Merge syntax

Merge syntax is how certain types of data can be referenced in components or used in formulas. This syntax primarily consists of merge variables, which look like this:

{{fieldName}}

For a basic example to greet the user by their first name, try the following:

  1. In the Elements panel, click Components.

  2. Navigate to or search for the Text component.

  3. Click the component’s block and drag it into the canvas.

  4. Type the following in the Text component within the canvas

    Hello {{$User.firstName}}!

  5. Click Save.

  6. Click Preview.

The page preview appears, with a new section greeting the user by name. Merge syntax is dynamic, so while you see your name, other users see their own.

Publish your app

To publish an app, you must make it available at a URL. You can do this from the app’s detail screen:

  1. In the Apps navigation bar, click Apps.
  2. In the Apps list, click the app containing pages you wish to published. The app’s details appear on the Pages tab.
  3. Beside the page you wish to publish, click More options > Configure URLs.

The Configure URLs modal appears. Pages can have one or more URLs that they can appear to users at. URLs are built with path elements—the piece of text that appear between the slashes of a URL. Path elements provide a way to structure your app’s URLs, or provide parameters to the page. For this example, let’s just create a basic URL with one path element:

  1. Click Add URL.
  2. Enter example-page
  3. Click Save.
  4. Click Done.

With that, the page is now published at the example-page path within your app’s URL. If you’ve been following along with this entire quick start guide, it should published at a URL like this: https://your-sub-domain.nintex.app/quick-start/example-page/

As an example, use an app permission set to grant access to the app.

  1. Return to the app’s detail page by clicking Apps in the navigation bar, then selecting the Quick start app.

  2. Click the Permissions tab.

  3. Click Create.

  4. Provide basic details:

    • Name: Quick start app access
    • Description: This permission set grants basic access to the example quick start app.

  5. Click Save and continue.

  6. In the connection access screen, click Allow all to grant access to the connections used in this example app.

  7. Click Save and finish.

 

Note: Granting Allow all access is not typically advisable for production apps. Consider using multiple permission sets to better modularize permissions.

What’s next?

With the above step-by-step instructions you’ve built a basic app with one page. In doing so, you’ve interacted with most of the major systems you’ll use to build out truly functional, production-ready applications in Nintex Apps.

There are several additional features you can try out with this basic app, though the specific instructions are likely to vary.

Add users to the environment

With the app built and published, you can see it action. Now, it’s time to add users and make it available to them. For more information about adding users, see Nintex Automation Cloud and Nintex Apps connected user management.

Users need to permissions access this app. While roles handle permissions in Nintex Automation Cloud , Apps requires users be permissioned through site permission sets and app permission sets. Users have one site permission set, but can have many app permission sets.

Permissions can (and should) be granular, and clearly documented with a proper name and description.

Design systems

Design systems handle the visual styling of your apps. Each app can have one design system, though your tenant can have as many as needed.

In design systems, you’ll create variables as part of the design system’s theme. These are tokens that represent a particular style—like naming a certain shade of blue your “Primary brand” color. After that, you can use your variables to create style variants for your components, which is how you set the color, size, and text styles for the individual components you’ll use to build your page.

Connections

Connectors and connections provide a way to expand your app beyond what’s on the screen. Connections are links to external services that can retrieve data or trigger processes. To create a connection, use one of the provided connectors. There are a variety of pre-built connectors available, which only require authentication details and some service-side configurations to use. If the desired service doesn’t have a connector but provides a REST API, consider using the REST connector to create a connection, much like an Nintex Automation Cloud Xtension .