Get a detail view of a single record. The detail component lets you display data in a readable format. It's a common component for lookup tools and can also be bound to other components.

Ways to use a detail component

Add in-line actions or images

You can add functionality to your detail component or show an image within it. Detail components let you add buttons, pop-up forms, dynamic buttons, text, s3 uploaders, links and images.

Example:
The Users detail component in the below gif displays a profile image of the user. In addition, an “Update” pop-up form is embedded - clicking on this will let the user edit the data for this record.

‍

Show a record selected in another component

Since this component only displays one record, detail views are usually bound to a different component, like a table, that will determine which record is displayed in the detail view. Sometimes a detail component is bound to a filter component.

Example:
1) A user can type in a userID in a filter component. A detail component is bound to that filter and will show the data for the input userID.

2) When a user clicks on a row in the Users table, the detail component to the right displays additional information about that user, including a photo.

‍

‍

Provide data to other components

Components like a form, pop-up form, button or dynamic button can use the data in a detail component (from the current record shown) as inputs to their functions. A detail component can also influence what is shown in tables, card lists and other detail views through filters.

Example:
1) You have an “Activate” button that performs a custom function that requires a UserID. You bind the UserID button field to a Users detail view that is also in the space. When a user clicks “Activate”, it will use the UserID shown in the Users detail component as the value for the function.

2) You have a detail component showing Riders that is bound to another detail component, showing Rides. Whenever the Rides detail component changes (i.e., its filters determine a different Ride record should be shown) the Riders detail will display the associated Rider for each ride.

We'll cover a step-by-step guide to setting this up below.

‍

Display the results from the execution of a function

Detail components can also be bound to the results of a component (that is in the Space). This allows you to display the data that is being returned.

‍

Configuring your detail component

Source

First, choose how you'll populate the data in this detail view. Select "Function" and then the corresponding function you want to use (ie, "list users records"). Select "Binding" and then choose a component in the Space in order to have this detail component display its results.

Text

Give your component a name (used to reference this detail view within Internal. You can also customize the Detail Title - this text is displayed at the top of detail view component.

Fields

Here, you can add, hide, remove and rearrange fields within this detail component. Click a field to edit the display of these fields to add icons and pillboxes to your detail component.

You can also click "+" and click Components to insert inline buttons, dynamic buttons, pop-up forms, text, s3 uploaders, links and images within this detail component:

‍

Hidden Fields

If you don't want a user to see a data field, but still want to use its data in other components, click the eye icon to make it a hidden field. This means the field won’t be displayed in the detail view, but you can still use the data in the field as inputs for another component.

‍

Example: You make Created at a hidden field for your “User” detail view. You can then create a button that will use the Created at value from the current record in the detail view -- even though the user does not see the Created at field in the detail view.

‍

Parameters

In some cases, the Function you're using may require a parameter to be specified. For example, you may need to pass in an ID in order to retrieve the data and display it in the detail component. Click on the parameter to provide a value.

‍

Filters

Set filters to specify which record is shown in this detail component. Generally, the criteria should identify a single record. Click “+ ” to add your first filter.

Note: If more than one record fulfills the criteria, the first available matching record will be shown. You can add a dynamic filter that will allow users to uniquely identify a record.
If you expect there to be multiple results for a given filter, it may be better to use a table or card list component to display these results.

Each filter has a data field which is compared to a value. A preset filter compares against a fixed value, whereas a dynamic filter compares against data from another component. Dynamic filters are usually used with a detail component, as preset filters will show the same record in the detail view, which is not usually useful for a tool. In most cases, the easiest way to specify a single record is with a dynamic filter on the primary key.

‍

Example

Let's go through a 2-step example where we'll first bind a detail component to a filter component, and then bind a detail component to another detail component.

Let's say we're an on-demand company and we have a database table called Rides which has our rides data. We want to create a lookup tool that will show a single ride's data, and also show the associated rider.

‍

First, we'll add a filter component called RideInput - this is where the user will enter in the id value for the ride they want to lookup.

Next, we'll add in a detail component to display the Rides data. In the filters section, we'll bind this component to the filter component, matching the id field from the Rides table with what is input into the filter component:

We also want to show the rider that took this ride, so we add another detail component to display data from the Riders table. In the filters section, we'll bind this component to the first detail component (showing Rides), matching the id field from the Riders table with the Rider id from the Rides detail view:

Now these three components are bound together, so that when you enter in a ride id in to the filter component, you'll see the ride and rider details populate in the components below.

You can also bind a detail view to a table or card list. When a user selects a row in the table, the detail view will change.

Table: name of detail component -> data -> field

Card list: name of card list component -> data -> field

‍

Visibility Rules

You can create visibility rules that will determine when this component is visible and able to be interacted with.

‍

Design

Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).

Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.

‍

Width: Set the width of this component as a number of pixels or as a % of the containing unit.

Height: Set the height of this component as a number of pixels or as a % of the containing unit.

If the component is a top-level component, the containing unit is the Space canvas.

If the component is in-line within another component, the containing unit is the parent component.

If the component is within a flexbox component, the containing unit is the flexbox.

‍

Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.

‍