How to add style options to enums

**bandtank** · 2026-10-30T23:04:59+00:00

I am trying to figure out how to add style options. Espo comes with a few: danger, warning, success, etc. The options work fine, but in a few cases it would be greatly beneficial to add one or two more. I can't figure out how to do it.

Background. This question has been asked many times, but there has never been a working answer posted to the forums, github, or anywhere else. Here is one example.

I tried to add a new style called orange to enum fields and panels. My code is shown below (it doesn't work):

custom/Espo/Custom/Resources/i18n/en_US/LayoutManager.json

Code:

{
    "options": {
        "style": {
            "default": "Gray",
            "success": "Green",
            "danger": "Red",
            "info": "Purple",
            "warning": "Yellow",
            "primary": "Blue",
            "orange": "Orange"
        }
    }
}

custom/Espo/Custom/Resources/metadata/app/client.json

Code:

{
  "scriptMap": {
    "views/admin/field-manager/fields/options-with-style": "custom:views/admin/field-manager/fields/options-with-style"
  },
  "cssList": [
    "__APPEND__",
    "client/custom/css/custom.css"
  ]
}

client/custom/res/src/views/admin/field-manager/fields/options-with-style.js

Code:

define('custom:views/admin/field-manager/fields/options-with-style', ['views/admin/field-manager/fields/options-with-style'], function (Dep) {

  return class extends Dep {

    setup() {
      super.setup();

      if (this.styleList && !this.styleList.includes('orange')) {
        this.styleList.push('orange');
      }
    }

  };
});

client/custom/css/custom.css

Code:

/* Custom Orange Panel Theme Colors */
.panel-orange {
    --panel-default-border: #d35400;       /* Dark orange border */
    --panel-default-heading-bg: #e67e22;   /* Main Orange Header background */
    --panel-default-heading-color: #ffffff;/* White text color */

    border-color: var(--panel-default-border);
}

.panel-orange > .panel-heading {
    background-color: var(--panel-default-heading-bg);
    border-color: var(--panel-default-border);
    color: var(--panel-default-heading-color);
}

/* Color style helper for options listing */
.text-orange {
  color: #e67e22 !important;
}

client/custom/src/views/admin/layouts/detail.js

Code:

define('custom:views/admin/layouts/detail', ['views/admin/layouts/detail'], function (Dep) {

    return Dep.extend({

        panelDataAttributesDefs: {
            style: {
                type: 'enum',
                options: [
                    'default',
                    'success',
                    'danger',
                    'warning',
                    'primary',
                    'info',
                    'orange'
                ],
                style: {
                    'info': 'info',
                    'success': 'success',
                    'danger': 'danger',
                    'warning': 'warning',
                    'primary': 'primary',
                    'orange': 'orange'
                },
                default: 'default',
                translation: 'LayoutManager.options.style',
                tooltip: 'panelStyle',
            },
        }

    });
});

custom/Espo/Custom/Resources/metadata/client/views.json

Code:

{
  "admin/layouts/detail": "custom:views/admin/layouts/detail"
}

There is no mention of orange or Orange in any part of the GUI. It would be even better to have the ability to rename the styles in the backend because primary, info, etc. are hard to remember. I would much rather be able to use green, blue, purple, etc.