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

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;
};

movie-characteristics.js

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

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.