[custom field] Conditional field(s)

How would I go about creating a field plugin for conditional field rendering?
FF has this example: https://codesandbox.io/s/lm4p3m92q where a subscription to the field value is created based upon which other fields will be shown.

Where in the plugin interface does that need to happen for tina? In the Component?
Do I need to set something on the form or can I just render a FinalForm Field with a subscription as in the sandbox and that will handle that for me?

1 Like

Or would that be better implemented as watched fields in useForm ?

I’d love to see this as well! Can this currently be done?

I tried this, but it didn’t work. I’d imagine this is how it might be done though…

export const heroBlock = {
  Component: ({ index, data }) => (
    <BlocksControls insetControls focusRing={{ offset: { x: 0, y: 0 }, borderRadius: 0 }} index={index}>
      <Hero data={data} />
    </BlocksControls>
  ),
  template: ({ data }) => ({
    label: 'Hero',
    defaultItem: {
      ...blockDefaults,
      headline: 'The quick brown fox jumped over the lazy dog.',
      subtext: 'The quick brown fox jumped over the lazy dog.',
      align: 'center',
    },
    fields: [
      {
        name: 'primaryButtonLabel',
        label: 'Primary Button Label',
        component: 'text',
      },
      ...(data.primaryButtonLabel
        ? [
            {
              name: 'primaryButtonUrl',
              label: 'Primary Button URL',
              component: 'text',
            },
          ]
        : []
      )
    ]
  })
}

Edit

I found this…

I submitted this issue as well…

That package is not maintained by the tinacms team but gives you an idea of things we might change to achieve this. Right now, the FieldsBuilder renders the actual final form fields components (not the field plugins) so I think we’d need to adjust things at this level to work with conditionals and the subscription prop. We’d also need to adjust the the Field interface to accept this config. I think we’d want to make a more defined API with property names and avoid using ternaries in the config object definition, for clarity.

This is a great idea though, keep them coming — I can see how useful this would be. We should make a feature request in the tinacms repo to get those conversations going.

Done :white_check_mark:

2 Likes