Add support for virtual fields nested in arrays / blocks

[jeremyProwseYS]

As per this issue thread, I have run into a limitation with virtual fields in that they do not work as intended when nested in arrays / blocks. On the surface this may seem like a rather niche use-case, however I think it would extend the functionality of relationships dramatically. In the above mentioned issue I go into a use case for this, but suffice to say, enabling filtering of related content in the cms based on relationships would prove a massive benefit for large quantities of data.

Given virtual fields are the way to access props, I believe this is a valuable addition to it's functionality.

Keen to hear any thoughts or alternative approaches though!

[SebastianTroc]

Any updates on that? Or someone has found a workaround?

[jeremyProwseYS]

Hey @SebastianTroc,

I'm not sure what your application is, but for me it was probably very niche. I was seeking to use virtual fields to conditionally show or hide other fields. For example, to show or hide a category field on a post based on the value of another field such as postType, where the category field is a relationship field that pulls from a categories collection. The component I created would allow me to provide fieldProps to define the field to conditionally show, along with the conditions by which this field should show, something like this:

  ConditionalField({
    fieldProps: {
      name: 'breed',
      type: 'select',
      options: [
        {
          label: 'Tabby',
          value: 'tabby'
        },
        {
          label: 'Ragdoll',
          value: 'ragdoll'
        }
      ]
      required: false,
      },
      admin: {
        position: 'sidebar',
        description: 'Select the breed for this cat.',
      },
    },
    conditions: {
      compareField: 'species', // the local field in this particular fieldset.
      compareProperty: 'slug', // the property on the document you wish to compare (this is what would usually be a virtual field)
      operator: 'equals',
      targetValue: 'cat', // what should the slug equal to show this field?
      collection: 'species', // this is the collection in which the options for the provided compareField live.
    },
  }),

Where this overlaps with the virtual field issue, because it's not exactly clear from a cursory glance, is that in lieu of creating a postTypeSlug virtual field to compare against in a traditional condition statement in Payload, this hooks directly into the documents record and allows for querying on any props without virtual fields.

Again, this is probably a very niche use case, but I'm providing this in the hopes it helps you towards a potential work around in your own use case. Alternatively, if this component, or something similar is what you were looking for, then great!

Repo with field code (note this is very much a work in progress, but is working well enough for our use-case is a current project): https://github.com/prowsejeremy/payloadcms-conditionalfield

[samtgarson]

I have a use case for this which I would have assumed is fairly common—custom row labels on array rows.

I have an an array field, and each item in the array has a relationship to another collection. I'd like each row in the array to display a field from that relationship as it's title.

The workaround is rather than make them virtual, to actually store the title in the database and keep it updated using hooks, however I'd prefer not to have to change the database for a trivial display requirement in the admin.