Custom field with JSON type cant be saved on the admin panel

Questions and Answers
1
System Information
  • Strapi Version: 4.14.4
  • Operating System: Monterey 12.3
  • Database: SQLite
  • Node Version: 16.20.2
  • NPM Version: 8.19.4
  • Yarn Version: 1.22.9

I created a custom field (a dropdown)as a plugin that fetches data from an external api, I want to use it on my collection, the data is basically an array of objects so I set it as JSON type. I assigned the component to a field and its working fine, I can fetch, select, remove the data fetched in the component but once I want to save the new record on the admin panel the save button doesn’t do anything, the lifecycle before create doesn’t trigger, I dont get any error on the vscode terminal or on the browser.

  • If I want to save a record on the same collection but with the JSON costume fields empty (saving like a normal datefield for example), the save button works.
  • Also I tried saving it with a POST from the api Strapi makes and it works, but I noticed that even If I send it as JSON the value prop in the input comes as a string, why?
  • I dont think there something wrong with the code, because If i change the type of my customField/plugin to string, the save works fine

This is the Save button im talking about

image
image2410×478 56.2 KB

Some of the code

I dont think I have an issue where I register the customField

"use strict";

module.exports = ({ strapi }) => {
  // register phase
  strapi.customFields.register({
    name: "dropdown",
    plugin: "dropdown",
    type: "json",
  });
};

app.customFields.register({
      name: "dropdown",
      pluginId: "dropdown",
      type: "json",
      intlLabel: {
        id: "dropdown.dropdown.label",
        defaultMessage: "dropdown",
      },
      intlDescription: {
        id: "dropdown.dropdown.description",
        defaultMessage: "data dropdowns",
      },
      icon: PluginIcon,
      components: {
        Input: async () =>
          import(
            /* webpackChunkName: "input-component" */ "./components/Input"
          ),
      },
      options: {},
    });

the fields in the schema are this way

 "Picklist_divisions": {
      "type": "customField",
      "customField": "plugin::dropdown.dropdown"
    },
    "Picklist_contacts": {
      "type": "customField",
      "customField": "plugin::dropdown.dropdown"
    },

component of the plugin (customField)

export default function Index({
  name,
  error,
  description,
  onChange,
  value,
  intlLabel,
  attribute,
}) {
  console.log(value); // why this comes as string if i saved it with the strapi api as a json
// code...
return ()
}

the content types looks good also

Picklist_divisions: Attribute.JSON &
      Attribute.CustomField<'plugin::dropdown.dropdown'>;
    Picklist_contacts: Attribute.JSON &
      Attribute.CustomField<'plugin::dropdown.dropdown'>;
2

All JSON I believe is stored as string.

I was working on a plugin that needed to use JSON and I had to pass it as a string to work.

import React from "react";
import { JSONInput } from "@strapi/design-system";

import styled from "styled-components";

const JSONInputWrapper = styled(JSONInput)`
  width: 100%;
  /* position: absolute;
  left: 1rem;
  bottom: 1rem; */
  cursor: default;
`;

export default function OpenStreetMapInput({
  marker,
  value,
  name,
}) {
  return (
    <JSONInputWrapper
      name={name}
      value={JSON.stringify(marker) || value}
      disabled
    />
  );
}

Hope this helps.

3

That worked, thanks!