Deck

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

Using the Deck component

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

Deck templates

Like all Skuid components, you can add the Deck component to a page by dragging and dropping it. Next, click Choose a Template on the Deck’s body to select one of the following templates:

  • Vertical with image
  • Vertical without image
  • Horizontal with image
  • Horizontal without image

Each template includes pre-selected components arranged in a Responsive Grid within the Deck.

Fill the Deck

Think of the Deck as a container that 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.

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

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

  • Page Title component: Provides a title for each of the cards, typically based on record’s Name field.
  • Field Editor component: Since each card is an individual record, the Field Editor 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 popup with more information when the user clicks or swipes the image.

Every Deck includes a header and a footer. These sections include:

  • Header
    • the Deck’s title
    • the Save and Cancel buttons
    • a search box
  • Footer
    • a picklist to set number of records displayed per page
    • an indicator of which set of rows are showing and links to jump to the next or last increment

The component’s header and footer can be hidden using properties in the Basic tab.

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

Supported features

On the Deck, you can access interactions, global actions, and mass actions using the buttons at the bottom of the deck, or via the Add Features menu on the deck.

Properties

Deck Properties

Show all sections

Basic tab [[]]

  • Model: The model the Deck component uses to create its separate cards.Every record in the selected model that meets the model condition will have a card.
  • Title: The title that displays above the Deck. (If left blank, the Deck does not have a title.)

Note

This is the title for the deck as a whole, not the title of the individual cards. Titles can be added to the card layout using a Page Title component.

  • Column Gutter Size: Set the distance between cards.
  • Row Gutter Size: Set the distance between rows of cards.
  • Hide Header: If checked, the Deck header does not display.
  • Hide Footer: If checked, the Deck footer does not display.

Note

Hide Header/Hide Footer supersedes any settings for individual elements in the Header or Footer. For example, if Show Save/Cancel is checked—which displays the Save and Cancel buttons—but Hide Header is also checked, the Save and Cancel buttons (which sit within the header) will not display because the header is hidden.

  • Visible Rows: As with the Table component, this will set a default limit for the amount of cards shown on page load. If the deck has more cards than this visible limit, they are paginated. End users can also configure this setting at runtime.
  • Always reset pagination after save or query: When changes within this component are saved, the Deck continues to display the current page of cards by default. Checking this option means that the Deck will instead return to the first page of cards when changes are saved.
  • Show Save/Cancel: Check to display Save and Cancel buttons for the deck. (Default: unchecked).
  • Button Position: If using a search field and/or filter buttons, choose whether to place the search box and filters top left or top right.

Card tab [[]]

Card Styles tab [[]]

  • Border: The border is added to the edge of each card. If you select one of the border locations (left, right, top, bottom, or all—meaning all edges of the card), you can also set:
  • Padding: Padding is spacing inside the card, between the edge of the card and the content. If you select one of the padding options (left, right, top, bottom, or all), you can also set:
  • Margin: Margin is the spacing between cards. If you select one of the padding options (left, right, top, bottom, or all), you can also set:

Filters & Search tab [[]]

In this tab are properties that control whether or not you have a search box, and when search terms and conditions are applied.

  • Filter & Search Behavior:

    • Apply Filters and Search Immediately: If checked, all changes made to filters, or any text typed into the search bar, will be applied immediately. If unchecked, Skuid displays the Apply and Cancel buttons. The changes will not be applied until the user selects Apply.

      Note

      This is particularly useful when employing multiple filter criteria.

  • Filters Properties:

    • Position: Choose to display any filters at the Top, Right, Bottom, or Left of the deck.
  • Search Properties:

    • Show Search Box: If checked, Skuid displays a search box above the component.

    • Search Method: Determines if a search will query the server and filter its data, or filter local data on the client.

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

      • Client: Returns search results from only the data that is currently loaded on the page. Large data sets may require lengthy time to filter. If users commonly need to sort only the data they have loaded within the page—as opposed to every record on the server—this property may speed the filter process.

        Warning

        If the server contains a large data set not yet loaded into the page, but Search Method is set to Client, the filter may return incomplete results because it’s filtering incomplete data. This may result in unexpected omissions.

    • Tokenize Search Terms: If checked, each word typed into the search bar is “tokenized” — meaning each word is searched for individually. A tokenized search for “George Washington” returns any record with “George” and “Washington”. For example, “George Washington,” “George Michael Washington,” and “George is headed to Washington”. An untokenized search for “George Washington” returns only records with “George Washington” exactly.

    • Search box placeholder text: The text that appears in the search box before the user starts a search. (The default is “Search.”)

    • Empty Search Behavior lets you determine what happens when the search box is emptied.

      • Re-query for Model Data (default): The data displayed in the component returns to the state it was in when you first loaded the page.

      • Remove all Model Data: The data is removed from the component and its associated model (but not from the data object/entity).

        Note

        Why do this? If you want to use a component to display the list of search results—handy when you have a lot of search results—you need to have an empty component each time you do a new search, so you can display the newly returned results in it. Without this property, the component’s model will be re-queried when the text is cleared from the search box.

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

    Note

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

    • Use SOSL to improve search performance (Salesforce data sources only): SOSL quickly can search multiple objects at a time within a single search query. SOSL does not directly search the database, but instead queries an index of Salesforce text fields. Individual search fields may not be added when this property is enabled.

      Warning

      Because the search is against the index, results are limited to what is present in the index, and will not include data that may have been recently updated in the database. The index updates very quickly, but expect a delay of up to 30 seconds between changes made to the database, and their appearance in the search results.

      Note

      SOSL can search Text fields (including Long Text fields), but not Picklist fields and Reference fields.

      • Fields to Search: Sets which Types of fields to query with SOSL. The options are:

        • Name Fields (default)
        • All Text Fields
        • Email Field
        • Phone Fields
        • SideBar Fields (Name, Phone, Email, External Ids)

        Searches on Salesforce data sources can use one of two query languages: SOQL or SOSL. SOQL can only search one object at a time in a single query, but searches all searchable fields in that object in real-time.

    • Fields: Skuid 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 data sources 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
Skuid on Salesforce [[]]

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 on using these search options with Salesforce, check out Salesforce’s SOQL and SOSL Reference Guide.

Advanced tab [[]]

Display Logic tab [[]]

Standard conditional rendering options are available.