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

[ADF-3198] Index and tutorial content review (#3500)

Browse Source 
* [ADF-3198] Fixed glitches in doc index files and tools

* [ADF-3198] Reviewed new tutorial content and fixed index glitches

* [ADF-3198] Fixed host settings component brief description
This commit is contained in:
Andy Stark
2018-06-18 22:57:01 +01:00
committed by Eugenio Romano
parent 737becd51f
commit 58522d0722
14 changed files with 150 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
docs/tutorials/content-metadata-component.md
View File

@@ -1,99 +1,106 @@
---
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).
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html). This component is used to render the standard and custom metadata of generic content item (called a *node*) stored in Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own applicatioin. As a starting point, we will use and customize 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.
As described in the [`ContentMetadataComponent`](https://alfresco.github.io/adf-component-catalog/components/ContentMetadataComponent.html) documentation, the `adf-content-metadata-card` tag has some useful attributes, included the `preset` attribute, which is 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.
Below, you can see the `preset` value requesting to render all the available aspects/properties:
```
```html
<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`.
As another example, you can see the `preset` value requesting to render all the available aspects/properties related to a specific configuration, named `custom`:
```
```html
<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`.
All the `preset` configurations are defined in one single configuration file named `app.config.json`, stored in the `src` folder of the project. The `app.config.json` file contains all the configurations of the ADF application, including a section named `content-metadata`, which is used to store the `presets`. The following JSON excerpt gives an example of configuration for the `preset` named `custom`:
"content-metadata": {
"presets": {
"custom": [
{
"title": "APP.CONTENT_METADATA.EXIF_GROUP_TITLE",
"items": [
{
"aspect": "exif:exif",
"properties": [
"exif:pixelXDimension",
"exif:pixelYDimension",
...
]
}
]
}
]
}
},
```json
"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.
This configuration will show all the listed properties prefixed with `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 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.
In this example we will add a new preset configuration and see how it looks 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.
To add a new `preset` configuration, edit the `src/app.config.json` file and locate the `content-metadata` section. Then, 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": ["*"]
}
]
}
]
}
},
```json
...,
"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.
**Note:** As an alternative to `"properties": ["*"]` (which matches all the properties of the `st:siteContainer` aspect), you can use `"properties": ["st:componentId"]`, which 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.
Now that the `my-preset` configuration is defined, let's use it in a view of the ADF application. As an example, let's edit the files view, stored in the `src/app/files` folder. Specifically, let's change the `files.component.html` file as follows:
<adf-content-metadata-card
...
[preset]="'my-preset'">
</adf-content-metadata-card>
```html
<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.
After saving the html file, open the ADF app in 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.
In the following screenshot you can see how the result should look:
![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.
To check it out, double click on the `documentLibrary` folder and select (with one click) the `Presentations` folder. You should see the `This is my preset` group disappear from the metadata panel, because the node doesn't have the `st:siteContainer` aspect.