Comment on page
Detail page
A Detail Page is a specialized screen that offers comprehensive insights into a particular item from the collection page. Its primary purpose is to provide users with a detailed view of an item's attributes, characteristics, and features.
In this guide, we will guide you to learn how to build them with ease using Starion and gain valuable insights into the best practices.
The detail page is one of the Content Management System (CMS) pages in the app. Therefore, Starion automatically generates a default detail page for each of your data tables. Once you build your Collection page, the detail page is always ready.
To access the detail page linked with your data table, navigate to the CMS Pages category on the left sidebar of the App Editor. The detail page is named with the format " Name of the table it linked + Details" so you can know exactly which CMS detail page you are about to work with.
.jpg?alt=media&token=13d3892c-64cb-4f6f-998d-caf902b16e59)
Detail pages are composed of components that represent data from your data table columns. To add a component to your detail page, drag and drop it from the Library into the component box at the top of the page.
Drag-and-drop to add a components onto your detail page
The components fall into two categories: general components and control components. General components are read-only and display information such as charts, labels, and barcodes. Meanwhile, control components enable user interaction, allowing actions like button clicks or slider adjustments.
Explore all the components by scrolling through the library, or you can get even the preview and detailed guide to their settings here:
Click and drag the components to arrange them according to your preferences.
.gif?alt=media&token=8670a1c6-58d1-4a6d-ab4c-c881af763511)
Changing the orders of components to optimize the view on detail page based on your preferences
To remove a component, right-click on it within the component box and select "Delete".
However, you also have the option to temporarily hide components from the user's view. Just click the eye icon next to the component.
.jpg?alt=media&token=2c9e7960-a46d-4b95-a533-3fb7e7fab69c)
Last modified 1mo ago