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.

Jump to: 

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.