Display widgets
Last updated
Last updated
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
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.
In Forest Admin, your ability to manage your data extends to customizing how dates and times are displayed in your interface. This is particularly useful when standard date formats don't fit your needs or you want to provide a more locale-specific representation.
We utilize Moment.js, a powerful tool that provides a simple way to format dates and times. You don't need to understand programming or the ins and outs of Moment.js to make use of it. It's as easy as entering a combination of special tokens into the date format field in the Forest Admin UI.
For instance, if you want to display your dates in a full descriptive format like "Wednesday, May 10th 2023, 8:02:17 am", you would enter the format string "dddd, MMMM Do YYYY, h:mm:ss a" directly into the date format field.
With this widget, you can control how your dates will be displayed:
To customize your date format, use Moment.js syntax:
Here's what each token represents:
"M" => Returns "5" - representing the current month
"Mo" => Returns "5th" - the current month in ordinal form
"MM" => Returns "05" - the current month with a leading zero
"MMM" => Returns "May" - the shorthand name of the current month
"MMMM" => Returns "May" - the full name of the current month
"Q" => Returns "2" - the current quarter of the year
"Qo" => Returns "2nd" - the current quarter in ordinal form
"D" => Returns "10" - the current day of the month
"Do" => Returns "10th" - the current day in ordinal form
"DD" => Returns "10" - the current day with a leading zero
"ddd" => Returns "Wed" - the shorthand name of the current day of the week
"dddd" => Returns "Wednesday" - the full name of the current day of the week
"A" => Returns "AM" or "PM" - the current period of the day
"a" => Returns "am" or "pm" - the current period of the day in lowercase
"H" => Returns "8" - the current hour in 24-hour format
"HH" => Returns "08" - the current hour with a leading zero
"h" => Returns "8" - the current hour in 12-hour format
"hh" => Returns "08" - the current hour in 12-hour format with a leading zero
"m" => Returns "2" - the current minute
"mm" => Returns "02" - the current minute with a leading zero
"s" => Returns "17" - the current second
"ss" => Returns "17" - the current second with a leading zero
"S" => Returns "0" - the first fractional second (if any)
"Z" => Returns "-05:00" - the offset from UTC
"ZZ" => Returns "-0500" - the offset from UTC without a colon separator
"X" => Returns a Unix timestamp (the number of seconds that have elapsed since 01 January, 1970 UTC)
By using these tokens, you can have complete control over how dates and times are presented, making it easier and more intuitive to read and interpret your data in Forest Admin.
Here are five examples of various date and time formatting possibilities in Forest Admin:
"Do MMM, YYYY"
This will return the date in a format like "10th May, 2023". It uses the day of the month in ordinal form, the shorthand name of the month, a comma, and the full year.
"dddd, hA"
This will return something like "Wednesday, 8AM". It's a simple format that includes the full name of the day of the week, followed by the hour in 12-hour format and the period of the day in uppercase.
"YYYY-MM-DD HH:mm"
This format will provide a date and time like "2023-05-10 08:02". It's a standard and commonly used format, especially in data storage and technical applications. It includes the full year, the month and day with leading zeros, and the hour and minute in 24-hour format with leading zeros.
"MMM Do, h:mm a"
This format will return "May 10th, 8:02 am". It uses the shorthand name of the month, the day in ordinal form, and the hour and minute in 12-hour format with the period of the day in lowercase.
"Qo quarter, YYYY"
This will return something like "2nd quarter, 2023". It's an interesting format that shows the current quarter in ordinal form and the full year. This could be useful for financial or business applications where data is often considered on a quarterly basis.
This widget allows you to display a number as a nicely formatted price:
Choose a currency symbol between euros (EUR), dollars (USD) and pounds (GBP)
Choose a base: Cents if your values are stored in cents, Unit otherwise
The number formatting is based on your browser's locale, unless you have a specific locale set in your Project settings.
This widget is useful to display a number (ranged between 0 and 1) as a percentage.
Without using the percentage widget:
Using the percentage widget:
If you manually search for a percentage value, you should type the unformatted value, as shown below.
This widget is your go-to widget for viewing files of all types.
Previews are only available for images and PDFs with a maximum size of 1.5 MB.
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.
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).
In this widget's settings, you can manage whether to authorize rotation and zoom features, add a prefix and change the preview size.
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:
Choosing a preview size will show your image or PDF in the following sizes:
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. You can also choose to display a title instead of the link.
Select this widget if you want to visualize a point coordinates on a map.
Use this widget to display numbers. It can be configured to show a specific number of decimal places, between 0 and 20
Use this widget to neatly display your JSON.
Use this display widget with the User dropdown edit widget for optimal results.
This widget detects emails of existing Forest Admin users of your project and displays their profile picture:
Here are the possible cases:
(1) : the user belongs to the project. The profile picture is composed of his initials.
(2) : the user belongs to the project and has a gravatar.
(3) : the field is empty. Notice that you may assign it simply by clicking on it.
(4) : the user doesn't belong to this project.
Notice that you may assign multiple users if your field is an array of emails:
At any time, you may display additional information on the user by hovering the profile picture.
Coordinates format must be: - 48.8566, 2.3522 - 48.8566° N, 2.3522° E
