Comment on page
Learn how to use components to customize your app
Components display and let your app's users interact with data in different and powerful ways.
For example, the Collection component can show multiple data records, in different layout styles, like Table, Kanban Board, Cards, while other components like the Stages will only display one field value at a time.
You can see which components are visible on your page, add new components and manage their order from the left side of the Build Mode Sidebar.
To edit a component switch on Build Mode and then simply click the component you want to edit - this will open the Build Mode Sidebar for that component.
Noloco supports a wide range of components that can help you display and edit your app's data with ease.
- Title Add a title, subtitle or some action buttons to your page. The title component is very useful for adding context to other components on the page. The subtitle field supports Markdown which allows you to get very flexible with the styling and content of your title
- Details Add record fields to your page to display and update your data. Perhaps the most versatile component, the Details component presents you with a list of fields that you can display and customize individually. The details block can also let your users edit the field values by enabling inline editing on a field.
- Highlights Adds a card that highlights your selected fields. Highlights allow you to present the most important information in a larger format. Note that fields in the highlight component are not editable.
- Video Adds a video element to your page that can be powered by a file field or a custom URL
- Iframe Embed an iframe on your app's page, where the iframe URL is powered by a field or a custom URL
- Stages Display a Single Option field's value in a stages element, useful for things like Project status's or a lead's status
- Quick Links Add a visually appealing set of links to link your app's users to specific parts of the app, or to external links like your companies support page
- Text Similar to the Title component, the Text component adds a markdown compatible text block to your page that you can customise with dynamic values.
- File Gallery Showcase a file field on your page, for single files it just shows the file, for multiple files it allows your users to browse through the files.
- Divider Add a divider to your page to break sections up into logical groups
The configuration options of your component will depend on what component you are customizing. Generally, most components have some or all of the following setting groups:
- Data Control which data is shown or used in your components
To add a component, make sure Build Mode is enabled. On the page you want to add a component, there should be a dotted outlined box with all of the components that you can add to the page. Simply choose the component you want, and it will be added to the page. If you don't see this box, then you are either on a Collection View or you are not in Build Mode.
You can re-order the components on a page from either the Build Mode Sidebar or by dragging and dropping the components into a new order using the drag handle of the selected components.
When you delete a component, they don't affect the data in your app. It just deletes the component that was showing that data. You can use Command Z (Mac) or Control Z (PC) to undo any of your actions at any time, including deleting a component. To delete a component simply use the Trash can icon on the selected component.