sfsdi_catalog

The bundle provides a catalog of search topics that is shown at the bottom half of the frontpage (see bundle sf_frontpage).

The catalog consists of two different views: catalog cards and catalog tree.

Catalog cards are configured in the app.json. The catalog tree configuration is loaded from the server.

Configuration

To use the catalog you need to configure the cards and the tree. This bundle exchanges the default smart.finder catalog UI compoent. So the first step is to deactivate this smart.finder component:

"sfsdi_catalog": {
    "CatalogProviderRegistrator": {
        "componentEnabled": false
    }
},

Catalog cards

Regarding the cards, you can configure the property categories for the component CardsCatalogConfig. For each category and card will be created.

You need to configure the following properties for each category in categories:

Property	Description
`id`	The id of the category
`name`	The name displayed on the card
`queryObject`	An object used to create the query (see table below for details)
`iconClass`	iconClass specifying the icon to be displayed on the card

Configuration of queryObject:

Property	Description
`term`	Term to search for
`sortAttribute`	The name of an attribute that will be used for sorting the results (possible values: )
`sortDesc`	Specify whether the sorting will be descending (true) or ascending (false)
`extent`	Extent used for filtering the results
`filter`	A JSON

Example:

"sf_catalog": {
    "CardsCatalogConfig": {
        "categories": [
            {
                "id": 1,
                "name": "Wasser",
                "queryObject": {
                    "filter": {
                        "level": ["wasser"]
                    },
                    "sortAttribute": "created",
                    "sortDesc": false,
                    "extent": "1098518.9985019667,1294197.790911966,6709349.179324515,6944163.730216514"
                },
                "iconClass": "waves"
            },
            {
                "id": 2,
                "name": "Natur",
                "queryObject": {
                    "filter": {
                        "level": ["natur"]
                    },
                },
                "iconClass": "local_florist"
            },
            {
                "id": 3,
                "name": "INSPIRE",
                "queryObject": {
                    "filter": {
                        "level": ["inspire"]
                    },
                },
                "iconClass": "language"
            },
            {
                "id": 4,
                "name": "Kultur",
                "queryObject": {
                    "filter": {
                        "level": ["kultur"]
                    },
                },
                "iconClass": "palette"
            }
        ]
    }
}

Catalog tree

The TreeConfigRequester component loads the data to render the tree from the server.

You can change the default URL for this request by changing the url property (see the following example):

Example:

"sfsdi_catalog": {
    "TreeConfigRequester": {
        "url": "@@finder.service.url@@/resources/config/tree"
    }
}

If you want to display a loading animation for the time that the server is requested, you can set "showLoading": true as shown in the following example:

Example:

"sfsdi_catalog": {
    "CatalogTreeProviderRegistrator": {
        "data": {
           "showLoading": true
        }
    }
}

Heading shown for each view

You can configure the title shown on the main page using the app's i18n configuration from your app. You can configure separate titles for the cards as well as the tree view.

Add the following code to the app's nls/bundle.js file:

"sfsdi_catalog" : {
    "catalog": {
        catalogHeadingCards: "Domain Categories",
        catalogHeadingTree: "Domain Categories Tree"
    }
}