October 16, 2022

Using Forest Admin: smart field display

Written By

Emily Kral

Read time

4 minute

A smooth and efficient database is a great thing to have in an organisation, and one that will grow as the organisation does. However, one problem with large databases is that a table full of records is not necessarily the easiest thing to interpret at a glance. There are also always things that are useful to be able to easily see that are not always immediately available (e.g. details from a related table in the database).

One way that Forest Admin works to solve this is allowing a summary view of the table to display your records in a clean and organised way. It also allows you to create custom fields to show data that may not be explicitly stored in the database but still useful to easily be able to see.

Summaries

To start creating a summary, simply click into any record on your table, in the toolbar click into the ‘Summary’ and then click ‘Enable this feature’. You will be presented with an empty summary. Next, click on ‘Edit layout’ to enter the editor view and start creating your summary.

Data in your summary must be put into sections. You can drag a new section into the summary from the ‘formatting’ dropdown on the left of the page. You can then drag in any fields that you want displayed from the ‘fields’ dropdown (which will contain all the fields in your table), as well as rename and resize the section however you like.

You can easily create as many sections as you need, and are also able to display related data in the summary as well. This allows you to create a very customisable view of the records in your table.

However, some of the data that is stored in this table is not the most useful at a glance. For example, the classification of the Pokemon links to the classification table, but it would be very useful to be able to see the classification name in the summary without having to manually check which classification has an id of 1. Or say you wanted to be able to see a picture of the Pokemon in the summary and this was not something you had stored in your database. This is where smart fields can be extremely useful.

Smart Fields

A smart field is a field that exists solely within the Forest Admin console. It is not stored in your database, but can be very useful for displaying extra data.

To create a smart field, you need to edit the collection for that particular model. So in this example, you would go into the file forest/pokemon.js which should initially contain three empty arrays:

collection('pokemon', {
  actions: [],
  fields: [],
  segments: [],
});

To add a smart field, simply add an object to the fields array. This object will describe the smart field and must have the keys field which will be the name of the field, and type which describes the data type of the field. The object will also need a get method that returns the data the field will be displaying.

Simple smart field

The most basic kind of smart field just takes data from the existing record, manipulates it slightly, and returns it. For example, if you wanted to see how much combined attack and sp attack a Pokemon had, you could create a smart field that shows those two numbers added together. This would look something like the following:

fields: [	
	{
	  field: 'Total attack',
	  type: 'Number',
	  get: pokemon => pokemon.attack + pokemon.spAttack,
	},
],

Now after restarting the Forest Admin console, you can see a new field has been created at the end of the table with the total attack of the Pokemon. To display this new field in the summary, open the summary editor and drag your new field to wherever you would like it to be displayed.

Using images

To add an image from an api to your summary, you can create a smart field that returns the link to an api containing the image you want to display.

{
  field: 'Image',
  type: 'String',
  get: pokemon =>
	  `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`,
},

This smart field will now appear on the Pokemon table. To show it as an image rather than the url string, simply change the display settings of the field to ‘File Viewer’ and an image thumbnail will appear in the table as well as when you put the field in a summary.

Using data from other tables

You can also make smart fields to handle and display more complex data. For example, if you wanted to be able to see the name of the classification, rather than just the id, you can use a sequelize query to get that information from the classification table and display it in the smart field.

To do this, first import the models into the collections file

const models = require('../models');

Then, using an asynchronous get function and the built in findByPk function, you can find the record for the relevant classification and return the name of it.

{
  field: 'Classification name',
  type: 'String',
  get: async pokemon => {
    const classification = await models.classification.findByPk(
			pokemon.classification.id
		);
    return classification.classification;
  },
},

There is now a field called ‘Classification name’ that can be used to make your summary more readable.

In conclusion

Forest Admin’s summary and smart field features can be combined together to create a much more easily accessible way to present your data. They allow you to really easily create a very customisable view of any important information you might want to be able to know at a glance. This has really just been the tip of the iceberg though, there are many more ways to use smart fields to display information, for example, using HTML to create a custom look for the smart field, or being able to sort and filter by a smart field. To find out more, check out the documentation, and enjoy!