Custom Fields not showing in version 4.0.0

Community Packages Plugins
#1

OS: macOS Catalina Version 10.15.7
Database: Postgres
Strapi version: 4.0.0

Hello, I’ve been using custom fields in Strapi 3.x.x, today I upgraded project to Strapi 4.0 and custom fields stopped working, it just renders disabled input as shown on screenshot.

Back then I pretty much followed this guide

After Strapi upgrade I copied my plugins from ~/plugins into ~/src/plugins then changed ~/config/plugins.js config as:

module.exports = ({ env }) => ({
  // ...
  "line-items": {
    enabled: true,
    resolve: './src/plugins/line-items'
  }
  // ...
});

And in ~/src/api/order/content-types/order/schema.json I put:

"lineItems": {
      "type": "lineItems"
}

But no luck. Anyone has an idea what I’m missing? I tried new plugin via Strapi cli with just some “Hello World” rendering, but same result. Thank you for any help.

strapi-not-supported
strapi-not-supported1294×178 10.7 KB

Edit: I found out, that in plugins created via Strapi CLI there is no registerField function as it was in v 3.x.x where the field registration was done by: strapi.registerField({ type: "lineItems", Component: LineItems });. Where can I find this function?

#2

Figured out.

app.addFields({ type: 'lineItems', Component: MyComponent });`
#3

Were you able to make this approach work?
I use the addFields and added the field in schema.json like:

{
  ...
  "attributes": {
    ...
    "fieldName": {
      "type": "customType"
    }
    ...
  }
}

the UI works but later after save data is not being record in db and just getting null.

Even tried with

<Component value={value} onChange={value => onChange({ target: { name, value, type: 'string', } })} .../>
#4

Hey all, I just found this topic after posting this: Custom field interface for data entry - #3 by grafatim

Has anyone figured out how to get the SQL table to update to match the schema.json? The docs for this are non-existent and I’d love to help figure it out and then document!

#5

I have opened an issue for this, in case anyone is interested: Issue storing data from Custom Fields in v4.x · Issue #12145 · strapi/strapi · GitHub

#6

hi @xantiagoma have you solution for the problem you mentioned, I’m also facing same issue.
please let me know if you found solution

#7

Hi @Venkatesh_K
The workaround I’m using at the moment is patching the code with patch-package
my patches/@strapi+admin+4.1.11.patch looks something like this:

diff --git a/node_modules/@strapi/admin/admin/src/content-manager/components/Inputs/index.js b/node_modules/@strapi/admin/admin/src/content-manager/components/Inputs/index.js
index 15a75e8..33a0b4e 100644
--- a/node_modules/@strapi/admin/admin/src/content-manager/components/Inputs/index.js
+++ b/node_modules/@strapi/admin/admin/src/content-manager/components/Inputs/index.js
@@ -189,9 +189,9 @@ function Inputs({
         description={
           metadatas.description
             ? formatMessage({
-                id: metadatas.description,
-                defaultMessage: metadatas.description,
-              })
+              id: metadatas.description,
+              defaultMessage: metadatas.description,
+            })
             : undefined
         }
         intlLabel={{
@@ -205,9 +205,9 @@ function Inputs({
         placeholder={
           metadatas.placeholder
             ? {
-                id: metadatas.placeholder,
-                defaultMessage: metadatas.placeholder,
-              }
+              id: metadatas.placeholder,
+              defaultMessage: metadatas.placeholder,
+            }
             : null
         }
         queryInfos={queryInfos}
@@ -243,7 +243,7 @@ function Inputs({
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
       step={step}
-      type={inputType}
+      type={fieldSchema.pluginOptions?.['content-manager']?.type || inputType}
       // validations={validations}
       value={inputValue}
       withDefaultValue={false}
diff --git a/node_modules/@strapi/admin/admin/src/pages/HomePage/index.js b/node_modules/@strapi/admin/admin/src/pages/HomePage/index.js
index f8b8d85..0e64e13 100644
--- a/node_modules/@strapi/admin/admin/src/pages/HomePage/index.js
+++ b/node_modules/@strapi/admin/admin/src/pages/HomePage/index.js
@@ -69,18 +69,15 @@ const HomePage = () => {
         <Box padding={10}>
           <Grid>
             <GridItem col={8} s={12}>
-              <HomeHeader
-                onCreateCT={handleClick}
-                hasCreatedContentType={hasAlreadyCreatedContentTypes}
-              />
+              Welcome
             </GridItem>
           </Grid>
           <Grid gap={6}>
             <GridItem col={8} s={12}>
-              {showGuidedTour ? <GuidedTourHomepage /> : <ContentBlocks />}
+              Homepage
             </GridItem>
             <GridItem col={4} s={12}>
-              <SocialLinks />
+              Links
             </GridItem>
           </Grid>
         </Box>

and the on a plugin I register the components with:

  register(app) {
   // ....
    app.addFields({ type: "colorpicker", Component: ColorPicker });
   // ...
   },

in schema.json:

  "attributes": {
    "color": {
      "pluginOptions": {
        "i18n": {
          "localized": false
        },
        "content-manager": {
          "type": "colorpicker"
        }
      },
      "type": "string",
      "required": true,
      "default": "rgba(255,255,255,1)"
    },