Field API - Custom JSON field

Questions and Answers
1

Hi,
I creat new plugin and register component as new field.
New field autocomplete address and show on map bellow.
I have problem with updating data of the field. I need insert data in JSON format.

Strapi Version 3.1.7
Environment: Develop
Node: v12.16.3
Npm: 6.14.4
Db: SQLite

This JSON looks like this:

    {
    city: "Paris",
    country: "Francie",
    fullAddress: "Paris, Francie",
    place_id: "ChIJD7fiBh9u5kcRYJSMaMOCCwQ",
    }

When maps successfully return data => call onChange from props and set new value of the target:

  const { name } = props;
    if (locationData) {
          props.onChange({
            target: {
              name,
              value: locationData,
              type: "json",
            },
          });
        }

After save strapi shows “Saved”, but data doesnt save to the DB. No errors in console.
I tried to save string instead of JSON data and that works and successfully saves to DB

Is there any solution to save data in JSON?

2

Can you link to an existing project so I can take a look at your implementation?

1 Like
3

Here is git repo: strapi-location-input-field/plugins/location-input at main · HonzaVrkota/strapi-location-input-field · G

4

Is there any solution to solve this problem? Thanks!

5

You have no routes or controllers to send the data to, Strapi’s admin panel is just a CSR react application (meaning the client’s browser is rendering it), and it needs a route tied to a handler (controller) to send the information to, which then can save the information to the database.

6

Hi !

Is it possible to customize icon and display name of custom fields in content builder ?
I have a new field registered as “foo” and it’s shown “content-type-builder.attribute.foo” as label in content builder, How I can add a matching translation ?
Also, is it possible to set a custom column size for content manager sections ?

8

I found a temporary fix to this issue. Use JSON.stringify() to send the data via the onChange Method. Then using Strapi Lifecycle Hooks (beforeCreate and beforeUpdate) parse it using JSON.parse() .

9

I have found the solution to change the width of the field but height remains a problem.
Reference: Columns in content manager detail view - #5 by sunnyson

Try this solution for height but it doesn’t work for me. Content Manager plugin does not get overwritten by custom file / width of rendered component not listening to getInputSize · Issue #8950 · strapi/strapi · GitHub

10

I have kind of the same problem and handle it a little bit different.
On change I stringify the JSON and when received by my component I parse it and save it in a variable created by a useState hook.
Being closer to strapi would be nice. Actually there is a json field natively. A lot of plugins might just want to add a UI and not a new data structure. It would be nice to have a way to tell strapi to handle data like json (caring about reading and writing from the database (bookshelf?) and providing it as a JSON in the code).