Adding widgets to your record detail page

A page widget in Stacker is a component that you can add to a page. You can use widgets to add banners, to pull in related lists or to add external content via an embed.

Widgets give you the flexibility to control the content and design of your app pages.

Page Widgets

Adding different widgets to your detail page layout enables you to display your data in a range of ways. You can drag and drop as many widgets as you like and even spread them across different tabs.

Fields

Decide which fields you want to display in your layout.

  • When you go to edit the layout, there will already be a default fields container widget in there. You can go ahead and delete this if you want to start fresh.
  • Drag over a field widget to add it into the layout.
  • You can then toggle on the fields that you wish to show.
  • Edit the field settings you have selected by hovering over the field until a ✏️ pencil icon appears - here you can choose to edit or hide the label, you can choose to add a description to the field (the description will not show until the user edits the page.
Field Container in a Stacker app

Depending on the field you will see three field settings:

  • Display as full-width - Increases the size of the field and pushes any other information down to another line.
  • Required - When this field is checked, this information needs to be filled in to save an edit of the record.
  • Treat as URL - You can choose to treat fields as url, letting users easily click to another page. You can then choose to display your URL as an image or as a button.
  • You can use sections to split your fields into clear segments for your users. Sections can be given a label and description - you can do this by clicking on the pencil icon for that section.
  • You can add multiple fields widgets in order to use 'conditional visibility' to show or hide sections based on  conditions of the record or who's viewing the record.
  • To apply conditional visibility, press on the eye icon at the top of the edit layout bar for a given field widget.

Highlights

Make certain fields stand out by using a highlight container widget:

  • Drag a highlight widget to your detail page and select which field(s) you would like to include. You can either display one or multiple fields in a single highlight container and they will adjust in size to allow this.
You can choose to display URL fields as a button on a highlight.

The idea behind the highlights widget is to add at-a-glance information for your users: it's not editable by you or your users and it doesn't support long text, checkbox, multi select, attachments or link fields.

Banner

Display fixed content with a heading, description and add a button if needed.

You can drag in a banner widget to your layout to add some fixed content directly in Stacker.

The banner widget is a great way to give users explanations and instructions, as well as link to external resources.

Banners support markdown text so you have some added flexibility in how the text you add is displayed.

Record List

Display a list of records from a linked table.

  1. You can use the record list widget to display records from another table. First select which table you would like to pull records from.
  2. Select whether you'd like the record list to show all records in the chosen table or only the related records i.e. those that are linked to the current record.
  3. If you select to include only related records, select which field to use.
  4. Finally, can choose the layout for the record list. The 'Layout' dropdown lists all of the available views.

Optionally, you can change the title and allow creating new linked records from the list.

⚠️ If you are unable to select a 'Field' option, confirm that 'Allow linking to multiple records' is switched on in the linked record field in your Airtable base.

If you'd like to customize the design or columns that appear in the list, you can do this by editing the list layout you have selected.

Embed

🪄 This is where you can really get creative with your Stacker app. The embed feature allows you to add external content into your layout.

The embed widget allows you to display content such as forms, graphs, PDFs and URLs on your layout.
  1. Drag an embed widget onto your layout.
  2. Choose the source for your embed. This can either be a URL from a field in your data source, or a fixed URL.
  3. Set the title and the height of the embed.
  4. You can read more about embedding content into your detail page layout here.

Next steps

Articles in this section