Components

Learn how to use components to customize your app

Components are the building blocks of Noloco. They can be added to Record Pages and Blank Pages to truly 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.

Supported Components

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.

• Collection Adds a list or table of records that can be related to the page's record when on a Record Page. This can be very useful for displaying related records, such as the Tasks on a Project.

• 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

• Chart Add a chart group to your page that can be powered by the related data Read more about Charts

• Action Buttons Add a group of action buttons to quickly take action on the data on the page. Read more about Action Buttons

• 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

Configuring Components

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

• Actions Some components, such as the Title, Action Buttons, or Details section allow you to configure Action Buttons on the component

• Visibility rules Configure whether the component should be visible at all times, or dependant on page values, or user role. Read more. Visibility rules are present on all components.

Adding a component

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.

Moving Components

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.

Removing Component

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.