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

ACS-8610: cleanup demo shell protractor tests (#10148)

Browse Source
This commit is contained in:
Denys Vuika
2024-09-10 08:36:42 -04:00
committed by GitHub
parent a754976ad9
commit f1208d45c3
402 changed files with 180 additions and 45538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,15 +3,18 @@ Title: Content metadata component
Level: Advanced
---
# Content metadata component
# Content Metadata Component
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../../lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts).
In this tutorial you will learn how to work with the `ContentMetadataComponent`.
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).
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 application.
## About the `ContentMetadataComponent`
As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app).
As described in the [`ContentMetadataComponent`](../../lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts) 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.
## About the ContentMetadataComponent
As described in the `ContentMetadataComponent` 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.
Below, you can see the `preset` value requesting to render all the available aspects/properties:
@@ -34,28 +37,31 @@ As another example, you can see the `preset` value requesting to render all the
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`:
```json
"content-metadata": {
"presets": {
"custom": [
{
"title": "APP.CONTENT_METADATA.EXIF_GROUP_TITLE",
"items": [
{
"aspect": "exif:exif",
"properties": [
"exif:pixelXDimension",
"exif:pixelYDimension",
...
]
}
]
}
]
{
"content-metadata": {
"presets": {
"custom": [
{
"title": "APP.CONTENT_METADATA.EXIF_GROUP_TITLE",
"items": [
{
"aspect": "exif:exif",
"properties": [
"exif:pixelXDimension",
"exif:pixelYDimension"
]
}
]
}
]
}
}
},
}
```
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.
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 aspects and the aspects related to the node.
## Adding and using a new `preset` configuration
@@ -63,46 +69,49 @@ In this example we will add a new preset configuration and see how it looks in t
### Adding a new `preset` configuration
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:
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:
```json
...,
"content-metadata": {
"presets": {
"custom": [...],
"my-preset": [
{
"title": "This is my preset",
"items": [
{
"aspect": "st:siteContainer",
"properties": ["*"]
}
]
}
]
{
"content-metadata": {
"presets": {
"custom": [],
"my-preset": [
{
"title": "This is my preset",
"items": [
{
"aspect": "st:siteContainer",
"properties": [
"*"
]
}
]
}
]
}
}
},
}
```
**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 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`](../../demo-shell/src/app/components/files/files.component.ts)`.html` file as follows:
Now that the `my-preset` configuration is defined, let's use it in a view of the ADF application
```html
<adf-content-metadata-card
...
[preset]="'my-preset'">
</adf-content-metadata-card>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. |
| Name | Type | Default value | Description |
|----------|-----------|---------------|------------------------------------------------------------------------------|
| readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. |
### Viewing the result