After reading this article, you’ll know the following:
Major characteristics and options of the Detail view
How to use the Detail view components in your application
The difference between the Detail view and other data components
What are Detail view components?
Detail view component is essentially a specialized Box/Data container component designed to display detailed information about a specific model selected by the user. This selection typically occurs through a wizard interface or a similar selection mechanism within the application.
Detail view child component is a subordinate element used exclusively within the Detail view component. Its primary function is to display a single property of the model, providing a granular view of specific details.
Structure
Data container: The detail view component acts as a container that organizes and displays various pieces of information related to the selected model.
Drawer implementation: In Back office template, detail views commonly appear within drawers. Users can open these detail views by clicking on a record, triggering the drawer to slide out and reveal the detailed information.
Pop-up dialogs: Alternatively, detail views can also be displayed in pop-up dialogs, which overlay the current screen and provide focused details about the selected item. Let’s stop on this one for our use case.
Using Detail view components
As an example, we’ll have a dialog window to show employee details. The button will trigger the dialog window as we add interaction to it.
First, add the Dialog component to your page, and delete unnecessary components, like the Submit button and Text in the body.
2. We’ll use the Box in the middle of a dialog window to place the Detail view. When you drop the Detail view component on a page, you’ll have to follow the configuration wizard.
Set the number of columns from 1 to 3
Choose the model and properties
Save your configuration
3. Hide the Dialog by disabling Visible in builder button. Add the Button or another component, like Avatar to be used as a trigger to show the Dialog.
4. Head to its interactions menu and set in a way: ‘When I click the Avatar’, the Dialog component with our Detail view.
5. Compile your page to check how it looks in a runtime environment:
Detail view child options
As mentioned before, the Detail view component is just a combination of other components: Data container, Box, Row and Columns. But the child component in each (up to three) Columns is the Detail view child that has its own set of options:
When configuring the Detail view child component, several options allow for customization to effectively display the desired property of a model. Here’s a brief explanation of each option:
Property: select the specific property of the model to display in this detail view child. This connects the child component to the data it should present.
Label text: set a custom label for the property. This label appears next to the property value and helps identify the displayed information.
Type: choose the text type, which determines the style and hierarchy of the text:
Title (1-6): for headings, where 1 is the largest and 6 is the smallest.
Body (1-2): for regular text, with 1 being the default body text and 2 slightly smaller.
Text alignment: align the text within the component: left, right or centre
Outer Space: define the margin around the component: S, M, L, XL margins, or define the custom margin size by pressing the cogwheel.
Side by Side: tick this option to display the label and the property value next to each other horizontally.
Style: enable this to customize the text color and font weight, allowing for more control over the appearance of the text within the Detail view child component.
Detail view and other components
Detail view components differ from other data components like Data lists or Data tables.
Data lists provide a high-level overview of multiple items but lack depth for individual details. Detail views excel in offering comprehensive information about a specific record.
Data tables facilitate comparison across multiple records but can become cluttered with too much data. Detail views focus on one record at a time, presenting detailed information clearly and without clutter.
In conclusion, while Data lists and Data tables each have their uses, Detail view components are ideal for delivering detailed, organized information about individual records, enhancing the user experience with comprehensive data presentation