mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1586] Added doc files for Document List library (#2435)
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
d21eacc22b
commit
1a7b390930
@@ -11,7 +11,10 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
|
||||
- [Details](#details)
|
||||
* [Automatic column header translation](#automatic-column-header-translation)
|
||||
* [Custom tooltips](#custom-tooltips)
|
||||
* [Column Templates](#column-templates)
|
||||
* [Column Template](#column-template)
|
||||
* [Styling Techniques](#styling-techniques)
|
||||
+ [Custom icons for selected rows](#custom-icons-for-selected-rows)
|
||||
+ [Hiding columns on small screens](#hiding-columns-on-small-screens)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
@@ -94,48 +97,201 @@ export class MyComponent {
|
||||
|
||||
To disable the tooltip your function can return `null` or an empty string.
|
||||
|
||||
### Column Templates
|
||||
### Column Template
|
||||
|
||||
It is possible to assign a custom column template like the following:
|
||||
You can provide custom column/cell templates that may contain other Angular components or HTML elements:
|
||||
|
||||
Every cell in the DataTable component is bound to the dynamic data context containing the following properties:
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| data | [DataTableAdapter](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-datatable#data-sources) | Data adapter instance. |
|
||||
| row | [DataRow](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-datatable#data-sources) | Current data row instance. |
|
||||
| col | [DataColumn](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-datatable#data-sources) | Current data column instance. |
|
||||
|
||||
You can use all three properties to gain full access to underlying data from within your custom templates.
|
||||
In order to wire HTML templates with the data context you will need defining a variable that is bound to `$implicit` like shown below:
|
||||
|
||||
```html
|
||||
<adf-datatable ...>
|
||||
<data-columns>
|
||||
<data-column title="Version" key="properties.cm:versionLabel">
|
||||
<ng-template let-value="value">
|
||||
<span>V. {{value}}</span>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
Example above shows access to the underlying cell value by binding `value` property to the underlying context `value`:
|
||||
|
||||
```html
|
||||
<ng-template let-value="value">
|
||||
```
|
||||
|
||||
Alternatively you can get access to the entire data context using the following syntax:
|
||||
|
||||
```html
|
||||
<ng-template let-entry="$implicit">
|
||||
```
|
||||
|
||||
That means you are going to create local variable `entry` that is bound to the data context via Angular's special `$implicit` keyword.
|
||||
|
||||
```html
|
||||
<ng-template let-entry="$implicit">
|
||||
<span>V. {{entry.data.getValue(entry.row, entry.col)}}</span>
|
||||
<ng-template let-context="$implicit">
|
||||
<!-- template body -->
|
||||
</ng-template>
|
||||
```
|
||||
|
||||
In the second case `entry` variable is holding a reference to the following data context:
|
||||
The format of naming is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want to bind template data context to.
|
||||
|
||||
Getting a cell value from the underlying DataTableAdapter:
|
||||
|
||||
```ts
|
||||
{
|
||||
data: DataTableAdapter,
|
||||
row: DataRow,
|
||||
col: DataColumn
|
||||
context.data.getValue(entry.row, entry.col);
|
||||
```
|
||||
|
||||
You can retrieve all property values for underlying node, including nested properties (via property paths):
|
||||
|
||||
```ts
|
||||
context.row.getValue('name')
|
||||
context.row.getValue('createdByUser.displayName')
|
||||
```
|
||||
|
||||
You may want using **row** api to get raw value access.
|
||||
|
||||
```html
|
||||
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
|
||||
<ng-template let-context="$implicit">
|
||||
<span>Hi! {{context.row.getValue('createdByUser.displayName')}}</span>
|
||||
<span>Hi! {{context.row.getValue('name')}}</span>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
```
|
||||
|
||||
Use **data** api to get values with post-processing, like datetime/icon conversion._
|
||||
|
||||
In the Example below we will prepend `Hi!` to each file and folder name in the list:
|
||||
|
||||
```html
|
||||
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
|
||||
<ng-template let-entry="$implicit">
|
||||
<span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
```
|
||||
|
||||
In the Example below we will add the [ng2-alfresco-tag](https://www.npmjs.com/package/ng2-alfresco-tag) component is integrate in the document list.
|
||||
|
||||
```html
|
||||
<data-column
|
||||
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
|
||||
key="id"
|
||||
sortable="true"
|
||||
class="full-width ellipsis-cell">
|
||||
<ng-template let-entry="$implicit">
|
||||
<adf-tag-node-list [nodeId]="entry.data.getValue(entry.row, entry.col)"></adf-tag-node-list>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Styling Techniques
|
||||
|
||||
You can add a custom CSS class to a column using its `class` property. This is useful for
|
||||
many purposes - some examples are given below.
|
||||
|
||||
#### Custom icons for selected rows
|
||||
|
||||
Custom styling can be used to change the look and feel of the icon for the selected rows.
|
||||
|
||||
Let's start by assigning an "image-table-cell" class to the thumbnail column:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<data-columns>
|
||||
|
||||
<data-column
|
||||
key="$thumbnail"
|
||||
type="image"
|
||||
[sortable]="false"
|
||||
class="image-table-cell">
|
||||
</data-column>
|
||||
|
||||
...
|
||||
</data-columns>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Now your application can define styles to change the content of the column based on conditions such as the selection state:
|
||||
|
||||
```css
|
||||
adf-document-list >>> adf-datatable tr.is-selected .image-table-cell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before {
|
||||
content: "\E876"; /* "done" */
|
||||
font-family: "Material Icons";
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -16px;
|
||||
margin-left: -14px;
|
||||
border-radius: 100%;
|
||||
background: #00bcd4;
|
||||
}
|
||||
```
|
||||
|
||||
Once your application starts you should see the following icon for each selected row:
|
||||
|
||||
|
||||
|
||||
#### Hiding columns on small screens
|
||||
|
||||
You can hide columns on small screens using custom CSS rules:
|
||||
|
||||
```css
|
||||
@media all and (max-width: 768px) {
|
||||
|
||||
alfresco-document-list >>> th.desktop-only .cell-value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
alfresco-document-list >>> td.desktop-only .cell-value {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now you can declare columns and assign `desktop-only` class where needed:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<data-columns>
|
||||
|
||||
<!-- always visible columns -->
|
||||
|
||||
<data-column key="$thumbnail" type="image"></data-column>
|
||||
<data-column
|
||||
title="Name"
|
||||
key="name"
|
||||
class="full-width ellipsis-cell">
|
||||
</data-column>
|
||||
|
||||
<!-- desktop-only columns -->
|
||||
|
||||
<data-column
|
||||
title="Created by"
|
||||
key="createdByUser.displayName"
|
||||
class="desktop-only">
|
||||
</data-column>
|
||||
<data-column
|
||||
title="Created on"
|
||||
key="createdAt"
|
||||
type="date"
|
||||
format="medium"
|
||||
class="desktop-only">
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
**Desktop View**
|
||||
|
||||
|
||||
|
||||
**Mobile View**
|
||||
|
||||
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Datatable component](datatable.component.md)
|
||||
- [Tasklist component](tasklist.component.md)
|
||||
<!-- seealso end -->
|
||||
Reference in New Issue
Block a user