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.
​
​

How to's - Previous

Link to record info in a smart view

Next - How to's

Upload files to AWS S3

Last modified 1yr ago

Copy link

Contents