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 shortcuts/hotkeys:

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

  1. Click on the component to select it.

  2. Click the Remove icon (trash can).