How to customize custom components in strapi to be able to specify and see advanced options in this tab, and set additional settings?

System Information
  • Strapi Version: 4.11.7
  • Operating System: Macos
  • Database: -
  • Node Version: 16/18
  • NPM Version: -
  • Yarn Version: -

I create a custom field in strapi and it works as I need, but I have not found anywhere examples of its extension when I select it, i.e. by default it is a simple Input without any advanced settings, but how to extend it?

For example I want to add a checkbox required in the advanced field and also a select under the field name with select options.



Here is how my code looks like:

admin/index.js

    // Start of the custom field registration
    app.customFields.register({
      name: "reactpage",
      pluginId: "react-page",
      type: "string",
      intlLabel: {
        id: "react-page.reactpage.label",
        defaultMessage: "React Page",
      },
      intlDescription: {
        id: "react-page.reactpage.description",
        defaultMessage: "Set of components for different contents",
      },
      icon: InfoFieldIcon, // below in the article the code of that component
      components: {
        Input: async () => import("./components/Wysiwyg"), // below in the article the code of that component,
      },
      options: {
      },
    });
    // End of the custom field registration
    app.registerPlugin({
      id: pluginId,
      initializer: Initializer,
      isReady: false,
      name,
    });
  },

server/register.js

"use strict";

module.exports = ({ strapi }) => {
  strapi.customFields.register({
    name: "reactpage",
    plugin: "react-page",
    type: "string", 
  });
};

For now in order to pass additional context/settings to component I need to do it manually like this

   "content": {
      "type": "customField",
      "customField": "plugin::react-page.reactpage",
      "preset": "news"
    }

so I want to move adding preset and another needed setting to UI.

I suppose it should be something like

options: {
        advanced: [
          {
            id:  ?,
            name: ?,
          },
        ],
      },

but I don’t see any examples in documentation(

Probably will be usefull, I find this repo with example https://github.com/strapi/strapi/blob/main/packages/plugins/color-picker/admin/src/index.js