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

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.