Deck

For every record in a model, the Deck component will create an individual card, each a template that can be configured within the Page Designer. These cards visually highlight a model's data and allow you to set interactions.

Jump to:

Using the Deck component

In contrast to a standard list view, which provides a catalog of all data, or a detail view, which lets end users drill down into any one record, the Deck component allows you to surface important information and place it prominently on the page.

Fill the Deck

The Deck formats every record in a model as a card. Once you Add a Deck component to your page, you can drag and drop components into that Deck to configure the format of the cards.

Note:  Add a component to the first card in the deck and it will populate the other cards.

  • Ensure that components within the Deck are accessing the correct model to receive the target data.
  • Modify the components' properties, and add any desired actions to the components.

Experiment with components to determine which work best to display the selected data. Good options include:

  • Header component: Provides a title for each of the cards, typically based on record's Name field.
  • Form component: Since each card is an individual record, the Form component is best suited for editing data in cards.
  • Image component: if your object has image fields (for example, company logos, or pictures of contacts), use this component to display those images in the deck.

Note:  Add an interaction to the component that opens a modal with more information when the end user clicks or swipes the image.

Every Deck includes a header and pagination. Depending on the property settings, these sections can include various features. For more information, see the Headers and Pagination tabs in Component properties.

Filtering a Deck

You can add a filter to the Deck using either the Filter Set component, or the filter option on the List itself ( Add features > Deck filter ). Learn more about creating, configuring, and conditionally rendering filters.

Sorting a Deck

You can give end users the ability to sort records in the Deck component by adding the Sort Builder to the header of the Deck.

 

Context considerations

Deck cards act as context containers that display records related to the row from which they are opened. Each card has a default context variable—deck_context—mapped to Id of the clicked row.

If your scenario requires more specific filtering, you can define additional context variables. These variables can then be referenced by the models and components within the card, ensuring they display the exact subset of data you need.

For more information about context, see the Context topic.

How to limit data in the Deck

There are many ways to take advantage of the Deck component, but it offers fewer ways to limit incoming data. If you're using the Deck to surface a subset of information found elsewhere on the page—for example, from a model used in another component—adding a condition to that model will limit the records for both components.

Want to limit only the data coming into the Deck?

  • Duplicate that model using the Clone button next to the model name, and give the model a new name.
  • Add a condition that limits the data to the subset for the Deck component.

Use this new model exclusively with the Deck.

Component actions

Component actions are available using Run component action.

Go to page

Navigates to the Target page in the component.

  • Target page:
    • First page
    • Last page
    • Previous page
    • Next page

Component properties

  • Unique Id: An automatically generated alphanumeric identifier for the component. You can rename if needed. (Required)

  • Model: Specifies the data source that the component will display.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style variant drop-down menu.

    Note: 

    • To refresh available style variant options, click Refresh style variants.

    • This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • Column gutter size: Sets the distance between cards.
  • Row gutter size: Sets the distance between rows of cards.

  • Margins: Sets a component's margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click All.

    • To set margins for each side individually, click Separate.

    Margins must be set using spacing variables defined in the design system. Custom or arbitrary values are not allowed. For more information, see Spacing.

  • Minimum width: Type the minimum width for individual cards. For more information, see Sizing measurements.
  • Vertical align: Select the cards' alignment you want from the drop-down menu.
  • Set maximum width: Sets the maximum width for individual cards. Select one of the following options.
    • Automatically
    • Manually 
      • Maximum width: Type the maximum width for individual cards. For more information, see Sizing measurements.
Note: 

Cards are created based on the model. Every record in the selected model that meets the model condition will be represented as a separate card.

  • Show header: To display the header on the component, turn on the toggle.

  • Allow HTML in title: Determines HTML rendering behavior for Title contents.

    • When turned on, any HTML syntax will be rendered. For example, This text is important.

    • When turned off, HTML syntax is displayed as plain text. For example, <strong>This text is important</strong>.

  • Title: Title that is displayed on the component. If left blank, the component will not display a title. Can also contain rendered HTML if Allow HTML in title toggle is turned on.

    Note: 

    This is the title for the component and not the individual cards. You can add titles to the individual cards using the Header component.

  • Show save and cancel buttons: To display the Save and Cancel buttons on the component, turn on the toggle.

  • Save icon: The icon on the Save button. To choose the icon you want, click the icon selector.

  • Cancel icon: The icon on the Cancel button. To choose the icon you want, click the icon selector.

    • Show pagination: To display the pagination on the component, turn on the toggle.

    • Records per page: Manages how many rows are visible on the component. Select an option from the drop-down menu or enter a custom number.

    • Show records per page dropdown: To display a drop-down menu on the component that allows users to select how many records to view per page, turn on the toggle.

    • Show "Load more" button: To display the Load More button on the component, turn on the toggle. The model’s Max # of records determines the initial number of records shown. Users can click the Load More button to load additional records.

    • Reset pagination on query: To reset pagination to the first page after any edits or queries to the model, turn on the toggle.

  • Show search box: To display the search box on the component, turn on the toggle.

  • Search method: Determines if a search will query the server and filter its data, or filter local data on the client. Select one of the following options.

    • Server (Default): Returns search results from all data on the server.

    • Client: Returns search results only from the data currently loaded on the page. For large datasets, this can reduce filtering time. If users typically filter only the visible data rather than all records on the server, enabling this option may improve performance.

      Note:  If the server contains a large data set that hasn't been fully loaded on the page, and the Search method is set to Client, the filter may return incomplete results, as it can only filter the data currently available. This may lead to unexpected omissions.

  • Search results: Determines which results are displayed based on the search query. Select one of the following options.

    • Match exactly: Results are only shown for records that match the search term.

      For example, if the search text is George Washington, only records that contain George Washington exactly as written, with no additional words in between will be displayed.

    • Contain all terms: Results are shown for records that contain all of the terms in the query, even if they may appear in a different order or disconnected from each other.

      For example, if the search text is George Washington, any record that contains both George and Washington, regardless of their order or placement will be displayed.

    • Contain at least one term: Results are shown for records that contain any of the terms in the query.

      For example, if the search text is George Washington, any record containing either George or Washington will be displayed.

  • Search box placeholder text: Type the custom text to display as placeholder text in the search box until the user starts typing.

  • Search icon display: Determines how the search icon is displayed. Select one of the following options.

    • Button: Appears as an icon inside the search box that users can click to perform a search.

    • Inset icon: Appears inside the search box and not meant to be clicked.

    • None

  • Search icon: Determines the search icon that is displayed inside the search box. To edit and reset the selected icon, click .

  • Empty search behavior: When the search box is cleared, the model is re-queried without any search conditions, so records are likely to be returned. To remove all records from the model when the search box is emptied, select Remove all model data. Select one of the following options.

    • Re-query for model data: Clears the search term and retrieves all records from the model.

    • Remove all model data: Clears the search term and removes all records from the model.

  • ARIA label: Determines what description will be read by assistive technology, such as screen readers, by setting the aria-label HTML attribute, which is part of the Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) spec.

    Used to describe elements where text may not be visible, this property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

  • Search fields: Specifies which fields will be searched against from the component's search bar.

    Note: 

    Depending on the connection used for the model attached to the component, this property may not be available.

    • Field: Nintex Apps searches on searchable fields by default. Search can be narrowed to individual fields by clicking add Add new Search Field, and then using the field picker to select the field.

      Note: 
      • ( Salesforce connections only ) SOQL can search Picklist fields and Reference fields, but not Long Text fields.
      • You can add multiple search fields.

      • Search operator: Select from the following logical operators:

        • =
        • starts with
        • Contains

By default, Salesforce Objects use SOQL. To ensure proper functionality, enable the Allow Search property on any Salesforce objects to be included in the search. For more information see, Make Search Faster.

For more information on using these search options with Salesforce, see Salesforce's SOQL and SOSL Reference Guide.

  • Show Sort Builder: To display the sort builder on the component, turn on the toggle.
    • Button icon: Determines the sort icon that is displayed on the sort builder. To edit and reset the selected icon, click .
    • Button label: The label text that appears on the sort builder. Type the text you want to display to users.

  • Sort client-side: To sort only the field values already loaded on the page, turn on the toggle. This applies sorting only to the data currently in the model, not to any data still on the server.

Interactions trigger Action flows based on typical ways an end user may interact with a page element or component. Interactions can be configured on various elements. Options vary, but may include:

  • Click

  • Right click

Standard display logic options are available to display or hide the component or feature.

Context variables for context containers are managed from the Context variables property section. For more information about context variables, see, Context topic.