diff --git a/ng2-components/ng2-alfresco-documentlist/README.md b/ng2-components/ng2-alfresco-documentlist/README.md index 746612a7e0..cc51250194 100644 --- a/ng2-components/ng2-alfresco-documentlist/README.md +++ b/ng2-components/ng2-alfresco-documentlist/README.md @@ -37,6 +37,10 @@ Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md). +## See also + +- [Walkthrough: adding indicators to clearly highlight information about a node](docs/metadata-indicators.md) + ## Install Follow the 3 steps below: diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/metadata-01.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/metadata-01.png new file mode 100644 index 0000000000..fc4d8a0203 Binary files /dev/null and b/ng2-components/ng2-alfresco-documentlist/docs/assets/metadata-01.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/metadata-02.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/metadata-02.png new file mode 100644 index 0000000000..90d652ad91 Binary files /dev/null and b/ng2-components/ng2-alfresco-documentlist/docs/assets/metadata-02.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/assets/metadata-03.png b/ng2-components/ng2-alfresco-documentlist/docs/assets/metadata-03.png new file mode 100644 index 0000000000..724599a763 Binary files /dev/null and b/ng2-components/ng2-alfresco-documentlist/docs/assets/metadata-03.png differ diff --git a/ng2-components/ng2-alfresco-documentlist/docs/metadata-indicators.md b/ng2-components/ng2-alfresco-documentlist/docs/metadata-indicators.md new file mode 100644 index 0000000000..8b5827f079 --- /dev/null +++ b/ng2-components/ng2-alfresco-documentlist/docs/metadata-indicators.md @@ -0,0 +1,132 @@ +# Walkthrough: adding indicators to clearly highlight information about a node + +Every node object in the document list holds metadata information. +All metadata is stored inside `properties` property. + +Here's an example of basic image-related metadata fetched from the server: + +![](assets/metadata-01.png) + +## Custom column template + +```html + + + + + + ... + + +``` + +We are going to declare a column and bind its value to the entire `properties` object of the underlying node. The column will be using our custom `` component to display icons based on metadata state. + +## MetadataIconsComponent component + +Let's create a simple `MetadataIconsComponent` component with a selector set to `adf-metadata-icons` as shown below: + +```ts +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'adf-metadata-icons', + template: ` +
+ +
+ ` +}) +export class MetadataIconsComponent { + + @Input() + metadata: any; + +} +``` + +The component will expose a `metadata` property we can use from the outside and eventually bind data to similar to the following: + +```html + +``` + +As you have seen earlier the DataColumn binds to `properties` property of the node, and maps the runtime value as the `value` local variable within the template. +Next we propagate the `value` reference to the `` component as `metadata` property. + +```html + + + +``` + +So once rendered our component will automatically has access to entire set of node metadata. Let's build some visualization of the `cm:versionLabel` propery. + +For demonstration purposes we are going to display several icons if underlying node has version `2.0`, and just a plain text version value for all other versions. + +```html +
+ + portrait + photo_filter + rotate_90_degrees_ccw + +
+ {{metadata['cm:versionLabel']}} +
+
+``` + +Note: For a list of the icons that can be used with `` component please refer to this resource: [material.io/icons](https://material.io/icons/) + +## Testing component + +You will need to enable `versioning` feature for the Document List to be able uploading multiple versions of the file instead of renaming duplicates. + +Drag and drop any image file to upload it and ensure it has `1.0` displayed in the column: + +![](assets/metadata-02.png) + +Now drop the same file again to upload a new version of the file. +You should now see icons instead of version label. + +![](assets/metadata-03.png) + +You can see on the screnshot above that only files with version `2.0` got extra icons. + +## Conclusion + +The full source code of the component can be found below: + +```ts +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'adf-metadata-icons', + template: ` +
+ + portrait + photo_filter + rotate_90_degrees_ccw + +
+ {{metadata['cm:versionLabel']}} +
+
+ ` +}) +export class MetadataIconsComponent { + + @Input() + metadata: any; + +} +``` + +You can use this idea to build more complex indication experience based on the actual metdata state. \ No newline at end of file