Add an HTML credit card as a smart field in a summary view

Please be sure of your agent type and version and pick the right documentation accordingly.

This is the documentation of the forest-express-sequelize and forest-express-mongoose Node.js agents that will soon reach end-of-support.

forest-express-sequelize v9 and forest-express-mongoose v9 are replaced by @forestadmin/agent v1.

Please check your agent type and version and read on or switch to the right documentation.

Add an HTML credit card as a smart field in a summary view

Context: As a user I want to display the credit card infos of a client in a nice and visual way


const { collection } = require('forest-express-sequelize');
const { companies, documents } = require('../models');

// This file allows you to add to your Forest UI:
// - Smart actions: <>
// - Smart fields: <>
// - Smart relationships: <>
// - Smart segments: <>
collection('companies', {
  actions: [],
  fields: [
      field: 'Creditcard',
      type: 'String',
      get: (company) => {
        if (company.creditCard) {
          return `<div class="card-wrapper">
              <div class="card-container" style="font-size: 14px; border-radius: 10px; width: 250px; height: 140px; background-color: #444857; color: white; padding: 10px">
                <div class="card-number-container" style="margin-top: 5px">
                    <div class="card-info-title" style="color: #9399af; ">card number</div>
                    <div class="card-info-value" style="font-size: 12px">${company.creditCard.card_number
                      .join(' ')}</div>
                <div class="card-name-date-container" style= "display: flex; margin-top: 20px">
                  <div class="card-name-container">
                    <div class="card-info-title" style="color: #9399af; ">card holder</div>
                    <div class="card-info-value" style="font-size: 12px">${
                        ? company.creditCard.card_holder
                  <div class="card-date-container" style="margin: auto">
                    <div class="card-info-title" style="color: #9399af; ">expires at</div>
                    <div class="card-info-value" style="font-size: 12px">${
  segments: [],

Use the rich text editor widget in order to interpret HTML in your field.

Last updated