How to configure category filters

In this guide you will be adding category filters. Categories are helpful when you have multiple annotation types and want authors to be able to filter between these types.

What you need

You have followed the Initial setup and Adding a custom annotation guides and executed all optional steps.

When configuring category filters, please take the following into account:

  • To enable the filter, you must register at least two different categories.

  • If you do not configure any categories or register a single category for all annotation types, no filter will be shown.

  • Each category must contain at least one annotation type. We recommend grouping annotation types that are often processed simultaneously and are similar in nature.

  • Unless you have a single annotation type, avoid leaving any annotation types uncategorized. If no relevant categorization is possible, create a category for that annotation type alone.

  • Use clear and relevant umbrella terms for categories. E.g. "References" instead of "hyperlinks & cross references".


Register the category filters

You will be registering a spelling and a synonyms category, both containing the respective annotation types.

Update the installation file of the content-quality-configuration package to make use of the registerContentQualityAnnotationTypesCategory API to register the categories.



import t from 'fontoxml-localization/src/t.js';

import registerContentQualityAnnotationType from 'fontoxml-content-quality/src/registerContentQualityAnnotationType.js';
import registerContentQualityAnnotationTypesCategory from 'fontoxml-content-quality/src/registerContentQualityAnnotationTypesCategory.js';

import SynonymAnnotationDetails from './SynonymAnnotationDetails.jsx';

export default function install() {
	// Returns contextual operations for the "Q{urn:tutorial}synonym" annotation type.
	const getSynonymContextMenuOperations = (annotationId, metadata) => {
		return [
				name: 'my-synonym-operation',
				label: metadata.synonyms[0],
				operationData: {
					text: metadata.synonyms[0]

	// Registers the "Q{urn:tutorial}synonym" annotation type.
		namespaceURI: 'urn:tutorial',
		localName: 'synonym',
		heading: t('Synonym'),
		color: 'green',
		icon: 'fas fa-dragon',
		CardContentComponent: SynonymAnnotationDetails,
		createContextualOperations: ({ annotationId, metadata }) =>
			getSynonymContextMenuOperations(annotationId, metadata),
		decoration: 'underline'

	// Registers the "spelling" category.
			id: 'spelling',
			label: t('Spelling'),
			description: t('See suggestions for spelling mistakes.')
				namespaceURI: 'urn:fontoxml:content-quality:spelling:1.0.0',
				localName: 'spelling-error'

	// Registers the "synonyms" category.
			id: 'synonyms',
			label: t('Synonyms'),
			description: t('See suggestions for synonyms.')
		[{ namespaceURI: 'urn:tutorial', localName: 'synonym' }]

Conditionally execute the analytics

Wrap both annotators in an If analytic to execute the annotators conditionally. This will skip the execution of analytics which do not need to be executed based on the enabled filters by the author.

Update the analysis file accordingly:



<?xml version="1.0" encoding="utf-8"?>

		<if condition="functions:enabled-categories-includes('spelling')">
				languages="en en-US"
				spelling="spelling.txt" />

		<if condition="functions:enabled-categories-includes('synonyms')">
				<fileSource relativePath="synonyms.txt" />
				<solrSynonymFormat annotationTypeId="tutorial:synonym" />


Start the instance

You are now done configuring categories in Fonto Content Quality and ready to do a test run. Start the development server and the Fonto Content Quality instance with the respective commands fdt editor run and fdt content-quality run in their respective directories.

If you already have an instance of Fonto Content Quality running, make sure to restart it after making changes that affect the analysis.

If you followed all of the steps of this guide, you will now have Fonto Content Quality configured with categories.

You can use these categories to filter the annotation results. Open the Content Quality Navigator and use the filter menu to toggle the categories.

You have configured Fonto Content Quality with category filters.