PropertyBuilder (conditional fields) in array of maps

[logartis]

I am trying to use conditional fields in an array of maps but getting an error. Am I missing something or is it not supported? My use case would be to create an array of maps (Sections) with a SectionType enum that would determine the contents of that section.

Here is a minimal example with just a simple conditional field inside of an array of maps:

export const ExtraPageSchema = buildSchema<any>({
  name: "Prices",
  properties: {
    sections: buildProperty({
      title: "Prices",
      dataType: "array",
      of: {
        title: "Conditional fields",
        dataType: "map",
        properties: {
          available: {
            dataType: "boolean",
            title: "Available",
          },
          price: (({ values }) => {
            return {
              dataType: "number",
              title: "Price",
              validation: {
                requiredMessage: "You must set a price between 0 and 1000",
                min: 0,
                max: 1000,
              },
              disabled: !values.available && {
                clearOnDisabled: true,
                disabledMessage:
                  "You can only set the price on available items",
              },
              description: "Price with range validation",
            };
          }),
        },
      },
    }),
  },
});

I am loving the library so far, great solution for an existing market gap!

[fgatti675]

Hi @logartis,
You can only use property builders at the schema level, so the root properties. You can achieve what you want to do like this:

        sections: (({ values }) => ({
            title: "Prices",
            dataType: "array",
            of: {
                title: "Conditional fields",
                dataType: "map",
                properties: {
                    available: {
                        dataType: "boolean",
                        title: "Available",
                    },
                    price: {
                        dataType: "number",
                        title: "Price",
                        validation: {
                            requiredMessage: "You must set a price between 0 and 1000",
                            min: 0,
                            max: 1000,
                        },
                        disabled: !values.available && {
                            clearOnDisabled: true,
                            disabledMessage:
                                "You can only set the price on available items",
                        },
                        description: "Price with range validation",
                    },
                },
            },
        })),

[fgatti675]

Ah I see this might not be enough to cover your use case you may beed to access the index of the array which is not provided

[logartis]

Hi @fgatti675
Thanks for the quick response! Yes, you are right, please consider adding support for this if possible. Maybe by somehow exposing the array element's index as you mentioned or maybe enabling property builders for nested properties(?) which seems intuitive. Thank you for your great work!

[fgatti675]

Sure, we will consider this.
If you can replace the boolean by a string, you can achieve what you are looking for using the oneOf prop of array properties.
It's how we implement the blog in the demo app

[logartis]

Oh I missed oneOf somehow, that's very cool. It indeed covers my current needs. Thank you!

[fgatti675]

Great!