Is that possible to create a custom component with user defined type in Strapi v4?

user_3103795 0
Viewed 628

I am new to strapi and trying to create a custom component to render some HTML check-boxes based on an API response from another system. Basically the list of check-boxes will be added to a form (which is another strapi component). So far what I've done is

  • Added a Strapi plugin based on this document: https://strapi.io/blog/how-to-create-a-strapi-v4-plugin
  • Added a react component within the plugin (/src/plugins/CheckboxList/admin/src/components/CheckboxList). Though the end goal is to get the check box list, for test purpose a text input field is added.
  • Registered the component with
app.addFields([
  {
   type: "checkbox_list",
   Component: CheckboxList,
  },
]);

method in (/src/plugins/CheckboxList/admin/src/index.js)

  • Added the component in an existing component called field by the following snippet:
// in field.json
"checkbox_list": {
   "type": "checkbox_list",
   "columnType": "longText"
}

Currently the text box is visible in Collection from content manager on strapi admin and also based on my inspection the updated data in the text box is also passed to the react props. However, I don't the see the data is getting saved in the strapi platform. Am I missing something or doing something wrong? or Its not really possible to create a custom component in strapi v4 that inserts data in custom fields?

Need help on this. Thanks in advance.

strapi reactjs javascript
1 Answers

Before waiting for the official release of the custom field plan ( https://github.com/strapi/rfcs/pull/42). You can refer to youtube example provided by strapi (https://www.youtube.com/watch?v=55KJ2sCX8ws). Or you can find code example in (https://github.com/samMeow/strapi-v4-custom-field-example)

Basic idea is to register your field as v3, but you have to also make use of predefined Hooks (not much detail in official documentation) to mutate the edit view. Such that strapi BE is still saving as columnType but render differently.

For example, in you case, you can have checkbox_list as longtext type, and add some recognisable parameters like pluginOptions.columnType as checkbox_list. Then in MutateEditViewLayout phase, pick those parameters and mutate it as checkbox_list type.

user_35048360
Related