inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added the 'Content metadata component' tutorial. (#3386)

Browse Source
This commit is contained in:
Francesco Corti
2018-05-24 12:39:38 +02:00
committed by Eugenio Romano
parent c5936e7db0
commit 5e254777f1
4 changed files with 102 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/tutorials/README.md
View File

@@ -25,3 +25,4 @@ The tutorials are graded as follows:
| [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a [\`DataTable\` component](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html) with custom data from a generic back-end service or third party API. As an example we are going to use data from one of the available services on Alfresco Content Services. However, the procedure is much the same if want to use an Alfresco Process Services endpoint or a third party API. |
| [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | Intermediate | In this tutorial you will learn how to use the `NodesApiService` into an Angular application, to interact with your instance of Alfresco Content Services without consuming directly the REST endpoints. |
| [**Working with the Nodes using the JS API**](working-with-nodes-js-api.md) | Intermediate | In this tutorial you will learn how to use the `AlfrescoCoreRestApi` into a JavaScript application, to interact with your instance of Alfresco Content Services without consuming directly the REST endpoints. |
| [**Content metadata component**](content-metadata-component.md) | Advanced | In this tutorial you will learn how to work with the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html), used to render the standard and custom metadata of a content (called *node*) stored into Alfresco Content Services. |

99
docs/tutorials/content-metadata-component.md Normal file
View File

@@ -0,0 +1,99 @@
---
Level: Advanced
---
# Content metadata component
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html), 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](https://github.com/Alfresco/alfresco-content-app).
## About the `ContentMetadataComponent`
As described in the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html) 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.
![content_metadata_preset](../docassets/images/content_metadata_preset.png)
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.