Question: How to use filterSchema and filterFormProps to filter assets

[dgarofalo]

Hello,

Looking for clarification around the filterSchema and filterFormProps properties for the AssetSelector. The documentation does not include the interface for these properties and there are no examples of how to use these properties. Additionally, can these properties be used to programmatically filter the assets displayed to the user?

For example, we only want to display image and video assets as these will be the only supported asset types our application will allow to be imported. Thanks in advance for your help and let me know if I should post these questions in a different location.

Documentation: https://github.com/adobe/aem-assets-selectors-mfe-examples/blob/main/docs/AssetSelectorProps.md

[nazimamin]

Hey, thanks for bringing that to our attention. While we work on updating the doc, here's a bit more info. filterSchema allows you to control the type of filter options in Filter form while filterProps control how the basic layout and interaction of the form will be. Here's an example for filterSchema that will provide options for images and videos and other mime types and filterProps to expand a particular field group that you defined in filterSchema.

const filterSchema = [
          {
              header: "File Type",
              groupKey: "TopGroup",
              fields: [
                  {
                      element: "checkbox",
                      name: "type",
                      defaultValue: ["image/*"],
                      options: [
                          { 
                              label: "Images",
                              value: "image/*"
                          }
                      ]
                  }
              ]
          },
          { 
              fields: 
                  [ 
                      { 
                          element: 'checkbox',
                          name: 'type',
                          options: [ 
                              { 
                                  label: 'JPG',
                                  value: 'image/jpeg' 
                              },
                              {
                                  label: 'PNG',
                                  value: 'image/png'
                              },
                              {
                                  label: 'TIFF',
                                  value: 'image/tiff'
                              },
                              {
                                  label: 'GIF',
                                  value: 'image/gif'
                              }
                          ],
                          columns: 3,
                      },
                  ],
              header: 'Mime Types',
              groupKey: 'MimeTypeGroup'
          }
      ]

      // defaultExpanded to automatically have MimeTypeGroup expanded, 
     // readOnly if you don't want users to be able to interact with the filter form,
      const filterProps = {
            defaultExpanded: ['MimeTypeGroup'],
            readOnly: true,
            quiet: false,
            style: { backgroundColor: 'red' },
            header: "Filter header"
        }

[dgarofalo]

@nazimamin thank you! Is there a way to only display image and video assets? Or can we only limit the filter sets displayed to the user?

[nazimamin]

Yes, filters are applied based on your filterSchema and the defaultValue array that you configure -- for both presentation and fetching the data. In the above example, images filter will be applied. You can add videos in that array to fetch only images and videos.

[dgarofalo]

@nazimamin thank you for the information and help here.

[dgarofalo]

@nazimamin I have a follow-up on our above conversation. Are there instances where the number of assets returned from a query can cause issues with filtering? For example, I am seeing a 500 response when trying to filter by all images (e.g. image/*), but this does not happen if I am searching for only videos (video/*) or a subset of images such as only image/png. Thanks!

[nazimamin]

I just tried it on our end, but that shouldn't be the case, can you reach out to your Solutions architect who can help you with the edge cases?