Display widgets

This page walks you through all available display widgets settings.

For an introduction on what widgets are and a comprehensive list of what widgets you'll be able to choose from, check out the previous page: Customize your fields

Text

This is the most basic way to display your content (depending on your field type). If you want to take into account text formatting, check out the next section.

Formatted text

This widget is still under development and will be available at a later date.

Your content - whether it be Markdown or HTML - will be be automatically detected and displayed accordingly.

Note that in the Table view, only bold, italic and links are supported.

Badge

A badge is a colored rectangle which surrounds your content to make it more visible.

You can customize your badges by choosing between 2 color modes:

  • Auto: Colors are automatically assigned using a circular rotation between 12 colors.

  • Custom: You set which color is used for each content.

In Custom mode, unassigned contents will not appear as a badge, unless you have a Default.

Conditional formatting

​🚧 This widget isn't available yet.🚧 It will allow you to:

  • Forbid negative numbers

  • Limit the number

  • Allow you to display a currency symbol

Number

🚧 This widget isn't available yet.🚧 It will allow you to:

  • Control number formatting

  • Use a prefix/suffix symbol

  • Apply conditional formatting

Date

With this widget, you can control how your dates will be displayed:

To customize your date format, use momentjs syntax:

File viewer

This widget is your go-to widget for viewing files of all types.

Previews are only available for images and PDFs.

Images

Images can be previewed from all views. Click on them to display the following modal:

From this modal, you can:

  • Click to zoom

  • Scroll to zoom in

  • Drag & drop your zoomed-in area

The File viewer widget will also act as a carousel when viewing multiple images or files. In this case, your field must be defined as an array of strings (type: ['String']).

Your images need to be public to be displayed! If you must keep them private, you should consider using signed URLs.

PDFs

From the table view, clicking on the file icon will open the PDF in a new tab.

From the summary and details views, the PDF can be previewed:

If your PDF seems to be loading indefinitely, it might be protected (you'll see a Load denied by X-Frame-Options error in your console).

This can be solved by adding

X-Frame-Options: ALLOW-FROM https://app.forestadmin.com/

in your file hosting server (replace https://app.forestadmin.com by your custom domain if you have one).

Settings

In this widget's settings, you can manage whether to authorize rotation and zoom features, add a prefix and change the preview size.

Prefix

Use this option to specify a URL prefix or path prefix depending on your usage. For instance:

  • If you store your files on an external cloud (ie: AWS S3) and in your database as a filename, your prefix will be a link like this:

  • If you store your images in base64, you could find it convenient to add a data:image/png;base64 prefix on the go:

Preview size

Choosing a preview size will show your image or PDF in the following sizes:

Small (max-height: 150px)
Medium (max-height: 400px)
Large (max-height: 1000px)

Custom allows you to specify a precise height and width in pixels.

Select this widget if your content is actually URLs.

Links will always open in a new tab.

Note that if your content is not a valid url, it will still be clickable but simply show a blank page.

Map

Select this widget if you want to visualize a point coordinates on a map.

Coordinates format must be: - 48.8566, 2.3522 - 48.8566° N, 2.3522° E

JSON

Use this widget to neatly display your JSON.

If you need to distinctly show some info from your JSON field, follow this How-to tutorial.

Color sample

🚧 This widget is still in the Edit settings and will be migrated to the Display settings.🚧