Configure filters for file browse dialog

To download the UI configuration file log into Adobe Experience Manager as an administrator.

Click on the Adobe Experience Manager link at the top and choose Tools.

Select Guides from the list of tools and click the Folder Profiles.

Click on the Global Profile tile.

Select the XML Editor Configuration tab and click Edit icon on the top

Click the Download icon to download the ui_config.json file on your local system. You can then make changes to the file and then upload the same.

In the ui_config.json file, add the definition of the filters you want to add.

The following code snippet shows how to add two filtering options — DITA Files and Image Files.

"browseFilters": [
                    {
                    "title": "DITA Files",
                    "property": "jcr:content/metadata/dita_class",
                    "operation": "exists"
                    },
                    {
                    "title": "Image Files",
                    "property": "jcr:content/metadata/dc:format",
                    "value": [
                    "image/jpeg",
                    "image/gif",
                    "image/png"
                    ]
                    }
                    ]

In the above code snippet, the first filter is for DITA Files. The filter definition takes the following parameters:

• title

  The display name of the filter. This title appears as the filtering option in the file browse dialog.

• property

  The property to match in the file’s metadata. For example, to allow only those files that have the dita_class metadata in their property, the property filter takes " jcr:content/metadata/dita_class" as its value.

• operation

  Specify " exists" to match for existence of the value specified in the property parameter.

The second filter is for Image Files. The parameters are similar to the first filter except the value parameter. The value parameter takes an array of image types as its value. All file types specified in the value parameter are searched for and shown in the file browse dialog, all other file types are ignored.

Save the ui_config.json file and upload the same. Then, reload the Web Editor.

When you launch the file browse dialog, the filter options configured in the ui_config.json file are shown.

Log into AEM and open the CRXDE Lite mode.

Navigate to the default configuration file available at the following location:

/libs/fmdita/clientlibs/clientlibs/xmleditor/ui_config.json

Create a copy of the default configuration file at the following location:

/apps/fmdita/xmleditor/ui_config.json

Navigate to and open the ui_config.json file in the apps node for editing.

In the ui_config.json file, add the definition of the filters you want to add.

The following code snippet shows how to add two filtering options — DITA Files and Image Files.

"browseFilters": [
    {
      "title": "DITA Files",
      "property": "jcr:content/metadata/dita_class",
      "operation": "exists"
    },
    {
      "title": "Image Files",
      "property": "jcr:content/metadata/dc:format",
      "value": [
        "image/jpeg",
        "image/gif",
        "image/png"
      ]
    }
]

In the above code snippet, the first filter is for DITA Files. The filter definition takes the following parameters:

• title: The display name of the filter. This title appears as the filtering option in the file browse dialog.

• property: The property to match in the file’s metadata. For example, to allow only those files that have the dita_class metadata in their property, the property filter takes “jcr:content/metadata/dita_class” as its value.

• operation: Specify “exists” to match for existence of the value specified in the property parameter.

The second filter is for Image Files. The parameters are similar to the first filter except the value parameter. The value parameter takes an array of image types as its value. All file types specified in the value parameter are searched for and shown in the file browse dialog, all other file types are ignored.

Save the ui_config.json file and reload the Web Editor.

When you launch the file browse dialog, the filter options configured in the ui_config.json file are shown.

{width="300"}