Build UI
Discover how to utilize components to build your app's user interface
Last updated
Discover how to utilize components to build your app's user interface
Last updated
Components are prebuilt UI elements your users engage in, such as Tables, Forms, Buttons. In this example, only a limited number of components are used; you can explore 50+ Components in the UI Component Library. Drag-and-drop components within Layout Columns, Tabs, and Modals, facilitating the building of your app.
You'll be building an app that enables the creation and updating of Deals data. To enable this functionality, you'll add Table, Forms, and Modals. Learn more about Jet UI Concept in our documentation. Additionally, if you want to implement this functionality swiftly (Create, Update, Delete flow), you can generate it in seconds using Page Templates.
Columns are used to set the horizontal component of the layout. You can add multiple columns and resize them.
When you select the Table component, the right panel automatically updates to display the properties of the component. Components come with a wide range of properties that you can configure. Properties are accessible from other components and queries, allowing for a more integrated and dynamic user interface experience.
Click Data Source – Jet Tables and the Deals collection that you've created.
Modify the Logo column to have a circular frame and position it as the first column.
Component Binding allows the passing of values between components. In this case, we will bind the Table and Filter components, enabling users to filter Deals by criteria such as Name, Priority, and Amount.
The final component to add is a Form component. This component will allow you to generate Forms automatically based on your Collections fields.
Every field in the Form is individually configurable: you can add or remove fields from the Form, alter the field type, rearrange the order of the fields, and change appearance.
To update a deal, the user must select the corresponding row in the Table. You can configure the first row to be selected by default in a Table. To do this, go to the Display tab in the Table properties and choose Select the first row by default.