Components

Components are the building blocks of a Nintex Apps page, drag-and-drop elements that define the function and visual structure of your app. Adding components to the page allows users to interact directly with the data the page connects to through Nintex Apps models and connections.

Different types of components do different things: some manage the way the page is laid out; some display data on the page; and some add elements, like images or charts, that help visualize data.

Component properties

Each component has properties that allow you to select how the data in the component displays, how and when data renders, and the visual appearance of the component.

Once a component has been placed, clicking the component within the canvas will present component properties in the Properties pane. To adjust each property, click on the corresponding tabs within the Properties pane and view each component's editable features.

All components offer a rendering property tab to give you full control over when certain components—and pieces of data—appear in your app.

Beyond rendering, properties differ from component to component, based on primary functionality. For information on component-specific properties, see the help for the individual component.

Add components to the canvas

1. From the Elements pane, click the Components icon to view a list of components.

2. Click on the component and then drag and drop it into the desired position on the Nintex Apps page.

Cut, copy, paste, and clone components

To save time building new pages, you can cut, copy, paste, and clone components within a Nintex Apps page. These features are especially useful when:

• Quickly creating multiple components with nearly identical properties.
• Moving components between a page's main area in the canvas and interior elements, including drawers, modals, and panels.
• Collaboratively sharing or debugging component configurations by sharing XML.
• Building highly stylized container components, such as Wrapper and Grid, that you want to use multiple times in a page.

Each time a component is cut, copied, or cloned, all selected models, fields, actions, and modified properties carry over to the new component.

Components nested within container components (like the Wrapper) may also be copied or cloned.

Note:  Only whole components may be cut, copied, pasted, and cloned. Pieces of components—such as tabs or buttons—cannot be cut, copied, pasted, or cloned.

To use cut copy, paste, and clone functions, select a component anywhere in the canvas and use any of the following keyboard shortcuts:

• Copy [Cmd/Ctrl + Shift + C]: Copy the component's XML. A dashed border will momentarily appear around a selected component to indicate it has been copied.
• Copy [Cmd/Ctrl + C]: Copy the component for pasting within the canvas. A dashed border will momentarily appear around a selected component to indicate it has been copied.
• Clone [Cmd/Ctrl + D]: Clone selected component. Cloned components are automatically inserted into the canvas below the original component. You can also right-click on the component in the Index or canvas and select Clone.
• Cut [Cmd/Ctrl + X]: Cut selected component.
• Paste [Cmd/Ctrl + V]: Paste a copied or cut component. Pasted components appear below the currently focused position in the canvas. These components can then be repositioned by dragging and dropping, or modified based on their standard properties.

Remove components

Remove components using the following options:

• Click on the component in the canvas and press the Delete key.

• Right-click on the component in the Index or canvas and select Remove.

• Click on the component in the canvas and then click Remove (trash can).

Navigate from the toolbar stack

Components are the building blocks of Nintex Apps pages, and sometimes they can contain many elements. Some components can have entire other components nested within them, like the Wrapper. Components are also made up of smaller elements, like a Table made up of one or more fields. Navigating this nested pattern can be challenging on complex pages.

When you select a component, or a piece of a component, on the canvas, a small toolbar appears above it, giving you access to the "stack" of elements containing the selected element. This feature is useful to visually see the stack of elements that you are configuring, including parent and nested child elements. It also allows you to more easily navigate to page elements, quickly moving to a parent element from deep within a set of nested elements. This can aid in troubleshooting, allowing you to see which parent element properties are affecting your selected element.

The stack will only list the parents of the selected element, showing you what the selected element is nested within.

To access the component toolbar stack:

1. Add an element to the canvas.

2. Select the element on the canvas to display a toolbar above it. This toolbar can contain additional component options, like remove.

3. Select an element from the toolbar stack list. Focus shifts to the newly selected, parent element.

Edit components in the Design System Studio

If the component can be edited in the Design System Studio:

• Right-click on the component in the Index or canvas and select Edit in DSS.

• Click on the component in the canvas, click More Options (three vertical dots) and select Edit in DSS.

• Click on the component in the canvas and then click Edit in DSS.

For more information on editing in the Design System Studio, see Design System Studio.

Work with components

Right-click on components in the Index or canvas and select options appropriate to the component to work with it. The options displayed are a slice of the Index, so you can select another component (either at a higher level or nested within the current component). This helps you quickly target and select components.

For example:

• Right click on a Form component and select Add column.

• Right-click on a Table component and select Add fields or Add feature.

Component interactions

Note: When you add row, global, or mass actions to a Table or List component, the resulting buttons possess the same Button and Button Group properties as those for Ink Button Set.

Row actions

Row actions are record-level actions represented by row buttons that use a record on the component as the context. Use Row Actions to add actions that affect individual records, such as emailing a lead, or opening a Table drawer to see more details on an account.

Note: Use the Show/hide menu action to add a drop-down menu to the row action.

Row actions use standard display logic options to display or hide rows.

Global actions

Global actions are component-level actions represented by buttons at the top of the component. These actions do not receive context (data from a specific row or area). They are used to activate more generalized sets of actions (like opening a popup containing the Wizard component to walk the end user through creating a new record).

Button Set or Header components are often used in lieu of global actions. However, if you want to reinforce that a set of actions is specifically associated with the component's data, use a global action.

Mass actions

Mass actions display when an end user selects a row in a component and perform their action flow upon those selected rows.Each selected row becomes context for the action. To allow users to select multiple records and then to perform actions on them—for example, updating or deleting multiple records—use a mass action.

Note: Located at the top of the component, mass action buttons only display when one or more rows are selected; the mass action then applies to all selected rows.