Woodshop
Search…
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.
movies.js
movie-characteristics.js
1
module.exports = (sequelize, DataTypes) => {
2
const { Sequelize } = sequelize;
3
4
const Movies = sequelize.define('movies', {
5
title: {
6
type: DataTypes.STRING,
7
},
8
releaseYear: {
9
type: DataTypes.INTEGER,
10
},
11
rating: {
12
type: DataTypes.INTEGER,
13
},
14
picture: {
15
type: DataTypes.STRING,
16
},
17
academyAward: {
18
type: DataTypes.BOOLEAN,
19
},
20
}, {
21
tableName: 'movies',
22
underscored: true,
23
timestamps: false,
24
schema: process.env.DATABASE_SCHEMA,
25
});
26
27
Movies.associate = (models) => {
28
Movies.hasOne(models.movieCharacteristics, {
29
foreignKey: {
30
name: 'movieIdKey',
31
field: 'movie_id',
32
},
33
as: 'movieCharacteristic',
34
});
35
};
36
37
return Movies;
38
};
39
Copied!
1
module.exports = (sequelize, DataTypes) => {
2
const { Sequelize } = sequelize;
3
4
const MovieCharacteristics = sequelize.define('movieCharacteristics', {
5
language: {
6
type: DataTypes.BOOLEAN,
7
},
8
graphicViolence: {
9
type: DataTypes.BOOLEAN,
10
},
11
nudity: {
12
type: DataTypes.BOOLEAN,
13
},
14
drugs: {
15
type: DataTypes.BOOLEAN,
16
},
17
gore: {
18
type: DataTypes.BOOLEAN,
19
},
20
}, {
21
tableName: 'movie_characteristics',
22
underscored: true,
23
timestamps: false,
24
schema: process.env.DATABASE_SCHEMA,
25
});
26
27
MovieCharacteristics.associate = (models) => {
28
MovieCharacteristics.belongsTo(models.movies, {
29
foreignKey: {
30
name: 'movieIdKey',
31
field: 'movie_id',
32
},
33
as: 'movie',
34
});
35
};
36
37
return MovieCharacteristics;
38
};
39
Copied!

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.
/forest/programs.js
1
const { collection } = require('forest-express-sequelize');
2
const sequelize = require('sequelize');
3
const models = require('../models');
4
5
collection('movies', {
6
fields: [
7
{
8
field: 'characteristics',
9
type: 'String',
10
get: (movie) => {
11
// check if the movie has a related characteristics record to return smtg or not
12
if (movie.movieCharacteristic) {
13
// list all your fields from the movieCharacteristics collection you want to display
14
const characteristicsNameList = ['language', 'gore', 'drugs', 'graphicViolence', 'nudity'];
15
// create empty string which will be filled with a div per field listed above - this string will be the value returned
16
let characteristicsList = '';
17
// add style that will be used to display the movie_characteristics info
18
const characteristicsDivStyle = 'margin: 24px 0px; color: #415574';
19
const characteristicsNameStyle = 'padding: 6px 16px; margin: 12px; background-color:#b5c8d05e; border-radius: 6px';
20
const characteristicsValueStyleRed = 'padding: 6px 12px; background-color:#ff7f7f87; border-radius: 6px';
21
const characteristicsValueStyleGreen = 'padding: 6px 12px; background-color:#7FFF7F; border-radius: 6px';
22
// iterate over the list of movie characteristics fields
23
for (index = 0; index < characteristicsNameList.length; index++) {
24
const fieldName = characteristicsNameList[index];
25
// check if the value of the field is 0 or 1 to add the relevant style (default is 0)
26
let characteristicsValueStyle = characteristicsValueStyleRed;
27
if (movie.movieCharacteristic[fieldName] === true) {
28
characteristicsValueStyle = characteristicsValueStyleGreen;
29
}
30
// insert the div with the field info to the string that will be returned
31
characteristicsList += `<div style="${characteristicsDivStyle}">
32
<span style="${characteristicsNameStyle}">${fieldName}</span>
33
<span style="${characteristicsValueStyle}">${movie.movieCharacteristic[fieldName]}</span>
34
</div>`;
35
}
36
return characteristicsList;
37
}
38
},
39
}
40
});
41
Copied!
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 modified 1yr ago