alfresco-ng2-components/docs/tutorials/content-metadata-component.md

Level

Level
Advanced

Content metadata component

In this tutorial you will learn how to work with the ContentMetadataComponent, used to render the standard and custom metadata of a generic content (called node) stored into Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your uses cases. As a starting point, we are going to use and customise the Alfresco Content App.

About the ContentMetadataComponent

As described in the ContentMetadataComponent documentation, the adf-content-metadata-card tag admits some useful attributes, included the preset one, used to point to a collection of aspects/properties to render.

In the following example you can see the preset value requesting to render all the available aspects/properties.

<adf-content-metadata-card
    [node]="..."
    [preset]="'*'">
</adf-content-metadata-card>

In the following example you can see the preset value requesting to render all the available aspects/properties related to a specific configuration, named custom.

<adf-content-metadata-card
    [node]="..."
    [preset]="'custom'">
</adf-content-metadata-card>

All the preset configurations are defined in one single configuration's file named app.config.json, stored into the src folder of the project. The app.config.json file contains all the configurations of the ADF application, included a section named content-metadata, used to store the presets. In the following JSON you can find an example of configuration for the present named custom.

"content-metadata": {
    "presets": {
        "custom": [
            {
                "title": "APP.CONTENT_METADATA.EXIF_GROUP_TITLE",
                "items": [
                    {
                        "aspect": "exif:exif",
                        "properties": [
                            "exif:pixelXDimension",
                            "exif:pixelYDimension",
                            ...
                        ]
                    }
                ]
            }
        ]
    }
},

This configuration is going to show all the listed properties exif:* in a group titled with the value of the variable APP.CONTENT_METADATA.EXIF_GROUP_TITLE for the aspect exif:exif. Since this aspect is not related to the related node, the component will simply ignore the rendering and nothing will be displayed for these properties. In other words: the aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.

Adding and using a new preset configuration

In this example we are going to add a new preset configuration and see how it looks like in the user interface.

Adding a new preset configuration

To add a new preset configuration, edit the src/app.config.json file and point to the content-metadata section. Once done, append the following JSON to the presets content and save the file.

...,
"content-metadata": {
    "presets": {
        "custom": [...],
        "my-preset": [
            {
                "title": "This is my preset",
                "items": [
                    {
                        "aspect": "st:siteContainer",
                        "properties": ["*"]
                    }
                ]
            }
        ]
    }
},

Note: As alternative to "properties": ["*"] that indicates all the properties of the st:siteContainer aspect, you can use "properties": ["st:componentId"] that will render one property only.

Using the my-preset configuration

Now that the my-preset configuration is defined, let's use it into a view of the ADF application. As an example, let's edit the files view, stored into the src/app/files folder. More in detail, let's change the files.component.html file as follow.

<adf-content-metadata-card
    ...
    [preset]="'my-preset'">
</adf-content-metadata-card>

Viewing the result

After saving the html file, open the ADF app into a browser and dive into the Personal Files > Sites > swsdp folder of the Alfresco's repository. Once there, select the documentLibrary folder (one click only) and click on the view details icon (the i on the top right). Scrolling down the metadata tab on the right, click on the More information item at the bottom. Once clicked, you will see two different groups: Properties (already there by default) and This is my preset. Click on This is my preset to show the properties related.

In the following screenshot you can see how the result should look like.

As an example, double click on the documentLibrary folder and select (with one click) the Presentations folder. You should see disappearing the This is my preset group from the metadata panel, because the node doesn't have the st:siteContainer aspect.