Custom labels for enum values. possible?

Questions and Answers
21

It’s already October 2023, and I see there was no solution for this yet, is there an update or something ? what is blocking this ?

22

Hi, everyone. There is no solution from Strapi at the moment. There are 2 ways to solve this problem. I don’t like both of them, but there’s no other

Custom field
It is possible to create a custom field. But there is a nuance here. We will not be able to create a custom field with the enumerable type. The reason is that when adding such a field to a content type, Strapi first checks the field being added, and for enumerable it checks for enum and defaultValue properties, which cannot be set via customFieldRegister.

So this solution can only be based on using string or json type. Which is not optimal because we are deprived of enum type and checks at the API level. How exactly to make such a field, you can look at other examples of how to prepare it. The logic itself will be based on the use of options. A good example is the multy-select custom field plugin.

Patch the generateOptions.js method
Not the most ideal, but a working solution. We’ll create a Map where we’ll write the <option, label> structure. Strapi has a generalized Inputs component that creates its own structure to display options, it contains a key, option and most importantly label, which we will substitute if it is found.

Solution for Strapi 14.12.0
Path: node_modules/@strapi/admin/admin/src/content-manager/components/Inputs/utils/generateOptions.js

// We define our map
const labels = new Map([["Color", "Колір"]]);

const generateOptions = (options, isRequired = false) => {
  return [
    {
      metadatas: {
        intlLabel: {
          id: "components.InputSelect.option.placeholder",
          defaultMessage: "Choose here",
        },
        disabled: isRequired,
        hidden: isRequired,
      },
      key: "__enum_option_null",
      value: "",
    },
    ...options.map((option) => {
     // On eeach option get label
      const label = labels.get(option);

      return {
        metadatas: {
         // Set founded label if it exists
          intlLabel: {
            id: label || option,
            defaultMessage: label || option,
          },
          hidden: false,
          disabled: false,
        },
        key: option,
        value: option,
      };
    }),
  ];
};

export default generateOptions;

That’s all after that you can use patch-package to commit the changes.

Solution for Strapi above 4.15.0 (Since now Strapi comes already compiled in mjs and js files)
Path: /node_modules/@strapi/admin/dist/_chunks

Need to find files index-3f8cf4d5.js and index-95e8649d.mjs.
Also, we can find the right location by searching for the string __enum_option_null.

Before the Inputs component, add your Map for example

const optionsLabelsMapFix = new Map([["Color", "Колір"]]);

And then next to __enum_option_null

    ...(fieldSchema.enum ?? []).map((option) => {
      const label = optionsLabelsMapFix.get(option)

      return {
        metadatas: {
          intlLabel: {
            id: label || option,
            defaultMessage: label || option
          },
          hidden: false,
          disabled: false
        },
        key: option,
        value: option
      };
    })

This needs to be done for both js and mjs files. After that, you need to keep an eye on Strapi changes for a possible update.

23

Did anyone manage to get this to work and could you help me understand this better please? This explanation is not very clear to me.