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.
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.
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.
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.
Render raw mode or pretty mode
If your data source has JSON that you want to display in Raw Mode or Pretty Mode, you can now switch between the views in a Detail component by clicking on the ellipses next to the value you'd like to see. You can also copy the JSON to your clipboard.
Configuring your detail component
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.
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.
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:
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.
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.
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.
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.
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.
You can create visibility rules that will determine when this component is visible and able to be interacted with.
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.