Display data in html format
This example shows you how to implement a smart field that displays HTML.

Here a Movie hasOne
movieCharacteristic.
On the movies
collection, we want to implement a smart field (called characteristics
) that will display all the characteristics of a movie.
Requirements
An admin backend running on forest-express-sequelize
How it works
Directory: /models
This directory contains the movies.js
and movie-characteristics.js
files where the models movies and movieCharacteristics are defined.
module.exports = (sequelize, DataTypes) => {
const { Sequelize } = sequelize;
const Movies = sequelize.define('movies', {
title: {
type: DataTypes.STRING,
},
releaseYear: {
type: DataTypes.INTEGER,
},
rating: {
type: DataTypes.INTEGER,
},
picture: {
type: DataTypes.STRING,
},
academyAward: {
type: DataTypes.BOOLEAN,
},
}, {
tableName: 'movies',
underscored: true,
timestamps: false,
schema: process.env.DATABASE_SCHEMA,
});
Movies.associate = (models) => {
Movies.hasOne(models.movieCharacteristics, {
foreignKey: {
name: 'movieIdKey',
field: 'movie_id',
},
as: 'movieCharacteristic',
});
};
return Movies;
};
Directory: /forest
This directory contains the movies.js
file where the smart field characteristics
is implemented. The smart field returns an html-formatted list of the movie characteristics as a string.
const { collection } = require('forest-express-sequelize');
const sequelize = require('sequelize');
const models = require('../models');
collection('movies', {
fields: [
{
field: 'characteristics',
type: 'String',
get: (movie) => {
// check if the movie has a related characteristics record to return smtg or not
if (movie.movieCharacteristic) {
// list all your fields from the movieCharacteristics collection you want to display
const characteristicsNameList = ['language', 'gore', 'drugs', 'graphicViolence', 'nudity'];
// create empty string which will be filled with a div per field listed above - this string will be the value returned
let characteristicsList = '';
// add style that will be used to display the movie_characteristics info
const characteristicsDivStyle = 'margin: 24px 0px; color: #415574';
const characteristicsNameStyle = 'padding: 6px 16px; margin: 12px; background-color:#b5c8d05e; border-radius: 6px';
const characteristicsValueStyleRed = 'padding: 6px 12px; background-color:#ff7f7f87; border-radius: 6px';
const characteristicsValueStyleGreen = 'padding: 6px 12px; background-color:#7FFF7F; border-radius: 6px';
// iterate over the list of movie characteristics fields
for (index = 0; index < characteristicsNameList.length; index++) {
const fieldName = characteristicsNameList[index];
// check if the value of the field is 0 or 1 to add the relevant style (default is 0)
let characteristicsValueStyle = characteristicsValueStyleRed;
if (movie.movieCharacteristic[fieldName] === true) {
characteristicsValueStyle = characteristicsValueStyleGreen;
}
// insert the div with the field info to the string that will be returned
characteristicsList += `<div style="${characteristicsDivStyle}">
<span style="${characteristicsNameStyle}">${fieldName}</span>
<span style="${characteristicsValueStyle}">${movie.movieCharacteristic[fieldName]}</span>
</div>`;
}
return characteristicsList;
}
},
}
});
You will need to select the rich text editor widget for this field in your collection settings to display the string returned by the smart field in html format.

Last updated
Was this helpful?