About Details Views

This article provides comprehensive information on details views, including design settings, managing details, display rules, and more.

This article covers the following topics:

 

What are details views?

Details views are a valuable tool that allows you to present the fields of a single record in a versatile layout within your Live App.

details1

Any fields from the record's table can be utilized in the details layout, providing a wide range of options. Additionally, it is possible to incorporate certain fields from connected parent records into a details view.

To access details views, users must follow a link from a view that displays multiple records. For instance, clicking on a "view more" link on a record from a grid, list, search, or other view that shows multiple records.

Links can be added to a details view to edit, delete, view more details about that record, link to other pages within the app, or trigger actions

 

Details Settings

To access the settings of a details view, simply hover your cursor over the view and select the pencil icon that appears at the top left corner. This action will prompt a menu with options for Settings, Add Details, and Rules, which can be easily modified in the toolbox located on the left side of the page preview.

Additionally, you can conveniently find the view's data source at the top of the toolbox, which displays the specific records that the view is associated with.

detailsviews2

Design Settings

Within the "Settings" section for the Details view, users have the capability to include a title and description to the view, along with specifying label formatting, how to present empty values, and several layout options.

detailsviews3

  • Hide Empty Values: You have the option to hide fields when there is no value or choose to keep the fields visible without displaying any value next to the field label.

  • Label Format: This option allows you to select the label formatting from the following choices: Left aligned, Right aligned, Top - above the value, and None - hide label.

  • Layout: This option enables you to choose from various layout options to personalize the arrangement of your columns.

  • Title: This title will be displayed above the view in your Live App.

  • Description: The description will be included above your view, below the title. Descriptions serve to provide users with additional context on how to utilize a view effectively.

 

Add Details Settings

The "Add Details" section provides you with control over the content available in the details view. Here, you have the ability to add or remove fields, include action links, and incorporate static elements into the details view. 

This section is divided into four different areas:

  • Fields: You have the option here to add or remove fields from the primary table of the record being displayed.

  • Connections: You have the option here to add or remove fields from any connected tables that are linked to the primary table of the displayed record.

  • Actions: You have the capability here to add links that allow users to perform various actions such as editing, deleting, viewing more details, triggering actions, or linking to another page.

  • Static: You have the option here to include additional titles, instructions, or dividers within the details view.

detailsviews4

In the "Fields" and "Connections" sections, users can select the ellipses (...) button next to the tables' names to access options for adding all of the table's fields to the view or creating a new field for that table. If you create a new field, that field will then be available as an option to add to the view.

detailsviews5

Note: When using cascading connections in Knack, the view will only recognize a "great grandchild" table through the "grandchild" table relationship. Tables with deeper connections are not available for field selections.

To learn more about table relationships, see this article here.

Tip: To learn more about connections, see our Connections: Troubleshooting & FAQs and our About Connections articles.

 

Adding, Removing, & Editing Fields

The Fields tab in the "Add Details" section, while editing a Details view, includes all the available fields in the primary source table used for the view. You can also add fields from tables connected to the primary table being displayed; see this section below

detailsviews6

Tip: To learn more about the data source of views, see our article here.

 

Adding Fields

To include a field in your details view, you have the option to simply click on the field in the list provided in the toolbox or drag and drop the field into your details view in the preview. 

Removing Fields

To delete fields from your details view, simply hover over the field in the page preview and click on the trash can icon.

Editing Fields

To make changes to a field in the details view, simply hover over the field in the preview and click on the pen icon. This action will open the Item Properties in the toolbox on the left.

From there, you can easily update the label format, label title, and styling options. Here are the descriptions of each of these settings:

  • Label Format: You can choose to use the label format set for the group or select "Hide Label" to conceal the label and only display the field value.

  • Label: The label that is shown alongside the field value. This defaults to the field name.

  • Style: You have the ability to customize the field's style by choosing header 1, header 2, bold, or italics formatting options.

  • Map: This feature is only available for Address field types and allows you to display a map of the address above the listed address. Once you choose this option, you have the flexibility to customize the size of the map.

detailsviews8

Field Layout & Grouping

The details view offers pre-set layout options that enable fields to be organized into columns. Additionally, you have the flexibility to rearrange or group fields within the details view by simply clicking and dragging them to a new position.

detailsviews9

Connections: Adding & Removing Connected Fields

The Connections section allows you to add fields from tables connected to the primary table being displayed. This allows you to display connected values without the need to directly include them in the primary table's record.

detailsviews10

Adding Actions

The Actions tab provides the ability to incorporate action links into your Details view, which can trigger various actions such as editing or deleting the record, linking to another page, or performing a specific action.

The available action links include:

  • Edit record: This option will generate a new child page containing a Form to edit the record. Clicking on the link will navigate to that page for editing the record.

  • View record details: This will generate a new child page that displays all the details for this record. Clicking on the link will navigate to that page to view the specific details.

  • Delete record: This option will include a link to delete a record. When the user clicks on the link, they will be prompted to confirm the deletion. Upon confirming the deletion, the record will be permanently removed from the application.

  • Link to another page: You can utilize an existing page by linking to it, saving time and effort. For instance, if you already have a detailed scene showcasing contact record information, you can simply link to that scene instead of recreating it.

  • Trigger an action: This option allows you to add a link that will initiate an action, such as updating a record, updating a connected record, inserting a connected record, or sending a custom email. 

Tip: To learn more about Action Links, see this article here.   

detailsviews11

Adding Static Elements

Furthermore, you have the option to incorporate static elements into your Details view, such as additional titles, descriptive text, and dividers. These elements are useful for providing additional context and enhancing the overall presentation of your Details view.

  • Title/Copy: This option allows you to include a section to showcase additional text content, serving as either a section title or description.

  • Divider: This feature allows you to add a divider in the details view wherever you want, which is ideal for visually separating different sections of your details view.

detailsview12

Display Rules

Within the Rules section of the editor, you have the capability to incorporate display rules that allow you to hide or show fields based on specific criteria.

To add new rules, simply click on the "+ Add Rule" button. If you want to remove rules, click on the trash can icon on the top right corner of the existing rule.

detailsviews13

Each rule consists of an "If" condition and a "Then" action, which allows you to define how the rule functions.

  • If: The condition that triggers the rule.

  • Then: The action taken by the rule includes showing, hiding, or renaming the label.

    • If you opt for the "Rename label" option, you will be able to select a field in the view and then enter a new label for that field.

Tip: Learn more about using display rules here in this article