Custom Field - Map

Hi there 👋

I am trying to have my schema feature an array of contents that can be of different types, as the example below shows:

// Expected json output
{
  ...
  contents: [
    {
      type: 'lesson-video',
      attributes: {
        video: 'https://...',
      }
    },
    {
      type: 'exercise-free-text',
      attributes: {
        question: '...'
      }
    },
    {
      type: 'exercise-multi-choice',
      attributes: {
        question: '...',
        answers: [ ... ]
      }
    },
    {
      type: 'lesson-audio',
      attributes: {
        audio: 'https://...',
        text: '...'
      }
    },
    {
      type: 'exercise-multi-choice',
      attributes: {
        question: '...',
        answers: [ ... ]
      }
    },
    {
      type: 'recap',
      attributes: {
        learnings: [ ... ]
      }
    },
  ]
  ...
}

The goal is for my content managers to be able to add contents to the array and have each content featuring dynamic attributes fields that depend on the content type that has first been selected.

I have tried using Conditional fields from properties and Custom fields but wasn’t able to set this up.

Can someone help with that ? 🙏

[fgatti675]

That would be awesome! There is 2 ways to go:

• The simplest one is you develop a CustomField of type array. If the types you want to use in your array are preset you can code them inside your component. Otherwise, if you want to make it generic and inject the components externally you can use the fieldProps like in this example (just a suggestion of how you could implement it)

...
        content: {
            title: "Content",
            dataType: "array",
            config: {
                field: ArrayOfTypedMapsField, // This is the field you can develop
                fieldProps: { // This is an example of how you could define your internal types
                    discriminatorName: "type",
                    contentName: "attributes",
                    options: [
                        { 
                            discriminator: "lesson-video",
                            properties: { ... } // same as you would define properties in a "map"
                            validation: {...} // same as you would define validation in a "map"
                        },
                        ...
                    ]
                    
                }
            }
        },
 ...

• The second option is to build something similar to what I have mentioned before directly into the CMS core; it would be much harder for you since it would require understanding of the internals. Also it would take longer to be released in production.

I would suggest to go with the first option, and develop something that works for you. Then you can share it with me and we see how we integrate it 😃

I am also working on creating an example custom field that includes other fields inside, and some internal changes to make a nicer API. I will probably have it ready over the weekend!

Let me know if I can help you with anything else

[fgatti675]

Hi everyone!

Just to let you know that the oneOf prop has been added to Array properties so this feature is now implemented natively in version 0.45.1

You can check a sample implementation in: https://github.com/Camberi/firecms/blob/master/example/src/SampleApp/schemas/products_schema.tsx#L62 or the docs: http://firecms.co/docs/api/interfaces/arrayproperty#oneof

I am pretty excited of finally integrating this one! Hope it works for you too