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-4152] Updated folder structure of core docs (#4415)

Browse Source 
* [ADF-4152] Moved core library docs into subfolders

* [ADF-4152] Moved core library docs into subfolders

* [ADF-4152] Manual fixes to core doc file links

* [ADF-4152] Further automatic + manual link tidying
This commit is contained in:
Andy Stark
2019-03-12 14:20:20 +00:00
committed by Eugenio Romano
parent 285e56e9fb
commit 5fc05da7aa
121 changed files with 1112 additions and 1329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/core/components/about.component.md Normal file
View File

@@ -0,0 +1,25 @@
---
Title: About Component
Added: v2.4.0
Status: Experimental
Last reviewed: 2018-11-14
---
# [About Component](../../../lib/core/about/about.component.ts "Defined in about.component.ts")
Shows a general version and status overview of the installed ADF library.
## Basic Usage
```html
<adf-about></adf-about>
```
## Details
Use this component to get a general overview of the version of ADF installed and the status of the [Content service](../services/content.service.md) and [Process service](../../process-services/services/process.service.md).
Note at the moment this component is mostly for internal use and it requires you to:
- create a version file : `npm list --depth=0 --json=true --prod=true > versions.json`
- provide this version file in the `dist` folder

57
docs/core/components/buttons-menu.component.md Normal file
View File

@@ -0,0 +1,57 @@
---
Title: Buttons Menu Component
Added: v2.4.0
Status: Active
Last reviewed: 2018-06-08
---
# [Buttons Menu Component](../../../lib/core/buttons-menu/buttons-menu.component.ts "Defined in buttons-menu.component.ts")
Displays buttons on a responsive menu.
![adf-buttons-menu-desktop](../../docassets/images/adf-buttons-menu-desktop.png)
## Basic Usage
### [Transclusions](../../user-guide/transclusion.md)
Place the buttons for the menu inside this component's HTML tags.
They must use the following structure:
```html
<adf-buttons-action-menu>
<button mat-menu-item (click)="showSettings()">
<mat-icon>settings</mat-icon><span>Settings</span>
</button>
<button mat-menu-item (click)="delete()">
<mat-icon>delete</mat-icon><span>Delete</span>
</button>
</adf-buttons-action-menu>
```
Note that the buttons themselves also have an icon (supplied as a `<mat-icon`)
and a label (supplied as a `<span>`).
They also make use of the Angular material directive `mat-menu-item`.
```html
<button mat-menu-item (click)="event()">
<mat-icon> icon </mat-icon>
<span> label </span>
</button>
```
## Details
This component is fully responsive and it will display one of two different layouts
depending on the screen size:
**Desktop View**
![adf-buttons-menu-desktop](../../docassets/images/adf-buttons-menu-desktop.png)
**Mobile View**
![adf-buttons-menu-mobile](../../docassets/images/adf-buttons-menu-mobile.png)
The component has a property called `isMenuEmpty` that you can access from code. If this is
set to true then the component will not show an empty menu with no buttons defined.

338
docs/core/components/card-view.component.md Normal file
View File

@@ -0,0 +1,338 @@
---
Title: Card View component
Added: v2.0.0
Status: Active
Last reviewed: 2018-05-09
---
# [Card View component](../../../lib/core/card-view/components/card-view/card-view.component.ts "Defined in card-view.component.ts")
Displays a configurable property list renderer.
![adf-custom-view](../../docassets/images/adf-custom-view.png)
## Basic Usage
Defining properties from HTML:
```html
<adf-card-view
[properties]="[{label: 'My Label', value: 'My value'}]"
[editable]="false">
</adf-card-view>
```
Defining properties from Typescript:
```ts
this.properties = [
new CardViewTextItemModel({
label: 'Name',
value: 'Spock',
key: 'name',
default: 'default bar' ,
multiline: false,
icon: 'icon';
}),
new CardViewMapItemModel({
label: 'My map',
value: new Map([['999', 'My Value']]),
key: 'map',
default: 'default map value' ,
clickable: true
}),
new CardViewDateItemModel({
label: 'Date of birth',
value: someDate,
key: 'date-of-birth',
default: new Date(),
format: '<any format that momentjs accepts>',
editable: true
}),
new CardViewDatetimeItemModel({
label: 'Datetime of birth',
value: someDatetime,
key: 'datetime-of-birth',
default: new Date(),
format: '<any format that momentjs accepts>',
editable: true
}),
new CardViewBoolItemModel({
label: 'Vulcanian',
value: true,
key: 'vulcanian',
default: false
}),
new CardViewIntItemModel({
label: 'Intelligence',
value: 213,
key: 'intelligence',
default: 1
}),
new CardViewFloatItemModel({
label: 'Mental stability',
value: 9.9,
key: 'mental-stability',
default: 0.0
}),
new CardViewKeyValuePairsItemModel({
label: 'Variables',
value: [],
key: 'key-value-pairs'
}),
new CardViewSelectItemModel({
label: 'Select box',
value: 'one',
options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
key: 'select'
}),
...
]
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| displayEmpty | `boolean` | true | Toggles whether or not to show empty items in non-editable mode. |
| editable | `boolean` | | Toggles whether or not the items can be edited. |
| properties | [`CardViewItem`](../../../lib/core/card-view/interfaces/card-view-item.interface.ts)`[]` | | (**required**) Items to show in the card view. |
## Details
You define the property list, the [`CardViewComponent`](../../core/components/card-view.component.md) does the rest. Each property represents a card view item (a row) in the [card view component](card-view.component.md). The following item types are available by default:
- [**CardViewTextItemModel**](#card-text-item) - _for text items_
- [**CardViewMapItemModel**](#card-map-item) - _for map items_
- [**CardViewDateItemModel**](#card-date-item) - _for date items_
- [**CardViewDatetimeItemModel**](#card-datetime-item) - _for datetime items_
- [**CardViewBoolItemModel**](#card-bool-item) - _for bool items (checkbox)_
- [**CardViewIntItemModel**](#card-int-item) - _for integer items_
- [**CardViewFloatItemModel**](#card-float-item) - _for float items_
- [**CardViewKeyValuePairsItemModel**](#card-key-value-pairs-item) - _for key-value-pairs items_
- [**CardViewSelectItemModel**](#card-select-item) - _for select items_
Each of these types implements the [Card View Item interface](../interfaces/card-view-item.interface.md):
```ts
export interface CardViewItem {
label: string;
value: any;
key: string;
default?: any;
type: string;
displayValue: string;
editable?: boolean;
icon?: string;
}
```
You can also define your own item types. See the
[Card View Item interface](../interfaces/card-view-item.interface.md) page for details of how to do
this.
### Editing
You can optionally set up the card view so that its properties can be edited. You can control
the editing of properties at two levels:
- **Global level** - _via the editable parameter of the card-view.component_
- **[`Property`](../../../lib/content-services/content-metadata/interfaces/property.interface.ts) level** - _in each property via the editable attribute_
If you set the global editable parameter to false, no properties can be edited regardless of their
individual `editable` settings.
See the [Card View Update service](../services/card-view-update.service.md)
page for details of how to use the service to respond to clicks and edits in a card view.
You can use this, for example, to save the edits within your application or to highlight a
clicked item.
### Defining properties
The `properties` array contains instances of models that represent the layout of the Card View.
The ordering of the models in the array matches the ordering of items in the view. Each of the
models extends the abstract [`CardViewBaseItemModel`](../../../lib/core/card-view/models/card-view-baseitem.model.ts) class to add functionality for
specific data types, as described below.
#### Card Text Item
[`CardViewTextItemModel`](../../../lib/core/card-view/models/card-view-textitem.model.ts) is a property type for text properties.
```ts
const textItemProperty = new CardViewTextItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | | Item label |
| value\* | any | | The original data value for the item |
| key\* | string | | Identifying key (important when editing the item) |
| default | any | | The default value to display if the value is empty |
| displayValue\* | string | | The value to display |
| editable | boolean | false | Toggles whether the item is editable |
| clickable | boolean | false | Toggles whether the property responds to clicks |
| icon | string | | The material icon to show beside the item if it is clickable |
| multiline | boolean | false | Single or multiline text |
| pipes | [`CardViewTextItemPipeProperty`](../../../lib/core/card-view/interfaces/card-view-textitem-pipe-property.interface.ts)\[] | \[] | Pipes to be applied to the text before display |
##### Using pipes with a Card Text Item
You can use pipes for text items in almost the same way as you would do it in an HTML template.
You can provide an array of pipes with additional pipe parameters using the `pipes` property:
```ts
const myWonderfulPipe1: PipeTransform = <whatever PipeTransform implmentation>;
const myWonderfulPipe2: PipeTransform = <whatever PipeTransform implmentation>;
new CardViewTextItemModel({
label: 'some label',
value: someValue,
key: 'some-key',
pipes: [
{ pipe: myWonderfulPipe1, params: ['first-param', 'second-param'] },
{ pipe: myWonderfulPipe2, params: ['first-param', 'second-param'] }
]
});
```
#### Card Map Item
[`CardViewMapItemModel`](../../../lib/core/card-view/models/card-view-mapitem.model.ts) is a property type for map properties.
```ts
const mapItemProperty = new CardViewMapItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | | Item label |
| value\* | Map | | A map that contains the key value pairs |
| key\* | string | | Identifying key (important when editing the item) |
| default | any | | The default value to display if the value is empty |
| displayValue\* | string | | The value to display |
| clickable | boolean | false | Toggles whether the property responds to clicks |
#### Card Date Item
[`CardViewDateItemModel`](../../../lib/core/card-view/models/card-view-dateitem.model.ts) is a property type for date properties.
```ts
const dateItemProperty = new CardViewDateItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | | Item label |
| value\* | any | | The original data value for the item |
| key\* | string | | Identifying key (important when editing the item) |
| default | any | | The default value to display if the value is empty |
| displayValue\* | any | | The value to display |
| editable | boolean | false | Toggles whether the item is editable |
| format | boolean | "MMM DD YYYY" | Any date format that momentjs accepts |
#### Card Datetime Item
[`CardViewDatetimeItemModel`](../../../lib/core/card-view/models/card-view-datetimeitem.model.ts) is a property type for datetime properties.
```ts
const datetimeItemProperty = new CardViewDatetimeItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | | Item label |
| value\* | any | | The original data value for the item |
| key\* | string | | Identifying key (important when editing the item) |
| default | any | any | The default value to display if the value is empty |
| displayValue\* | string | | The value to display |
| editable | boolean | false | Toggles whether the item is editable |
| format | boolean | "MMM DD YYYY HH:mm" | Any datetime format that momentjs accepts |
#### Card Bool Item
[`CardViewBoolItemModel`](../../../lib/core/card-view/models/card-view-boolitem.model.ts) is a property type for boolean properties.
```ts
const boolItemProperty = new CardViewBoolItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | | Item label |
| value\* | boolean | | The original data value for the item |
| key\* | string | | Identifying key (important when editing the item) |
| default | boolean | false | The default value to display if the value is empty |
| displayValue\* | boolean | | The value to display |
| editable | boolean | false | Toggles whether the item is editable |
#### Card Int Item
[`CardViewIntItemModel`](../../../lib/core/card-view/models/card-view-intitem.model.ts) is a property type for integer properties.
```ts
const intItemProperty = new CardViewIntItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | | Item label |
| value\* | integer | | The original data value for the item |
| key\* | string | | Identifying key (important when editing the item) |
| default | integer | | The default value to display if the value is empty |
| displayValue\* | integer | | The value to display |
| editable | boolean | false | Toggles whether the item is editable |
#### Card Float Item
[`CardViewFloatItemModel`](../../../lib/core/card-view/models/card-view-floatitem.model.ts) is a property type for float properties.
```ts
const floatItemProperty = new CardViewFloatItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | | Item label |
| value\* | float | | The original data value for the item |
| key\* | string | | Identifying key (important when editing the item) |
| default | float | | The default value to display if the value is empty |
| displayValue\* | float | | The value to display |
| editable | boolean | false | Toggles whether the item is editable |
#### Card Key Value Pairs Item
[`CardViewKeyValuePairsItemModel`](../../../lib/core/card-view/models/card-view-keyvaluepairs.model.ts) is a property type for key-value properties.
```ts
const keyValuePairsItemProperty = new CardViewKeyValuePairsItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | | Item label |
| key\* | string | | Identifying key (important when editing the item) |
| editable | boolean | false | Toggles whether the item is editable |
| value\* | `[{ name: '', value: '' }, ...]` | | The original data value for the item |
#### Card Select Item
[`CardViewSelectItemModel`](../../../lib/core/card-view/models/card-view-selectitem.model.ts) is a property type for select properties.
```ts
const selectItemProperty = new CardViewSelectItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | | Item label |
| key\* | string | | Identifying key (important when editing the item) |
| editable | boolean | false | Toggles whether the item is editable |
| value | string | | The original data value for the item |
| options$\* | [`Observable`](http://reactivex.io/documentation/observable.html)&lt;[`CardViewSelectItemOption`](../../../lib/core/card-view/interfaces/card-view-selectitem-properties.interface.ts)\[]> | | The original data value for the item |
## See also
- [Card View Update service](../services/card-view-update.service.md)
- [Card View Item interface](../interfaces/card-view-item.interface.md)

74
docs/core/components/comment-list.component.md Normal file
View File

@@ -0,0 +1,74 @@
---
Title: Comment list component
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-14
---
# [Comment list component](../../../lib/core/comments/comment-list.component.ts "Defined in comment-list.component.ts")
Shows a list of comments.
![ADF Comment List](../../docassets/images/adf-comment-list.png)
## Basic Usage
Populate the comments in the component class:
```ts
import { CommentModel } from '@alfresco/adf-core';
export class SomeComponent implements OnInit {
comments: CommentModel[] = [
{
id: 1,
message: 'Comment number 1',
created: new Date(),
createdBy: {
id: 1,
email: 'john.doe@alfresco.com',
firstName: 'John',
lastName: 'Doe'
},
},
{
id: 2,
message: 'Comment number 2',
created: new Date(),
createdBy: {
id: 2,
email: 'jane.doe@alfresco.com',
firstName: 'Jane',
lastName: 'Doe'
},
}
];
onClickCommentRow(comment: CommentModel) {
console.log('Clicked row: ', comment);
}
```
In the component template use the [comment list component](comment-list.component.md):
```html
<adf-comment-list
[comments]="comments"
(clickRow)="onClickCommentRow($event)">
</adf-comment-list>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| comments | [`CommentModel`](../../../lib/core/models/comment.model.ts)`[]` | | The comments data used to populate the list. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| clickRow | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`CommentModel`](../../../lib/core/models/comment.model.ts)`>` | Emitted when the user clicks on one of the comment rows. |

45
docs/core/components/comments.component.md Normal file
View File

@@ -0,0 +1,45 @@
---
Title: Comments Component
Added: v2.0.0
Status: Active
---
# [Comments Component](../../../lib/core/comments/comments.component.ts "Defined in comments.component.ts")
Displays comments from users involved in a specified task or content and allows an involved user to add a comment to a task or a content.
![adf-comments](../../docassets/images/adf-comments.png)
## Basic Usage Task
```html
<adf-comments
[taskId]="YOUR_TASK_ID"
[readOnly]="YOUR_READ_ONLY_FLAG">
</adf-comments>
```
## Basic Usage Content
```html
<adf-comments
[nodeId]="YOUR_NODE_ID"
[readOnly]="YOUR_READ_ONLY_FLAG">
</adf-comments>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| nodeId | `string` | | The numeric ID of the node. |
| readOnly | `boolean` | false | Are the comments read only? |
| taskId | `string` | | The numeric ID of the task. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs while displaying/adding a comment. |

305
docs/core/components/data-column.component.md Normal file
View File

@@ -0,0 +1,305 @@
---
Title: Data Column Component
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-12
---
# [Data Column Component](../../../lib/core/data-column/data-column.component.ts "Defined in data-column.component.ts")
Defines column properties for DataTable, Tasklist, Document List and other components.
## Contents
- [Basic Usage](#basic-usage)
- [Class members](#class-members)
- [Properties](#properties)
- [Details](#details)
- [Conditional visibility](#conditional-visibility)
- [Automatic column header translation](#automatic-column-header-translation)
- [Custom tooltips](#custom-tooltips)
- [Column Template](#column-template)
- [Styling Techniques](#styling-techniques)
- [See also](#see-also)
## Basic Usage
```html
<adf-datatable [data]="data">
<data-columns>
<data-column key="icon" type="image" [sortable]="false"></data-column>
<data-column key="id" title="Id"></data-column>
<data-column key="createdOn" title="Created"></data-column>
<data-column key="name" title="Name" class="full-width name-column"></data-column>
<data-column key="createdBy.name" title="Created By"></data-column>
</data-columns>
</adf-datatable>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| cssClass | `string` | | Additional CSS class to be applied to column (header and cells). |
| format | `string` | | Value format (if supported by the parent component), for example format of the date. |
| formatTooltip | `Function` | | Custom tooltip formatter function. |
| key | `string` | | Data source key. Can be either a column/property key like `title` or a property path like `createdBy.name`. |
| sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
| srTitle | `string` | | Title to be used for screen readers. |
| title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
## Details
### Conditional visibility
You can use `ngIf` directives to provide conditional visibility support for the columns:
```html
<data-column
*nfIg="showNameColumn"
key="name"
title="MY.RESOURCE.KEY">
</data-column>
```
### Automatic column header translation
You can use i18n resource keys with the
[`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) `title` property.
The component will automatically check the appropriate i18n resources and fetch the corresponding value.
```html
<data-column
key="name"
title="MY.RESOURCE.KEY">
</data-column>
```
This feature is optional. Regular text (either plain or converted via the `translate` pipe) will still work as normal.
### Custom tooltips
You can create custom tooltips for the table cells by providing a `formatTooltip` property with a tooltip formatter function when declaring a data column.
```html
<data-column
title="Name"
key="name"
[formatTooltip]="getNodeNameTooltip"
class="full-width ellipsis-cell">
</data-column>
```
And the code in this case will be similar to the following:
```ts
import { DataColumn, DataRow } from '@alfresco/adf-core';
@Component({...})
export class MyComponent {
...
getNodeNameTooltip(row: DataRow, col: DataColumn): string {
if (row) {
return row.getValue('name');
}
return null;
}
}
```
To disable the tooltip your function can return `null` or an empty string.
### Column Template
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`](../../../lib/core/datatable/data/datatable-adapter.ts) | Data adapter instance. |
| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | Current data row instance. |
| col | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | 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 to define a variable that is bound to `$implicit` as shown below:
```html
<ng-template let-context="$implicit">
<!-- template body -->
</ng-template>
```
The name format is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want to bind the template data context to.
You can also get a cell value from the underlying [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts):
```ts
context.data.getValue(entry.row, entry.col);
```
You can retrieve all property values for the underlying node, including nested properties (via property paths):
```ts
context.row.getValue('name')
context.row.getValue('createdByUser.displayName')
```
You may want to use the **row** API to get access to the raw values.
<!-- {% raw %} -->
```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>
```
<!-- {% endraw %} -->
Use the **data** API to get values with post-processing (eg, datetime or icon conversion).
In the Example below we will prepend `Hi!` to each file and folder name in the list:
<!-- {% raw %} -->
```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>
```
<!-- {% endraw %} -->
In the Example below we will integrate the [adf-tag-node-list](../../content-services/tag-node-list.component.md) component
within the document list.
<!-- {% raw %} -->
```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>
```
<!-- {% endraw %} -->
![Tag component in document List](../../docassets/images/document-list-tag-template.png)
### 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="adf-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 ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-datatable-cell.adf-datatable-cell--image.adf-image-table-cell > div > div > mat-icon > svg {
fill: #00bcd4;
}
```
Once your application starts you should see the following icon for each selected row:
![view-child](../../docassets/images/document-list-custom-icon.png)
#### 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 ::ng-deep th.desktop-only .cell-value {
display: none;
}
alfresco-document-list ::ng-deep td.desktop-only .cell-value {
display: none;
}
}
```
Now you can declare columns and assign the `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**
![Responsive Desktop](../../docassets/images/responsive-desktop.png)
**Mobile View**
![Responsive Mobile](../../docassets/images/responsive-mobile.png)
## See also
- [Document list component](../../content-services/document-list.component.md)
- [Datatable component](datatable.component.md)
- [Task list component](../../process-services/components/task-list.component.md)

648
docs/core/components/datatable.component.md Normal file
View File

@@ -0,0 +1,648 @@
---
Title: DataTable component
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-12
---
# [DataTable component](../../../lib/core/datatable/components/datatable/datatable.component.ts "Defined in datatable.component.ts")
Displays data as a table with customizable columns and presentation.
![DataTable demo](../../docassets/images/datatable-demo.png)
See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/)
## Contents
- [Basic usage](#basic-usage)
- [Setting the rows and column schema](#setting-the-rows-and-column-schema)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Supplying data for the table](#supplying-data-for-the-table)
- [Customizing columns](#customizing-columns)
- [DataTable DOM Events](#datatable-dom-events)
- [Card view](#card-view)
- [Using events](#using-events)
- [Customizing the component's styles](#customizing-the-components-styles)
- [Truncated text](#truncated-text)
- [Expanded cells](#expanded-cells)
- [Combining classes](#combining-classes)
- [Sticky header](#sticky-header)
- [See also](#see-also)
## Basic usage
**app.component.html**
```html
<adf-datatable
[data]="data">
</adf-datatable>
```
**app.component.ts**
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
// schema
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
cssClass: 'full-width',
sortable: true
}
]
);
}
}
```
### Setting the rows and column schema
You can set rows and columns in the [`ObjectDataTableAdapter`](../../../lib/core/datatable/data/object-datatable-adapter.ts) as shown below:
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
// columns
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
cssClass: 'full-width',
sortable: true
}
]
);
}
}
```
```html
<adf-datatable
[data]="data">
</adf-datatable>
```
You can also set rows and use an HTML-based schema declaration as shown below:
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
[]
);
}
}
```
```html
<adf-datatable [data]="data">
<data-columns>
<data-column key="icon" type="image" [sortable]="false"></data-column>
<data-column key="id" title="Id"></data-column>
<data-column key="createdOn" title="Created"></data-column>
<data-column key="name" title="Name" class="full-width name-column"></data-column>
<data-column key="createdBy.name" title="Created By"></data-column>
</data-columns>
</adf-datatable>
```
You can also set rows to the [`ObjectDataTableAdapter`](../../../lib/core/datatable/data/object-datatable-adapter.ts) and set columns as an input as shown below :
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
schema: any;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
[]
);
// columns
this.schema =
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: true
}
];
}
}
```
```html
<adf-datatable
[data]="data"
[columns]="schema">
</adf-datatable>
```
You can also set rows and columns through inputs as shown below :
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
rows: any;
schema: any;
constructor() {
// data
this.rows =
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
];
// columns
this.schema =
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: true
}
];
}
}
```
```html
<adf-datatable
[rows]="rows"
[columns]="schema">
</adf-datatable>
```
### [Transclusions](../../user-guide/transclusion.md)
You can add [Data column component](data-column.component.md) instances to define columns for the
table as described in the usage examples and the [Customizing columns](#customizing-columns) section.
You can also supply a `<adf-no-content-template>` or an
[Empty list component](empty-list.component.md) sub-component to show when the table is empty:
```html
<adf-datatable ...>
<adf-no-content-template>
<!--Add your custom empty template here-->
<ng-template>
<h1>Sorry, no content</h1>
</ng-template>
</adf-no-content-template>
</adf-datatable>
```
```html
<adf-datatable ...>
<adf-empty-list>
<adf-empty-list-header>"'My custom Header'"</adf-empty-list-header>
<adf-empty-list-body>"'My custom body'"</adf-empty-list-body>
<adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer>
<ng-content>"'HTML Layout'"</ng-content>
</adf-empty-list>
</adf-datatable>
```
Another useful transclusion is the `<adf-loading-content-template>`, which is shown
while the data for the table is loading:
```html
<adf-datatable ...>
<adf-loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<mat-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</mat-progress-spinner>
</ng-template>
</adf-loading-content-template>
</adf-datatable>
```
```js
isLoading(): boolean {
//your custom logic to identify if you are in a loading state
}
```
Note that you can use both the `<adf-no-content-template>` and the `<adf-loading-content-template>`
together in the same datatable.
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| actions | `boolean` | false | Toggles the data actions column. |
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
| allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](../directives/upload.directive.md) for further details). |
| columns | `any[]` | \[] | The columns that the datatable will show. |
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data source for the table |
| display | `string` | DisplayMode.List | Selects the display mode of the table. Can be "list" or "gallery". |
| fallbackThumbnail | `string` | | Fallback image for rows where the thumbnail is missing. |
| loading | `boolean` | false | Flag that indicates if the datatable is in loading state and needs to show the loading template (see the docs to learn how to configure a loading template). |
| multiselect | `boolean` | false | Toggles multiple row selection, which renders checkboxes at the beginning of each row. |
| noPermission | `boolean` | false | Flag that indicates if the datatable should show the "no permission" template. |
| rowMenuCacheEnabled | `boolean` | true | Should the items for the row actions menu be cached for reuse after they are loaded the first time? |
| rowStyle | `string` | | The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples. |
| rowStyleClass | `string` | "" | The CSS class to apply to every row. |
| rows | `any[]` | \[] | The rows that the datatable will show. |
| selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| showHeader | `boolean` | true | Toggles the header. |
| sorting | `any[]` | \[] | Define the sort order of the datatable. Possible values are : [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`] |
| stickyHeader | `boolean` | false | Toggles the sticky header mode. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| executeRowAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowActionEvent`](../../../lib/core/datatable/components/datatable/data-row-action.event.ts)`>` | Emitted when the user executes a row action. |
| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/datatable/data/data-row-event.model.ts)`>` | Emitted when the user clicks a row. |
| rowDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/datatable/data/data-row-event.model.ts)`>` | Emitted when the user double-clicks a row. |
| showRowActionsMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/datatable/components/datatable/data-cell.event.ts)`>` | Emitted before the actions menu is displayed for a row. |
| showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/datatable/components/datatable/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. |
## Details
### Supplying data for the table
The column layout and row data are supplied to the table using an object that implements the
[`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) interface. This interface hides the internal details of the class that provides
the data, which gives a lot of flexibility in how the data can be stored and accessed. The DataTable
library includes a standard adapter class called [`ObjectDataTableAdapter`](../../../lib/core/datatable/data/object-datatable-adapter.ts) that is useful in many
common cases. See the [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) for full details about the interface and the [`ObjectDataTableAdapter`](../../../lib/core/datatable/data/object-datatable-adapter.ts) class.
### Customizing columns
You can define custom HTML templates for columns and also add tooltips, automatic column title translation and other features. See the [Data Column component](data-column.component.md) page
for more information.
### DataTable DOM Events
Below are the DOM events emitted by the DataTable component.
These events bubble up the component tree and can be handled by any parent component.
| Name | Description |
| ---- | ----------- |
| row-click | Raised when user clicks a row |
| row-dblclick | Raised when user double-clicks a row |
| row-select | Raised after user selects a row |
| row-unselect | Raised after user unselects a row |
| row-keyup | Raised on the 'keyup' event for the focused row. |
| sorting-changed | Raised after user clicks the sortable column header. |
For example:
```html
<root-component (row-click)="onRowClick($event)">
<child-component>
<adf-datatable></adf-datatable>
</child-component>
</root-component>
```
```ts
onRowClick(event) {
console.log(event);
}
```
![](../../docassets/images/datatable-dom-events.png)
### Card view
Set the `display` property to "gallery" to enable Card View mode:
```html
<adf-datatable
[data]="data"
[display]="'gallery'">
</adf-datatable
```
![card-view](../../docassets/images/document-list-card-view.png)
### Using events
#### row-keyup DOM event
Emitted on the 'keyup' event for the focused row.
This is an instance of `CustomEvent` with the `details` property containing the following object:
```ts
row: DataRow,
keyboardEvent: KeyboardEvent,
sender: any
```
#### rowClick event
Emitted when the user clicks a row.
Event properties:
```ts
sender: any // DataTable instance
value: DataRow, // row clicked
event: Event // original HTML DOM event
```
Handler example:
```ts
onRowClicked(event: DataRowEvent) {
console.log(event.value);
}
```
This event is cancellable. You can use `event.preventDefault()` to prevent the default behavior.
#### rowDblClick event
Emitted when the user double-clicks a row.
Event properties:
```ts
sender: any // DataTable instance
value: DataRow, // row clicked
event: Event // original HTML DOM event
```
Handler example:
```ts
onRowDblClicked(event: DataRowEvent) {
console.log(event.value);
}
```
This event is cancellable. You can use `event.preventDefault()` to prevent the default behavior.
#### showRowContextMenu event
Emitted before the context menu is displayed for a row.
Note that the DataTable itself does not populate the context menu with items.
You can provide all necessary content via the handler.
Event properties:
```ts
value: {
row: DataRow,
col: DataColumn,
actions: []
}
```
Handler example:
```ts
onShowRowContextMenu(event: DataCellEvent) {
event.value.actions = [
{ ... },
{ ... }
]
}
```
This event is cancellable. You can use `event.preventDefault()` to prevent the default behavior.
The DataTable will automatically render the supplied menu items.
See the [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core)
documentation for more details on the format and behavior of context actions.
#### showRowActionsMenu event
Emitted before the actions menu is displayed for a row.
Requires the `actions` property to be set to `true`.
Event properties:
```ts
value: {
row: DataRow,
action: any
}
```
Note that the DataTable itself does not populate the action menu with items.
You can provide all necessary content via the handler.
This event is cancellable. You can use `event.preventDefault()` to prevent the default behavior.
#### executeRowAction event
Emitted when the user executes a row action.
This usually accompanies a `showRowActionsMenu` event.
The DataTable itself does not execute actions but provides support for external
integration. If actions are provided using the `showRowActionsMenu` event
then `executeRowAction` will be automatically executed when the user clicks a
corresponding menu item.
```html
<adf-datatable
[data]="data"
[multiselect]="multiselect"
[actions]="true"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)">
</adf-datatable>
```
```ts
import { DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core';
onShowRowActionsMenu(event: DataCellEvent) {
let myAction = {
title: 'Hello'
// your custom metadata needed for onExecuteRowAction
};
event.value.actions = [
myAction
];
}
onExecuteRowAction(event: DataRowActionEvent) {
let args = event.value;
console.log(args.row);
console.log(args.action);
window.alert(`My custom action: ${args.action.title}`);
}
```
![](../../docassets/images/datatable-actions-ui.png)
![](../../docassets/images/datatable-actions-console.png)
You can use any payloads for row actions. The only requirement for the objects is that they
must have a `title` property.
When an action is selected in the dropdown menu, the DataTable invokes the `executeRowAction` event.
Use this to handle the response, inspect the action payload (and all custom properties defined
earlier), and perform the corresponding actions.
### Customizing the component's styles
The datatable component is ready to be used out of the box although you might want to customize it to better fit your needs.
### Truncated text
By default, the content of the cells is wrapped so you can see all the data inside. See picture bellow.
![](../../docassets/images/datatable-wrapped-text.png)
However, you can also truncate the text within these cells by using the `adf-ellipsis-cell` class in the desired column.
```json
{
type: 'text',
key: 'createdOn',
title: 'Created On',
sortable: true,
cssClass: 'adf-ellipsis-cell'
}
```
![](../../docassets/images/datatable-truncated-text.png)
### Expanded cells
This component makes use of a flex layout. All cells have the same semantic importance, so all of them have the same width. You can alter this behavior by adding one of the following classes in the desired column to make it grow wider.
![](../../docassets/images/datatable-expand-5.png)
This classes go from `adf-expand-cell-1` to `adf-expand-cell-5`. The higher the number in the class the wider the column will get. You can choose the one that better suits your needs.
### Combining classes
All these classes can be combined together to fully fit your needs and make your datatable component look as you want.
```json
{
type: 'text',
key: 'name',
title: 'Name',
cssClass: 'adf-ellipsis-cell adf-expand-cell-3'
}
```
### Sticky header
If you have a long list of rows and you want to fix the header in place so you always see it you only have to follow this 2-step process.
First, you will need to set the stickyHeader property of your datatable to `true`:
```html
<adf-datatable
[data]="data"
[stickyHeader]="true">
</adf-datatable>
```
Second and last, you will need to set the height of your datatable in its parent's container so that the datatable adapts to it, i.e. `height: 300px;`. You will also need to set the overflow-y attribute to auto, `overflow-y: auto;`, so it hides when the rows exceed the height of the datatable component.
```html
<div style="height: 300px; overflow-y: auto;">
<adf-datatable
[data]="data"
[stickyHeader]="'true'">
</adf-datatable>
</div>
```
Final result
![](../../docassets/images/datatable-sticky-header.png)
## See also
- [Data column component](data-column.component.md)
- [Pagination component](pagination.component.md)
- [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts)
- [Document list component](../../content-services/document-list.component.md)

75
docs/core/components/empty-content.component.md Normal file
View File

@@ -0,0 +1,75 @@
---
Title: Empty Content Component
Added: v2.4.0
Status: Active
Last reviewed: 2019-02-01
---
# [Empty Content Component](../../../lib/core/templates/empty-content/empty-content.component.ts "Defined in empty-content.component.ts")
Provides a generic "Empty Content" placeholder for components.
![Favorites screen](../../docassets/images/empty-content-favorites.png)
## Basic usage
```html
<adf-document-list>
<adf-custom-empty-content-template>
<adf-empty-content
icon="star_rate"
title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
</adf-empty-content>
</adf-custom-empty-content-template>
</adf-document-list>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| icon | `string` | "cake" | Material Icon to use. |
| subtitle | `string` | "" | String or Resource Key for the subtitle. |
| title | `string` | "" | String or Resource Key for the title. |
## Details
### Usage examples
```html
<adf-document-list>
<adf-custom-empty-content-template>
<adf-empty-content
icon="star_rate"
title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
</adf-empty-content>
</adf-custom-empty-content-template>
</adf-document-list>
```
![Favorites screen](../../docassets/images/empty-content-favorites.png)
You can also use multiple lines instead of the subtitle section:
```html
<adf-document-list>
<adf-custom-empty-content-template>
<adf-empty-content
icon="delete"
title="APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE">
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
</adf-empty-content>
</adf-custom-empty-content-template>
</adf-document-list>
```
![Trashcan screen](../../docassets/images/empty-content-trashcan.png)
## See also
- [Error content component](error-content.component.md)

51
docs/core/components/empty-list.component.md Normal file
View File

@@ -0,0 +1,51 @@
---
Title: Empty list component
Added: v2.0.0
Status: Active
---
# [Empty list component](../../../lib/core/datatable/components/datatable/empty-list.component.ts "Defined in empty-list.component.ts")
Displays a message indicating that a list is empty.
![](../../docassets/images/adf-empty-list.png)
## Basic Usage
```html
<adf-datatable ...>
<adf-empty-list>
<adf-empty-list-header>"'My custom Header'"</adf-empty-list-header>
<adf-empty-list-body>"'My custom body'"</adf-empty-list-body>
<adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer>
<ng-content>"'HTML Layout'"</ng-content>
</adf-empty-list>
</adf-datatable>
```
### [Transclusions](../../user-guide/transclusion.md)
You can supply a custom header, body, and footer for an empty list using special
sub-components:
```html
<adf-empty-list>
<adf-empty-list-header>"'My custom Header'"</adf-empty-list-header>
<adf-empty-list-body>"'My custom body'"</adf-empty-list-body>
<adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer>
<ng-content>"'HTML Layout'"</ng-content>
</adf-empty-list>
```
## Class members
## Details
This component provides a custom display to show when a [Datatable component](datatable.component.md) has
no content.
## See also
- [Datatable component](datatable.component.md)

54
docs/core/components/error-content.component.md Normal file
View File

@@ -0,0 +1,54 @@
---
Title: Error Content Component
Added: v2.4.0
Status: Active
Last reviewed: 2018-09-13
---
# [Error Content Component](../../../lib/core/templates/error-content/error-content.component.ts "Defined in error-content.component.ts")
Displays info about a specific error.
## Basic Usage
Once you have caught the error in your server you will need to redirect to `/error/errorCode` to display information about that error.
```ts
this.router.navigate(['/error', errorCode]);
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| errorCode | `string` | "UNKNOWN" | Error code associated with this error. |
| returnButtonUrl | `string` | "/" | Target URL for the return button. |
| secondaryButtonUrl | `string` | "report-issue" | Target URL for the secondary button. |
## Details
Note that you need to provide values for the variables used in the view template.
You can customize your error messages by adding them to the translate files inside
`lib/core/i18n`:
```json
"ERROR_CONTENT": {
"404": {
"TITLE": "An error occurred.",
"DESCRIPTION": "We couldn’t find the page you were looking for.",
"SECONDARY_BUTTON": {
"TEXT": ""
},
"RETURN_BUTTON": {
"TEXT": "Back to home"
}
}
}
```
## See also
- [Empty Content component](empty-content.component.md)

61
docs/core/components/form-field.component.md Normal file
View File

@@ -0,0 +1,61 @@
---
Title: Form field component
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-20
---
# [Form field component](../../../lib/core/form/components/form-field/form-field.component.ts "Defined in form-field.component.ts")
Represents a UI field in a form.
## Basic Usage
All form field editors (aka widgets) on a [`Form`](../../../lib/process-services/task-list/models/form.model.ts) are rendered by means of a [`FormFieldComponent`](../../core/components/form-field.component.md)
that takes an instance of a [`FormFieldModel`](../../core/models/form-field.model.md):
```html
<adf-form-field [field]="field"></adf-form-field>
```
This component depends on the [`FormRenderingService`](../../core/services/form-rendering.service.md) to map the [`FormFieldModel`](../../core/models/form-field.model.md) to a [`Form`](../../../lib/process-services/task-list/models/form.model.ts) Field UI component
based on the field type or the metadata information.
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| field | [`FormFieldModel`](../../core/models/form-field.model.md) | null | Contains all the necessary data needed to determine what UI Widget to use when rendering the field in the form. You would typically not create this data manually but instead create the form in APS and export it to get to all the [`FormFieldModel`](../../core/models/form-field.model.md) definitions. |
## Details
You would typically not use this component directly but instead use the `<adf-form>` component, which under the hood
uses `<adf-form-field>` components to render the form fields.
### Field Type -> Form Field Component mappings
Forms defined in APS have the following default mappings for the form fields:
| _APS [Form](../../../lib/process-services/task-list/models/form.model.ts) Designer_ Widget | Field Type | Component Type |
| ------------------------------------------------------------------------------------------ | ---------- | -------------- |
| Text | text | [`TextWidgetComponent`](../../../lib/core/form/components/widgets/text/text.widget.ts) |
| Multi-line text | multi-line-text | [`MultilineTextWidgetComponentComponent`](../../../lib/core/form/components/widgets/multiline-text/multiline-text.widget.ts) |
| Number | integer | [`NumberWidgetComponent`](../../../lib/core/form/components/widgets/number/number.widget.ts) |
| Checkbox | boolean | [`CheckboxWidgetComponent`](../../../lib/core/form/components/widgets/checkbox/checkbox.widget.ts) |
| Date | date | [`DateWidgetComponent`](../../../lib/core/form/components/widgets/date/date.widget.ts) |
| Dropdown | dropdown | [`DropdownWidgetComponent`](../../../lib/core/form/components/widgets/dropdown/dropdown.widget.ts) |
| Typeahead | typeahead | [`TypeaheadWidgetComponent`](../../../lib/core/form/components/widgets/typeahead/typeahead.widget.ts) |
| Amount | amount | [`AmountWidgetComponent`](../../../lib/core/form/components/widgets/amount/amount.widget.ts) |
| Radio buttons | radio-buttons | [`RadioButtonsWidgetComponent`](../../../lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.ts) |
| People | people | [`PeopleWidgetComponent`](../../../lib/core/form/components/widgets/people/people.widget.ts) |
| Group of people | functional-group | [`FunctionalGroupWidgetComponent`](../../../lib/core/form/components/widgets/functional-group/functional-group.widget.ts) |
| Dynamic table | dynamic-table | [`DynamicTableWidgetComponent`](../../../lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.ts) |
| Hyperlink | hyperlink | [`HyperlinkWidgetComponent`](../../../lib/core/form/components/widgets/hyperlink/hyperlink.widget.ts) |
| Header | group | [`ContainerWidgetComponent`](../../../lib/core/form/components/widgets/container/container.widget.ts) |
| Attach File | upload | AttachWidgetComponent or [`UploadWidgetComponent`](../../../lib/core/form/components/widgets/upload/upload.widget.ts) (based on metadata) |
| Display value | readonly | [`TextWidgetComponent`](../../../lib/core/form/components/widgets/text/text.widget.ts) |
| Display text | readonly-text | [`DisplayTextWidgetComponent`](../../../lib/core/form/components/widgets/display-text/display-text.widget.ts) |
| N/A | container | [`ContainerWidgetComponent`](../../../lib/core/form/components/widgets/container/container.widget.ts) (layout component) |
| N/A | N/A | [`UnknownWidgetComponent`](../../../lib/core/form/components/widgets/unknown/unknown.widget.ts) |

26
docs/core/components/form-list.component.md Normal file
View File

@@ -0,0 +1,26 @@
---
Title: Form List Component
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-20
---
# [Form List Component](../../../lib/core/form/components/form-list.component.ts "Defined in form-list.component.ts")
Shows forms as a list.
## Basic Usage
```html
<adf-form-list
[forms]="[{ name: 'My Name', lastUpdatedByFullName: 'My User Name', lastUpdated: '2017-06-01'}]">
</adf-form-list>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| forms | `any[]` | \[] | The array that contains the information to show inside the list. |

368
docs/core/components/form.component.md Normal file
View File

@@ -0,0 +1,368 @@
---
Title: Form component
Added: v2.0.0
Status: Active
Last reviewed: 2019-01-16
---
# [Form component](../../../lib/core/form/components/form.component.ts "Defined in form.component.ts")
Shows a [`Form`](../../../lib/process-services/task-list/models/form.model.ts) from APS
(See it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/))
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Displaying a form](#displaying-a-form)
- [Controlling outcome execution behaviour](#controlling-outcome-execution-behaviour)
- [Field Validators](#field-validators)
- [Common scenarios](#common-scenarios)
- [Alfresco Repositories APS configuration](#alfresco-repositories-aps-configuration)
- [See also](#see-also)
## Basic Usage
```html
<adf-form
[taskId]="taskId">
</adf-form>
```
### [Transclusions](../../user-guide/transclusion.md)
Any content in the body of `<adf-form>` will be shown when no form definition is found:
```html
<adf-form .... >
<div empty-form >
<h2>Empty form</h2>
</div>
</adf-form>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| data | [`FormValues`](../../../lib/core/form/components/widgets/core/form-values.ts) | | Custom form values map to be used with the rendered form. |
| disableCompleteButton | `boolean` | false | If true then the `Complete` outcome button is shown but it will be disabled. |
| disableStartProcessButton | `boolean` | false | If true then the `Start Process` outcome button is shown but it will be disabled. |
| fieldValidators | [`FormFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts)`[]` | \[] | Contains a list of form field validator instances. |
| form | [`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts) | | Underlying [form model](../../../lib/core/form/components/widgets/core/form.model.ts) instance. |
| formId | `number` | | The id of the form definition to load and display with custom values. |
| formName | `string` | | Name of the form definition to load and display with custom values. |
| nameNode | `string` | | Name to assign to the new node where the metadata are stored. |
| nodeId | `string` | | Content Services node ID for the form metadata. |
| path | `string` | | Path of the folder where the metadata will be stored. |
| readOnly | `boolean` | false | Toggle readonly state of the form. Forces all form widgets to render as readonly if enabled. |
| saveMetadata | `boolean` | false | Toggle saving of form metadata. |
| showCompleteButton | `boolean` | true | Toggle rendering of the `Complete` outcome button. |
| showDebugButton | `boolean` | false | Toggle debug options. |
| showRefreshButton | `boolean` | true | Toggle rendering of the `Refresh` button. |
| showSaveButton | `boolean` | true | Toggle rendering of the `Save` outcome button. |
| showTitle | `boolean` | true | Toggle rendering of the form title. |
| showValidationIcon | `boolean` | true | Toggle rendering of the validation icon next to the form title. |
| taskId | `string` | | Task id to fetch corresponding form and values. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when any error occurs. |
| executeOutcome | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormOutcomeEvent`](../../../lib/core/form/components/widgets/core/form-outcome-event.model.ts)`>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
| formCompleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Complete` outcome. |
| formContentClicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ContentLinkModel`](../../../lib/core/form/components/widgets/core/content-link.model.ts)`>` | Emitted when form content is clicked. |
| formDataRefreshed | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when form values are refreshed due to a data property change. |
| formError | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormFieldModel`](../../core/models/form-field.model.md)`[]>` | Emitted when the supplied form values have a validation error. |
| formLoaded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is loaded or reloaded. |
| formSaved | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Save` or custom outcomes. |
## Details
All `formXXX` events receive a [`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts) instance as their argument:
**MyView.component.html**
```html
<adf-form
[taskId]="selectedTask?.id"
(formSaved)="onFormSaved($event)">
</adf-form>
```
**MyView.component.ts**
```ts
onFormSaved(form: FormModel) {
console.log(form);
}
```
### Displaying a form
There are various ways to display a form. The common scenarios are detailed below.
#### Displaying a form instance by task id
```html
<adf-form
[taskId]="selectedTask?.id">
</adf-form>
```
For an existing Task both the form and its values will be fetched and displayed.
#### Displaying a form definition by form id
```html
<adf-form
[formId]="selectedFormDefinition?.id"
[data]="customData">
</adf-form>
```
In this case, only the form definition will be fetched.
#### Displaying a form definition by form name
```html
<adf-form
[formName]="selectedFormDefinition?.name"
[data]="customData">
</adf-form>
```
#### Displaying a form definition by ACS nodeId
```html
<adf-form
[nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'">
</adf-form>
```
Here, the node metadata is shown in an APS form.
If there is no form defined in APS for the type of node being used then
APS will automatically create a new form.
#### Displaying a form definition by form name, storing the form fields as metadata
```html
<adf-form
[formName]="'activitiForms:patientFolder'"
[saveMetadata]="true"
[path]="'/Sites/swsdp/documentLibrary'"
[nameNode]="'test'">
</adf-form>
```
The `nameNode` parameter is optional.
#### Displaying a form definition by ECM nodeId
```html
<adf-form
[nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'"
[saveMetadata]="true"
[path]="'/Sites/swsdp/documentLibrary'"
[nameNode]="'test'">
</adf-form>
```
Here, the node metadata is shown in an APS [`Form`](../../../lib/process-services/task-list/models/form.model.ts)
with the form fields themselves saved as metadata. The `nameNode` parameter is optional.
### Controlling outcome execution behaviour
In unusual circumstances, you may need to take complete control of form outcome execution.
You can do this by implementing the `executeOutcome` event, which is emitted for both system
outcomes and custom ones.
Note that by default, the code in your `executeOutcome` handler is executed _before_ the default
behavior but you can switch the default behavior off using `event.preventDefault()`.
You might want to do this, for example, to provide custom form validation or to show a summary
of the form validation before it is submitted.
**MyView.component.html**
```html
<adf-form
[taskId]="selectedTask?.id"
executeOutcome="validateForm($event)">
</adf-form>
```
**MyView.component.ts**
```ts
import { FormOutcomeEvent } from '@alfresco/adf-core';
export class MyView {
validateForm(event: FormOutcomeEvent) {
let outcome = event.outcome;
// you can also get additional properties of outcomes
// if you defined them within outcome definition
if (outcome) {
let form = outcome.form;
if (form) {
// check/update the form here
event.preventDefault();
}
}
}
}
```
There are two other functions that can be very useful when you need to control form outcomes:
- `saveTaskForm()` - Saves the current form
- `completeTaskForm(outcome?: string)` Saves and completes the form with a given outcome name
### Field Validators
You can supply a set of validator objects to the form using the `fieldValidators`
property. Each validator implements a check for a particular type of data (eg, a
date validator might check that the date in the field falls between 1980 and 2017).
ADF supplies a standard set of validators that handle most common cases but you can
also implement your own custom validators to replace or extend the set. See the
[Form Field Validator](../interfaces/form-field-validator.interface.md) interface for full details and examples.
### Common scenarios
#### Rendering a form using form definition JSON
See the [demo-form](../../docassets/demo-form.json) file for an example of form definition JSON.
The component below (with the JSON assigned to the `formDefinitionJSON` property), shows how a
form definition is rendered:
```ts
@Component({
selector: 'sample-form',
template: `<div class="form-container">
<adf-form
[form]="form">
</adf-form>
</div>`
})
export class SampleFormComponent implements OnInit {
form: FormModel;
formDefinitionJSON: any;
constructor(private formService: FormService) {
}
ngOnInit() {
this.form = this.formService.parseForm(this.formDefinitionJSON);
}
}
```
#### Changing a field value based on another field
A common scenario is to set the contents of one form field based on the value of another. You
could use this, say, to provide two alternative ways of entering the same information or to set
up default values that can be edited.
You can implement this in ADF using the `formFieldValueChanged` event of the
[Form service](../services/form.service.md). For example, if you had a form with a dropdown widget (id: `type`)
and a multiline text (id:`description`), you could synchronize their values as follows:
```ts
formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => {
if (e.field.id === 'type') {
const fields: FormFieldModel[] = e.form.getFormFields();
const description = fields.find(f => f.id === 'description');
if (description != null) {
console.log(description);
description.value = 'Type set to ' + e.field.value;
}
}
});
```
The code shown above subscribes to the `formFieldValueChanged` event to check whether an event
is emitted for the `type` widget. Then it finds the `description` widget and assigns some text
to its `value` property.
The result should look like the following:
![](../../docassets/images/form-service-sample-01.png)
#### Responding to all form events
Subscribe to the `formEvents` event of the [Form service](../services/form.service.md) to get notification
of all form events:
```ts
formService.formEvents.subscribe((event: Event) => {
console.log('Event fired:' + event.type);
console.log('Event Target:' + event.target);
});
```
#### Customizing the styles of form outcome buttons
You can use normal CSS selectors to style the outcome buttons of your form.
Every outcome has an CSS id value following a simple pattern:
adf-form-OUTCOME_NAME
In the CSS, you can target any outcome ID and change the style as in this example:
```css
#adf-form-complete {
background-color: blue !important;
color: white;
}
#adf-form-save {
background-color: green !important;
color: white;
}
#adf-form-customoutcome {
background-color: yellow !important;
color: white;
}
```
![](../../docassets/images/form-style-sample.png)
### Alfresco Repositories APS configuration
APS allows you to configure where to store files and folders in your on-site Alfresco repositories.
If you have your repositories configured like this, you can use the attach file/folder
form widget to get a file from those repositories and attach it to the [`Form`](../../../lib/process-services/task-list/models/form.model.ts).
**Note:** your repositories could be configured to be on different servers from the one
where your front-end is deployed. Make sure you are using the right Proxy or configuration,
otherwise you will get a cross-origin resource sharing (CORS) error.
Also, don't forget to set the `providers` property to `ALL` in the `app.config.json` login configuration:
"providers": "ALL",
## See also
- [Form Field Validator interface](../interfaces/form-field-validator.interface.md)
- [Extensibility](../../user-guide/extensibility.md)
- [Form rendering service](../services/form-rendering.service.md)
- [Form field model](../models/form-field.model.md)
- [Form service](../services/form.service.md)

59
docs/core/components/header.component.md Normal file
View File

@@ -0,0 +1,59 @@
---
Title: Header component
Added: v2.5.0
Status: Active
Last reviewed: 2018-11-20
---
# [Header component](../../../lib/core/layout/components/header/header.component.ts "Defined in header.component.ts")
Reusable header for Alfresco applications.
## Basic usage
```html
<adf-layout-header
title="title"
logo="logo.png"
[redirectUrl]="'/home'"
color="primary"
(toggled)=toggleMenu($event)>
</adf-layout-header>
```
### [Transclusions](../../user-guide/transclusion.md)
The right-hand side of the header has free-form content that you supply in the
body of the element:
```html
<adf-layout-header>
<div>Optional content for right-hand side</div>
</adf-layout-header>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| color | `string` | | Background color for the header. It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'. |
| logo | `string` | | Path to an image file for the application logo. |
| position | `string` | "start" | The side of the page that the drawer is attached to (can be 'start' or 'end') |
| redirectUrl | `string \| any[]` | "/" | The router link for the application logo, when clicked. |
| showSidenavToggle | `boolean` | true | Toggles whether the sidenav button will be displayed in the header or not. |
| title | `string` | | Title of the application. |
| tooltip | `string` | | The tooltip text for the application logo. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| clicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the sidenav button is clicked. |
## Details
This component displays a customizable header that can be reused. Use the input properties to
configure the left side (title, button) and the primary color of the header. The right part of the
header can contain other components which are transcluded in the header component.

45
docs/core/components/host-settings.component.md Normal file
View File

@@ -0,0 +1,45 @@
---
Title: Host settings component
Added: v2.0.0
Status: Internal
Last reviewed: 2019-01-16
---
# [Host settings component](../../../lib/core/settings/host-settings.component.ts "Defined in host-settings.component.ts")
Validates the URLs for ACS and APS and saves them in the user's local storage
**Note:** this is an internal component and is not meant to be used in production.
![Host settings](../../docassets/images/host-settings-component.png)
## Basic Usage
```html
<adf-host-settings>
</adf-host-settings>
```
```ts
@NgModule({
providers: [
{ provide: AppConfigService, useClass: DebugAppConfigService },
]
)]
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| providers | `string[]` | | Tells the component which provider options are available. Possible valid values are "ECM" (Content), "BPM" (Process) , "ALL" (Content and Process), 'OAUTH2' SSO. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the user cancels the changes. |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the URL is invalid. |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the changes are successfully applied. |

83
docs/core/components/icon.component.md Normal file
View File

@@ -0,0 +1,83 @@
---
Title: Icon Component
Added: v3.0.0
Status: Active
Last reviewed: 2019-02-08
---
# [Icon Component](../../../lib/core/icon/icon.component.ts "Defined in icon.component.ts")
Provides a universal way of rendering registered and named icons.
## Basic usage
```html
<!-- Font ligature -->
<adf-icon value="alert"></adf-icon>
<!-- ADF Thumbnail Service -->
<adf-icon value="image/png"></adf-icon>
<!-- Custom icon from MatIconRegistry -->
<adf-icon value="my-company:my-icon"></adf-icon>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| color | `ThemePalette` | | Theme color palette for the component. |
| value | `string` | | Icon value, which can be either a ligature name or a custom icon in the format `[namespace]:[name]`. |
## Details
You can register custom SVG files as named icons in the format `[namespace]:[name]`.
The example below shows how to register a new icon named `adf:move_file`
that points to an external file within the `assets` folder:
```ts
import { Component, OnInit } from '@angular/core';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
@Component({...})
export class AppComponent implements OnInit {
constructor(
private matIconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer
) {}
ngOnInit() {
this.matIconRegistry.addSvgIconInNamespace(
'adf',
'move_file',
this.sanitizer.bypassSecurityTrustResourceUrl(
'./assets/images/adf-move-file-24px.svg'
)
);
}
}
```
In the HTML, you can now use the icon as shown below:
```html
<adf-icon value="adf:move_file"></adf-icon>
```
### Thumbnail Service
You can also reference the icons registered with the [Thumbnail Service](../services/thumbnail.service.md)
using the `adf:` namespace.
```html
<adf-icon value="adf:image/gif"></adf-icon>
```
## See also
- [Thumbnail service](../services/thumbnail.service.md)

69
docs/core/components/infinite-pagination.component.md Normal file
View File

@@ -0,0 +1,69 @@
---
Title: Infinite Pagination component
Added: v2.0.0
Status: Active
Last reviewed: 2019-02-08
---
# [Infinite Pagination component](../../../lib/core/pagination/infinite-pagination.component.ts "Defined in infinite-pagination.component.ts")
Adds "infinite" pagination to the component it is used with.
![Infinite Pagination screenshot](../../docassets/images/InfPagination.png)
## Basic Usage
```html
<adf-infinite-pagination
[pageSize]="pageSize"
[loading]="infiniteLoading"
(loadMore)="loadNextPage($event)">
</adf-infinite-pagination>
```
### Integrating with Document List
```html
<adf-document-list #documentList ...></adf-document-list>
<adf-infinite-pagination
[target]="documentList"
[loading]="documentList.infiniteLoading">
</adf-infinite-pagination>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| isLoading | `boolean` | false | Is a new page loading? |
| pageSize | `number` | | Number of items that are added with each "load more" event. |
| target | [`PaginatedComponent`](../../../lib/core/pagination/paginated-component.interface.ts) | | Component that provides custom pagination support. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| loadMore | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`RequestPaginationModel`](../../../lib/core/models/request-pagination.model.ts)`>` | Emitted when the "Load More" button is clicked. |
## Details
[`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts) is the process of dividing a list into separate ranges or "pages" with a
certain number of items each. This allows a long list to be delivered in manageable pieces
rather than all at once. "Infinite" pagination means that there is no upper limit on
the number of items that can be displayed visually; a single page is shown initially but
the user can extend the list one page at a time by clicking a "Load More" button.
The `loadMore` event is emitted when the button is pressed. It is passed a
[`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts)
parameter which contains the details of the current page (the start offset of the
page within the list to be shown, whether there are more items left to show, etc).
See the [Pagination component](pagination.component.md) for more information about the alternative "finite" pagination scheme.
## See also
- [Document list component](../../content-services/document-list.component.md)
- [Pagination component](pagination.component.md)

50
docs/core/components/info-drawer-layout.component.md Normal file
View File

@@ -0,0 +1,50 @@
---
Title: Info drawer layout component
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# [Info drawer layout component](../../../lib/core/info-drawer/info-drawer-layout.component.ts "Defined in info-drawer-layout.component.ts")
Displays a sidebar-style information panel.
![Info drawer layout screenshot](../../docassets/images/infodrawerlayout.png)
## Basic usage
### [Transclusions](../../user-guide/transclusion.md)
There are three regions where you can add your own content using `<div>` elements
with the following names:
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
```html
<adf-info-drawer-layout>
<div info-drawer-title>File info</div>
<div info-drawer-buttons>
<mat-icon>clear</mat-icon>
</div>
<div info-drawer-content>
<mat-card>
Lorem ipsum dolor sit amet...
</mat-card>
</div>
</adf-info-drawer-layout>
```
## Details
As the name suggests, this is basically just a layout with CSS styling.
See the [Info drawer tab component](info-drawer-tab.component.md) for an alternative approach that uses tabs to structure the content of the info drawer.
## See also
- [Info drawer component](info-drawer.component.md)
- [Info drawer tab component](info-drawer-tab.component.md)

65
docs/core/components/info-drawer-tab.component.md Normal file
View File

@@ -0,0 +1,65 @@
---
Title: Info Drawer Tab component
Added: v2.4.0
Status: Active
Last reviewed: 2018-06-08
---
# [Info Drawer Tab component](../../../lib/core/info-drawer/info-drawer.component.ts "Defined in info-drawer.component.ts")
Renders tabs in a [Info drawer component](info-drawer.component.md).
![Info drawer screenshot](../../docassets/images/label-tab.png)
## Basic usage
Render a tab with label:
```html
<adf-info-drawer>
<adf-info-drawer-tab [label]="'Tab1'">
<div> Tab1 content</div>
</adf-info-drawer-tab>
<adf-info-drawer-tab [label]="'Tab2'">
<div> Tab2 content</div>
</adf-info-drawer-tab>
</adf-info-drawer>
```
Render tab with icon instead of labels:
```html
<adf-info-drawer>
<adf-info-drawer-tab [label]="'Tab1'" icon="comment">
<div> Tab1 content</div>
</adf-info-drawer-tab>
<adf-info-drawer-tab [label]="'Tab2'" icon="people">
<div> Tab2 content</div>
</adf-info-drawer-tab>
</adf-info-drawer>
```
![Info drawer screenshot](../../docassets/images/icon-tab.png)
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| icon | `string` | null | Icon to render for the tab. |
| label | `string` | "" | The title of the tab. |
## Details
See the [Info drawer component](info-drawer.component.md) page for details of how to use this subcomponent.
## See also
- [Info drawer component](info-drawer.component.md)
- [Info drawer layout component](info-drawer-layout.component.md)

68
docs/core/components/info-drawer.component.md Normal file
View File

@@ -0,0 +1,68 @@
---
Title: Info Drawer component
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# [Info Drawer component](../../../lib/core/info-drawer/info-drawer.component.ts "Defined in info-drawer.component.ts")
Displays a sidebar-style information panel with tabs.
![Info drawer screenshot](../../docassets/images/activities-infodrawer.png)
## Basic usage
### [Transclusions](../../user-guide/transclusion.md)
There are three regions where you can add your own content using `<div>` elements
with the following names (as with the [Info drawer layout component](info-drawer-layout.component.md)):
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
The tabs are added using one or more `<adf-info-drawer-tab>` elements, which can
have any content you like:
```html
<adf-info-drawer title="Activities" (currentTab)="getActiveTab($event)">
<div info-drawer-buttons>
<mat-icon (click)="close()">clear</mat-icon>
</div>
<adf-info-drawer-tab label="Activity">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
</adf-info-drawer-tab>
<adf-info-drawer-tab label="Details">
<mycomponent3></mycomponent3>
</adf-info-drawer-tab>
</adf-info-drawer>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| selectedIndex | `number` | 0 | The selected index tab. |
| title | `string \| null` | null | The title of the info drawer. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| currentTab | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<number>` | Emitted when the currently active tab changes. |
## Details
This is a variant of the [Info Drawer Layout component](info-drawer-layout.component.md) that displays information in tabs. You can use the Info drawer tab subcomponent to add tabs (as shown in the example) and the `currentTab` output property to select the currently active tab.
## See also
- [Info drawer layout component](info-drawer-layout.component.md)
- [Info drawer tab component](info-drawer-tab.component.md)

78
docs/core/components/language-menu.component.md Normal file
View File

@@ -0,0 +1,78 @@
---
Title: Language Menu component
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-09
---
# [Language Menu component](../../../lib/core/language-menu/language-menu.component.ts "Defined in language-menu.component.ts")
Displays all the languages that are present in "app.config.json" and the default (EN).
![Language Menu screenshot](../../docassets/images/languages-menu.png)
## Basic usage
How to attach an ADF Language Menu as a main menu
```html
<button mat-icon-button [matMenuTriggerFor]="langMenu">
<mat-icon>language</mat-icon>
</button>
<mat-menu #langMenu="matMenu">
<adf-language-menu></adf-language-menu>
</mat-menu>
```
## Details
Add a [Language Menu component](language-menu.component.md) to let the
user set the locale language for the app. For further information about the
locale language, see the
[Internationalization](../../user-guide/internationalization.md#how-the-display-language-is-selected)
page in the user guide.
The component fetches the list of available languages from `app.config.json`:
```json
"languages": [
{
"key": "en",
"label": "English"
},
{
"key": "fr",
"label": "French"
},
{
"key": "it",
"label": "Italian"
}
]
```
If no `languages` setting is provided, the component shows only the English language.
### Nested Menu language
You can also attach the Language Menu as a nested menu:
```html
<button mat-icon-button class="dw-profile-menu" [matMenuTriggerFor]="profileMenu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #profileMenu="matMenu">
<button mat-menu-item>profile-settings</button>
<button mat-menu-item [matMenuTriggerFor]="langMenu">Languages</button>
<button mat-menu-item>sign-out</button>
</mat-menu>
<mat-menu #langMenu="matMenu">
<adf-language-menu></adf-language-menu>
</mat-menu>
```
![Nested Language Menu screenshot](../../docassets/images/languages-menu-nested.png)
## See Also
- [Internationalization](../../user-guide/internationalization.md)

27
docs/core/components/login-dialog-panel.component.md Normal file
View File

@@ -0,0 +1,27 @@
---
Title: Login Dialog Panel component
Added: v2.6.0
Status: Active
Last reviewed: 2018-10-02
---
# [Login Dialog Panel component](../../../lib/core/login/components/login-dialog-panel.component.ts "Defined in login-dialog-panel.component.ts")
Shows and manages a login dialog.
## Class members
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`LoginSuccessEvent`](../../../lib/core/login/models/login-success.event.ts)`>` | Emitted when the login succeeds. |
## Details
This component has similar features to the [Login Dialog component](login-dialog.component.md)
but it also creates and manages the dialog for you.
## See also
- [Login Dialog component](login-dialog.component.md)

89
docs/core/components/login-dialog.component.md Normal file
View File

@@ -0,0 +1,89 @@
---
Title: Login Dialog component
Added: v2.6.0
Status: Active
Last reviewed: 2018-10-02
---
# [Login Dialog component](../../../lib/core/login/components/login-dialog.component.ts "Defined in login-dialog.component.ts")
Allows a user to perform a login via a dialog.
## Details
The [Login Dialog component](login-dialog.component.md) allows you to perform a login via a dialog.
### Showing the dialog
Unlike most components, the [Login Dialog Component](login-dialog.component.md) is typically shown in a dialog box
rather than the main page and you are responsible for opening the dialog yourself. You can use the
[Angular Material Dialog](https://material.angular.io/components/dialog/overview) for this,
as shown in the usage example. ADF provides the [`LoginDialogComponentData`](../../../lib/core/login/components/login-dialog-component-data.interface.ts) interface
to work with the Dialog's
[data option](https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-):
```ts
export interface LoginDialogComponentData {
title: string;
actionName?: string;
logged: Subject<any>;
}
```
The properties are described in the table below:
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| title | `string` | "" | Dialog title |
| actionName | `string` | "" | Text to appear on the dialog's main action button ("Login", "Access", etc) |
| logged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | | Event emitted when the login succeeds. |
If you don't want to manage the dialog yourself then it is easier to use the
[Login Dialog Panel component](login-dialog-panel.component.md), or the
methods of the [Login Dialog service](../services/login-dialog.service.md), which create
the dialog for you.
### Usage example
```ts
import { MatDialog } from '@angular/material';
import { LoginDialogComponentData, LoginDialogComponent} from '@adf/core'
import { Subject } from 'rxjs/Subject';
...
constructor(dialog: MatDialog ... ) {}
openLoginDialog() {
data: LoginDialogComponentData = {
title: "Perform a Login",
actionName: "Access",
logged: new Subject<any>()
};
this.dialog.open(
LoginDialogComponent,
{
data, panelClass: 'adf-login-dialog',
width: '630px'
}
);
data.logged.subscribe(() => {
// Action after being logged in...
},
(error)=>{
//your error handling
},
()=>{
//action called when an action or cancel is clicked on the dialog
this.dialog.closeAll();
});
}
```
All the results will be streamed to the logged [subject](http://reactivex.io/rxjs/manual/overview.html#subject) present in the [`LoginDialogComponentData`](../../../lib/core/login/components/login-dialog-component-data.interface.ts) object passed to the dialog.
When the dialog action is selected by clicking, the `data.logged` stream will be completed.
## See also
- [Login component](login.component.md)

352
docs/core/components/login.component.md Normal file
View File

@@ -0,0 +1,352 @@
---
Title: Login component
Added: v2.0.0
Status: Active
Last reviewed: 2019-02-06
---
# [Login component](../../../lib/core/login/components/login.component.ts "Defined in login.component.ts")
Authenticates to Alfresco Content Services and Alfresco Process Services.
![Login component](../../docassets/images/login-extra-content.png)
## Contents
- [Basic usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Handling events](#handling-events)
- [Custom logo and background](#custom-logo-and-background)
- [Customizing validation rules](#customizing-validation-rules)
- [Call an external identity provider to fetch the auth token](#call-an-external-identity-provider-to-fetch-the-auth-token)
- [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
- [Single Sign-On (SSO)](#single-sign-on-sso)
- [Kerberos](#kerberos)
- [See Also](#see-also)
## Basic usage
```html
<adf-login
successRoute="/home">
</adf-login>
```
### [Transclusions](../../user-guide/transclusion.md)
You can replace the content of the header and footer of the [Login component](login.component.md) with your own custom content:
```html
<adf-login ...>
<adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
<adf-login-footer><ng-template>My custom HTML for the footer</ng-template></adf-login-footer>
</adf-login>`
```
Header:
![Login with custom header](../../docassets/images/custom-header.png)
Footer:
![Login with custom footer](../../docassets/images/custom-footer.png)
Also, any content that you put inside the `<adf-login>` tags will be rendered as part
of the Login dialog:
```html
<adf-login ...>
<div>
<div><!-- Custom content goes here --></div>
</div>
</adf-login>
```
This is useful if you need to extend the functionality of the dialog
with custom input fields handled by your application or parent component:
![Login with custom content](../../docassets/images/login-extra-content.png)
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| backgroundImageUrl | `string` | | Path to a custom background image. |
| copyrightText | `string` | | The copyright text below the login box. |
| fieldsValidation | `any` | | Custom validation rules for the login form. |
| logoImageUrl | `string` | | Path to a custom logo image. |
| needHelpLink | `string` | "" | Sets the URL of the NEED HELP link in the footer. |
| registerLink | `string` | "" | Sets the URL of the REGISTER link in the footer. |
| showLoginActions | `boolean` | true | Should the extra actions (`Need Help`, `Register`, etc) be shown? |
| showRememberMe | `boolean` | true | Should the `Remember me` checkbox be shown? When selected, this option will remember the logged-in user after the browser is closed to avoid logging in repeatedly. |
| successRoute | `string` | null | Route to redirect to on successful login. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`LoginErrorEvent`](../../../lib/core/login/models/login-error.event.ts)`>` | Emitted when the login fails. |
| executeSubmit | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`LoginSubmitEvent`](../../../lib/core/login/models/login-submit.event.ts)`>` | Emitted when the login form is submitted. |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`LoginSuccessEvent`](../../../lib/core/login/models/login-success.event.ts)`>` | Emitted when the login is successful. |
## Details
### Handling events
**app.component.html**
```html
<adf-login
(success)="mySuccessMethod($event)"
(error)="myErrorMethod($event)">
</adf-login>
```
**app.component.ts**
```ts
export class AppComponent {
mySuccessMethod($event) {
console.log('Success Login EventEmitt called with: ' + $event.value);
}
myErrorMethod($event) {
console.log('Error Login EventEmitt called with: ' + $event.value);
}
}
```
### Custom logo and background
You can change the logo and background images using the `backgroundImageUrl` and
`logoImageUrl` properties:
```html
<adf-login
[backgroundImageUrl]="'http://images.freeimages.com/images/previews/638/wood-wall-for-background-1634466.jpg'"
[logoImageUrl]="'http://images.freeimages.com/images/previews/eac/honeybee-with-a-house-1633609.jpg'">
</adf-login>
```
![Login with custom logo and background](../../docassets/images/custom-login.png)
You can also bind to your component properties and provide values dynamically if you need to:
```html
<adf-login
[backgroundImageUrl]="myCustomBackground"
[logoImageUrl]="myCustomLogo">
</adf-login>
```
### Customizing validation rules
You can add to or modify the default validation rules of the login form if you
need your own custom validation:
**MyCustomLogin.component.html**
```html
<adf-login
[fieldsValidation]="customValidation"
#alfrescoLogin>
</adf-login>
```
**MyCustomLogin.component.ts**
```ts
export class MyCustomLogin {
@ViewChild('alfrescoLogin')
alfrescoLogin: any;
customValidation: any;
constructor(public router: Router) {
this.customValidation = {
username: ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(10)])],
password: ['', Validators.required]
};
}
ngOnInit() {
this.alfrescoLogin.addCustomValidationError('username', 'minlength', 'Username must be at least 8 characters.');
this.alfrescoLogin.addCustomValidationError('username', 'maxlength', 'Username must not be longer than 11 characters.');
}
}
```
### Call an external identity provider to fetch the auth token
You can access an external provider to get an auth token for a user:
**app.config.json**
```json
{
"oauth2" : {
"host": "http://myhost.com",
"authPath": "/my-custom-auth/token",
"clientId": "my-client-id",
"secret": ""
}
}
```
**MyCustomLogin.component.html**
```html
<adf-login
[providers]="'OAUTH'"
(success)="onMyAuthLogin($event)">
</adf-login>
```
**MyCustomLogin.component.ts**
```ts
export class MyCustomLogin {
constructor(public router: Router) {
}
onMyAuthLogin($event) {
console.log("My token " + $event.token.ticket)
this.router.navigate(['/home']);
}
}
```
### Controlling form submit execution behaviour
The standard form submission system is suitable for most tasks but you can
take full control of submission if you need to. Use the `executeSubmit` event
to modify the submission process with your own code just after the form is
submitted.
If you want to replace the submission process completely (rather than just extend
it), you can use `event.preventDefault()` in the handler to avoid the default
behavior. You could use this, for example, to customize the validation heavily or
to present a summary of validation before submitting the form.
**MyCustomLogin.component.html**
```html
<adf-login
(executeSubmit)="validateForm($event)"
#alfrescoLogin>
</adf-login>
```
**MyCustomLogin.component.ts**
```ts
export class MyCustomLogin {
validateForm(event: any) {
let values = event.values;
// check if the username is in the blacklist
if (values.controls['username'].value === 'invalidUsername') {
this.alfrescoLogin.addCustomFormError('username', 'the username is in blacklist');
event.preventDefault();
}
}
}
```
Note that if you do not call `event.preventDefault()` then the default behaviour
will execute _after_ your custom code has completed.
### Single Sign-On (SSO)
#### Implicit Flow
If you used the host-setting component to enable SSO Oauth (or if you
enabled the setting in `app.config.json`) then the [login component](login.component.md) will show only a button to login:
```JSON
{
"providers": "ECM",
"authType" :"OAUTH",
"oauth2": {
"host": "<AUTH-SERVER>/auth/realms/alfresco",
"clientId": "activiti",
"scope": "openid",
"secret": "",
"implicitFlow": true,
"silentLogin": false,
"redirectUri": "/",
"redirectUriLogout": "/logout"
}
}
```
![Login component](../../docassets/images/sso-login.png)
Note that if the `silentLogin` property in the `oauth2` configuration is set to true
then the login page will not be shown. Instead, the application will redirect
automatically to the authorization server when the user is not logged-in
#### Silent login
You can also enable automatic redirection to OAuth provider
by utilising the following properties:
- silentLogin
- redirectSilentIframeUri
```json
{
"providers": "ECM",
"authType": "OAUTH",
"oauth2": {
"host": "<AUTH-SERVER>/auth/realms/alfresco",
"clientId": "alfresco",
"scope": "openid",
"secret": "",
"implicitFlow": true,
"silentLogin": true,
"redirectSilentIframeUri": "/assets/silent-refresh.html",
"redirectUri": "/",
"redirectUriLogout": "/logout"
},
```
Please note that if you deploy the application to a virtual folder,
for example `http://<ADDRESS>/my-app`, then `redirectSilentIframeUri`
must contain the full URI value:
```json
{
"redirectSilentIframeUri": "http://<ADDRESS>/my-app/assets/silent-refresh.html",
}
```
> In the default ADF application configurations the `silent-refresh.html` file
> gets automatically copied to the application output when building for production.
### Kerberos
Setting the `withCredentials` property to true in the `auth` section of
`app.config.json` will enable Kerberos and bypass the normal login:
```json
{
"auth": {
"withCredentials": "true"
},
```
## See Also
- [Logout directive](../directives/logout.directive.md)

105
docs/core/components/pagination.component.md Normal file
View File

@@ -0,0 +1,105 @@
---
Title: Pagination Component
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-20
---
# [Pagination Component](../../../lib/core/pagination/pagination.component.ts "Defined in pagination.component.ts")
Adds pagination to the component it is used with.
![](../../docassets/images/basic.png)
## Contents
- [Basic Usage](#basic-usage)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Integrating with the Document List component](#integrating-with-the-document-list-component)
- [Custom pagination](#custom-pagination)
- [See also](#see-also)
## Basic Usage
```html
<adf-pagination
[pagination]="pagination"
[supportedPageSizes]="sizes"
(change)="onChange($event)"
(nextPage)="onNextPage($event)"
(prevPage)="onPreviousPage($event)"
(changePageSize)="onChangePageSize($event)"
(changePageNumber)="onChangePageNumber($event)">
</adf-pagination>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| pagination | [`PaginationModel`](../../../lib/core/models/pagination.model.ts) | | Pagination object. |
| supportedPageSizes | `number[]` | | An array of page sizes. |
| target | [`PaginatedComponent`](../../../lib/core/pagination/paginated-component.interface.ts) | | Component that provides custom pagination support. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| change | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when pagination changes in any way. |
| changePageNumber | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when the page number changes. |
| changePageSize | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when the page size changes. |
| nextPage | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when the next page is requested. |
| prevPage | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PaginationModel`](../../../lib/core/models/pagination.model.ts)`>` | Emitted when the previous page is requested. |
## Details
You can use the [`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts) component to add pagination features to other components. The Alfresco
APIs make use of pagination to reduce the amount of data transferred in a single call. The start offset
and number of items in the page are passed during the call. The items of interest will be
returned along with a [`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts) object. You can use this object to set up the [pagination component](pagination.component.md)
and then subscribe to one of the page change events. This will return updated pagination data that you
can pass to a subsequent API call.
Each event corresponds to a particular action from the user. For the `change` event, a
PaginationQueryParams object is returned. This contains the query
parameters supported by the REST API, `skipCount` and `maxItems`.
For all events other than `change`, a new [`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts) object is returned as in the following example. The
new object contains updated properties that you can use to fetch the next page of information.
### Integrating with the Document List component
```html
<adf-document-list #documentList ...></adf-document-list>
<adf-pagination [target]="documentList" ...>
</adf-pagination>
```
### Custom pagination
The component also makes it easy to integrate your own implementation of pagination.
You can supply any component that implements the [`PaginatedComponent`](../../../lib/core/pagination/paginated-component.interface.ts) interface as the value of the
`target` property.
```js
export interface PaginatedComponent {
pagination: Subject<Pagination>;
updatePagination(params: PaginationQueryParams);
}
```
Your component must provide a `pagination` subject to allow the [`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts) component to respond to changes.
Every time user interacts with the [`Pagination`](../../../lib/content-services/document-list/models/document-library.model.ts) component, it will call the `updatePagination` method
and pass the updated parameters.
## See also
- [Infinite Pagination component](infinite-pagination.component.md)

53
docs/core/components/sidebar-action-menu.component.md Normal file
View File

@@ -0,0 +1,53 @@
---
Title: Sidebar action menu component
Added: v2.1.0
Status: Active
Last reviewed: 2018-11-20
---
# [Sidebar action menu component](../../../lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts "Defined in sidebar-action-menu.component.ts")
Displays a sidebar-action menu information panel.
![Sidebar action menu button screenshot](../../docassets/images/sidebar-action-menu-button.png)
![Sidebar action menu icon screenshot](../../docassets/images/sidebar-action-menu-icon.png)
## Basic usage
### [Transclusions](../../user-guide/transclusion.md)
There are three regions where you can add your own content in `<div>` elements with
the following names:
- adf-sidebar-menu-title-icon
- adf-sidebar-menu-options
- adf-sidebar-menu-expand-icon
```html
<adf-sidebar-action-menu>
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div adf-sidebar-menu-expand-icon>
<mat-icon>queue</mat-icon>
</div>
<div adf-sidebar-menu-options>
<button mat-menu-item>
<mat-icon>assignment</mat-icon>
<span>Button Name</span>
</button>
</div>
</adf-sidebar-action-menu>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| expanded | `boolean` | | Toggle the sidebar action menu on expand. |
| title | `string` | | The title of the sidebar action. |
| width | `number` | 272 | Width in pixels for sidebar action menu options. |
## Details
As the name suggests, this is basically just a layout with CSS styling.

159
docs/core/components/sidenav-layout.component.md Normal file
View File

@@ -0,0 +1,159 @@
---
Title: Sidenav Layout component
Added: v2.3.0
Status: Active
Last reviewed: 2018-11-20
---
# [Sidenav Layout component](../../../lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts "Defined in sidenav-layout.component.ts")
Displays the standard three-region ADF application layout.
![Sidenav on desktop](../../docassets/images/sidenav-layout.png)
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Template context](#template-context)
- [menuOpenState$](#menuopenstate)
- [Preserving the menu state](#preserving-the-menu-state)
## Basic Usage
### [Transclusions](../../user-guide/transclusion.md)
The content for the header, navigation area, and main content are transcluded using three special
sub-components (note the use of `<ng-template>` in the sub-components' body sections):
```html
<adf-sidenav-layout
[sidenavMin]="70"
[sidenavMax]="220"
[stepOver]="600"
[hideSidenav]="false"
[expandedSidenav]="true"
(expanded)="setState($event)">
<adf-sidenav-layout-header>
<ng-template let-toggleMenu="toggleMenu">
<div class="app-header">
<button (click)="toggleMenu()">toggle menu</button>
</div>
</ng-template>
</adf-sidenav-layout-header>
<adf-sidenav-layout-navigation>
<ng-template let-isMenuMinimized="isMenuMinimized">
<div *ngIf="isMenuMinimized()" class="app-compact-navigation"></div>
<div *ngIf="!isMenuMinimized()" class="app-expanded-navigation"></div>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content>
<ng-template>
<router-outlet></router-outlet>
</ng-template>
</adf-sidenav-layout-content>
</adf-sidenav-layout>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| expandedSidenav | `boolean` | true | Should the navigation region be expanded initially? |
| hideSidenav | `boolean` | false | Toggles showing/hiding the navigation region. |
| position | `string` | "start" | The side that the drawer is attached to. Possible values are 'start' and 'end'. |
| sidenavMax | `number` | | Maximum size of the navigation region. |
| sidenavMin | `number` | | Minimum size of the navigation region. |
| stepOver | `number` | | Screen size at which display switches from small screen to large screen configuration. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| expanded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the menu toggle and the collapsed/expanded state of the sideNav changes. |
## Details
This component displays the familiar ADF layout consisting of three regions: header, navigation
and content.
The layout will select between a small screen (ie, mobile) configuration and a large screen
configuration according to the screen size in pixels (the `stepOver` property sets the
number of pixels at which the switch will occur).
The small screen layout uses the Angular Material [Sidenav component](https://material.angularjs.org/latest/api/directive/mdSidenav) which is
described in detail on their website.
The ADF-style (ie, large screen) Sidenav has two states: **expanded** and **compact**.
The navigation is always displayed regardless of the state but it will have a reduced width
when compacted. Set the widths for the expanded and compact states with the `sidenavMin` and
`sidenavMax` properties.
The contents of the 3 regions can be injected through Angular's template transclusion as shown
in the usage example above.
Desktop layout (screen width greater than the `stepOver` value):
![Sidenav on desktop](../../docassets/images/sidenav-layout.png)
Mobile layout (screen width less than the `stepOver` value):
![Sidenav on mobile](../../docassets/images/sidenav-layout-mobile.png)
### Template context
Each template is given a context containing the following methods:
- `toggleMenu(): void`
Triggers menu toggling.
- `isMenuMinimized(): boolean`
The expanded/compact (minimized) state of the navigation. This one only makes sense in case of desktop size, when the screen size is above the value of stepOver.
### menuOpenState$
Beside the template context's **isMenuMinimized** variable, another way to listen to the component's menu's open/closed state is with the `menuOpenState$` observable, which is driven by a `BehaviorSubject` in the background. The value emitted by this observable is the opposite of the `isMenuMinimized` template variable.
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| menuOpenState$ | [`Observable`](http://reactivex.io/documentation/observable.html)&lt;boolean> | true | Another way to listen to menu open/closed state |
Every time the menu state is changed, the following values are emitted:
- true, if the menu changed to the opened state
- false, if the menu changed to the closed state
### Preserving the menu state
You can preserve the state of the menu between sessions. To do this, you first need to
set a property in the `app.config.json` file:
```json
"sideNav" : {
"preserveState" : true
}
```
When this property is set, the collapsed/expanded state will be stored in the local storage
and restored when the page is reloaded or when the user next uses the app.
You can also set the default state in the `app.config.json` file:
```json
"sideNav" : {
"expandedSidenav" : true
}
```
Note that if `preserveState` is set then the current state of the sidenav (set by the user)
will override this default setting.

67
docs/core/components/sorting-picker.component.md Normal file
View File

@@ -0,0 +1,67 @@
---
Title: Sorting Picker Component
Added: v2.4.0
Status: Active
Last reviewed: 2018-06-08
---
# [Sorting Picker Component](../../../lib/core/sorting-picker/sorting-picker.component.ts "Defined in sorting-picker.component.ts")
Selects from a set of predefined sorting definitions and directions.
![Sorting Picker](../../docassets/images/sorting-picker.png)
## Basic Usage
```html
<adf-sorting-picker
[options]="options"
[selected]="value"
[ascending]="ascending"
(change)="onChanged($event)">
</adf-sorting-picker>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| ascending | `boolean` | true | Current sorting direction |
| options | `Array<Function>` | \[] | Available sorting options |
| selected | `string` | | Currently selected option key |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| sortingChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Raised each time direction gets changed. |
| valueChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Raised each time sorting key gets changed. |
## Details
The picker shows the user a menu of sorting options (which could be data columns to sort on
alphabetical vs numerical search, etc) and the choice of ascending vs descending sort order.
Note that picker only implements the menu, so you are responsible for implementing the sorting
options yourself.
The `options` property contains an array of any objects that expose the following properties:
```ts
{
key: string;
label: string;
}
```
The `key` is an identifying value and the `label` is the text that the user will see in the
picker. The selected `key` is reported by the `change` event, which passes an object like the
following as its parameter:
```ts
{
key: string,
ascending: boolean
}
```

80
docs/core/components/start-form.component.md Normal file
View File

@@ -0,0 +1,80 @@
---
Title: Start Form component
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# [Start Form component](../../../lib/core/form/components/start-form.component.ts "Defined in start-form.component.ts")
Displays the Start [`Form`](../../../lib/process-services/task-list/models/form.model.ts) for a process.
![Start Form screenshot](../../docassets/images/ProcessStartForm.png)
## Basic Usage
```html
<adf-start-form
[processDefinitionId]="currentProcessDef.id"
(outcomeClick)="onOutcomeClick($event)">
</adf-start-form>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| data | [`FormValues`](../../../lib/core/form/components/widgets/core/form-values.ts) | | Custom form values map to be used with the rendered form. |
| disableCompleteButton | `boolean` | false | If true then the `Complete` outcome button is shown but it will be disabled. |
| disableStartProcessButton | `boolean` | false | If true then the `Start Process` outcome button is shown but it will be disabled. |
| fieldValidators | [`FormFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts)`[]` | \[] | Contains a list of form field validator instances. |
| form | [`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts) | | Underlying [form model](../../../lib/core/form/components/widgets/core/form.model.ts) instance. |
| formId | `number` | | The id of the form definition to load and display with custom values. |
| formName | `string` | | Name of the form definition to load and display with custom values. |
| nameNode | `string` | | Name to assign to the new node where the metadata are stored. |
| nodeId | `string` | | Content Services node ID for the form metadata. |
| path | `string` | | Path of the folder where the metadata will be stored. |
| processDefinitionId | `string` | | Definition ID of the process to start. |
| processId | `string` | | Process ID of the process to start. |
| readOnly | `boolean` | false | Toggle readonly state of the form. Forces all form widgets to render as readonly if enabled. |
| readOnlyForm | `boolean` | false | Is the form read-only (ie, can't be edited)? |
| saveMetadata | `boolean` | false | Toggle saving of form metadata. |
| showCompleteButton | `boolean` | true | Toggle rendering of the `Complete` outcome button. |
| showDebugButton | `boolean` | false | Toggle debug options. |
| showOutcomeButtons | `boolean` | true | Should form outcome buttons be shown? |
| showRefreshButton | `boolean` | true | Should the refresh button be shown? |
| showSaveButton | `boolean` | true | Toggle rendering of the `Save` outcome button. |
| showTitle | `boolean` | true | Toggle rendering of the form title. |
| showValidationIcon | `boolean` | true | Toggle rendering of the validation icon next to the form title. |
| taskId | `string` | | Task id to fetch corresponding form and values. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when any error occurs. |
| executeOutcome | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormOutcomeEvent`](../../../lib/core/form/components/widgets/core/form-outcome-event.model.ts)`>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
| formCompleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Complete` outcome. |
| formContentClicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ContentLinkModel`](../../../lib/core/form/components/widgets/core/content-link.model.ts)`>` | Emitted when a field of the form is clicked. |
| formDataRefreshed | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when form values are refreshed due to a data property change. |
| formError | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormFieldModel`](../../core/models/form-field.model.md)`[]>` | Emitted when the supplied form values have a validation error. |
| formLoaded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is loaded or reloaded. |
| formSaved | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Save` or custom outcomes. |
| outcomeClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the user clicks one of the outcome buttons that completes the form. |
## Details
The [Start Process component](../../process-services/components/start-process.component.md) uses the Start [`Form`](../../../lib/process-services/task-list/models/form.model.ts) component
to display the
[start form](http://docs.alfresco.com/process-services1.6/topics/none_start_event.html)
for the process.
The `outcomeClick` event is passed a string containing the ID of the outcome button that
the user clicked. You can pass this value to the `startProcess` method (defined in the
[Process service](../../process-services/services/process.service.md)) when activating the process, if necessary.
## See also
- [Process service](../../process-services/services/process.service.md)

71
docs/core/components/text-mask.component.md Normal file
View File

@@ -0,0 +1,71 @@
---
Title: Text Mask directive
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-20
---
# [Text Mask directive](../../../lib/core/form/components/widgets/text/text-mask.component.ts "Defined in text-mask.component.ts")
Implements text field input masks.
## Basic Usage
```html
<input [textMask]="{mask: mask, isReversed: isMaskReversed}">
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| inputMask | `Function` | | Object defining mask and "reversed" status. |
## Details
The Text Mask directive implements the "input mask" feature defined in the
Process Services form editor. The mask restricts the way that text data can
be added to the field and also adds formatting as you type. A common example of
this feature is seen in text boxes that accept credit card numbers. The number is
printed on the card as groups of four digits separated by spaces:
`1234 5678 9012 3456`
When you type into the field, you can only enter digits and spaces (spaces
are only valid if you type them in the position they occur in the mask;
otherwise, they are added automatically as you type digits). The equivalent
text mask in ADF would be:
`0000 0000 0000 0000`
### Mask format characters
The following characters have special meaning within a mask; all other characters
are included in the text as they are:
- **"0"**: Denotes a digit
- **"9"**: Denotes a digit that can optionally be left out
- **"A"**: Denotes a alphanumeric character (upper- or lower-case A-Z and digits 0-9)
- **"S"**: Denotes a alphabetic character (upper- or lower-case A-Z)
- **"#"**: Denotes a string of zero or more digits
The mask is passed to the directive in the `mask` field of the parameter object. The
`reversed` field indicates that digits in the mask are "filled up" in
right-to-left order rather than the usual left-to-right. For example, with the
following mask:
`#0.0`
...if the user typed the digits "23" in sequence, the normal left-to-right ordering
would show
`23`
...in the textbox. To get the decimal point, the user would have to type it explicitly.
However, with reversed (right-to-left) ordering, the textbox would show
`2.3`
...and these digits would slide leftward as the user typed more.

26
docs/core/components/toolbar-divider.component.md Normal file
View File

@@ -0,0 +1,26 @@
---
Title: Toolbar Divider Component
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# [Toolbar Divider Component](../../../lib/core/toolbar/toolbar-divider.component.ts "Defined in toolbar-divider.component.ts")
Divides groups of elements in a Toolbar with a visual separator.
## Basic Usage
```html
<adf-toolbar>
<button></button>
<button></button>
<adf-toolbar-divider></adf-toolbar-divider>
<button></button>
</adf-toolbar>
```
## See Also
- [Toolbar component](toolbar.component.md)
- [Toolbar Title component](toolbar-title.component.md)

32
docs/core/components/toolbar-title.component.md Normal file
View File

@@ -0,0 +1,32 @@
---
Title: Toolbar Title Component
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# [Toolbar Title Component](../../../lib/core/toolbar/toolbar-title.component.ts "Defined in toolbar-title.component.ts")
Supplies custom HTML to be included in a [Toolbar component](toolbar.component.md) title.
![](../../docassets/images/adf-toolbar-02.png)
## Basic Usage
```html
<adf-toolbar>
<adf-toolbar-title>
<adf-breadcrumb ...></adf-breadcrumb>
</adf-toolbar-title>
...
</adf-toolbar>
```
## Details
You can use this component to include any HTML or Angular components in the Toolbar title section.
## See Also
- [Toolbar component](toolbar.component.md)
- [Toolbar divider component](toolbar-divider.component.md)

137
docs/core/components/toolbar.component.md Normal file
View File

@@ -0,0 +1,137 @@
---
Title: Toolbar Component
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# [Toolbar Component](../../../lib/core/toolbar/toolbar.component.ts "Defined in toolbar.component.ts")
Simple container for headers, titles, actions and breadcrumbs.
![](../../docassets/images/adf-toolbar-01.png)
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Details](#details)
- [Dropdown menu](#dropdown-menu)
- [Custom color](#custom-color)
- [See also](#see-also)
## Basic Usage
```html
<adf-toolbar title="Toolbar">
<button mat-icon-button>
<mat-icon>create_new_folder</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>delete</mat-icon>
</button>
</adf-toolbar>
```
### [Transclusions](../../user-guide/transclusion.md)
You can set the title content using an `<adf-toolbar-title>` element (although
you can also set a simple textual title with the `title` attribute).
All other content in the toolbar is free-form but you can use one or more
`<adf-toolbar-divider>` elements between your own elements to add a visual
separator. Also, any content following a `<div>` element with the CSS class
`adf-toolbar--spacer` will be pushed across to the right-hand side of the
toolbar:
```html
<adf-toolbar>
<adf-toolbar-title>
<adf-breadcrumb ...></adf-breadcrumb>
</adf-toolbar-title>
<adf-toolbar-divider></adf-toolbar-divider>
<button></button>
<button></button>
<div class="adf-toolbar--spacer"></div>
<button></button>
</adf-toolbar>
```
For example, the image below shows a toolbar with a
[Breadcrumb component](../../content-services/breadcrumb.component.md) title, and then some buttons
pushed to the right by a spacer:
![](../../docassets/images/adf-toolbar-02.png)
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| color | `string` | | Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. |
| title | `string` | "" | Toolbar title. |
## Details
### Dropdown menu
The following example shows how to create a dropdown menu. The code is based
on the `<mat-menu>` component from the `@angular/material` library
but you could also use your own custom menu components:
```html
<adf-toolbar title="Toolbar">
...
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voicemail</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</mat-menu>
</adf-toolbar>
```
![](../../docassets/images/adf-toolbar-03.png)
With the menu set up like this, you would see the following menu items as defined earlier
when you click the menu button:
![](../../docassets/images/adf-toolbar-04.png)
### Custom color
Besides the default color you can use 'primary', 'accent', or 'warn' values:
You might also want to change colors to follow your application's color
[theme](../../user-guide/theming.md):
For example:
![](../../docassets/images/adf-toolbar-05.png)
![](../../docassets/images/adf-toolbar-06.png)
![](../../docassets/images/adf-toolbar-07.png)
## See also
- [Toolbar Divider component](toolbar-divider.component.md)
- [Toolbar Title component](toolbar-title.component.md)

36
docs/core/components/user-info.component.md Normal file
View File

@@ -0,0 +1,36 @@
---
Title: User Info component
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-19
---
# [User Info component](../../../lib/core/userinfo/components/user-info.component.ts "Defined in user-info.component.ts")
Shows user information.
## Basic usage
```html
<adf-userinfo></adf-userinfo>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| bpmBackgroundImage | `string` | | Custom path for the background banner image for APS users. |
| ecmBackgroundImage | `string` | | Custom path for the background banner image for ACS users. |
| menuPositionX | `string` | "after" | Custom choice for opening the menu at the bottom. Can be `before` or `after`. |
| menuPositionY | `string` | "below" | Custom choice for opening the menu at the bottom. Can be `above` or `below`. |
| namePosition | `string` | "right" | When the username is shown, this defines its position relative to the user info button. Can be `right` or `left`. |
| showName | `boolean` | true | Shows/hides the username next to the user info button. |
## Details
The component shows a round icon for the user and will show extra information about
the user when clicked.
If user is logged in with both ACS and APS, the ACS image will be shown.
In case of SSO authentication, the information related to the user like firstname, lastname will be fetched using the Keycloak Api

487
docs/core/components/viewer.component.md Normal file
View File

@@ -0,0 +1,487 @@
---
Title: Viewer component
Added: v2.0.0
Status: Active
Last reviewed: 2019-01-16
---
# [Viewer component](../../../lib/core/viewer/components/viewer.component.ts "Defined in viewer.component.ts")
Displays content from an ACS repository.
See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
## Contents
- [Basic usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Keyboard shortcuts](#keyboard-shortcuts)
- [Details](#details)
- [Integrating with the Document List component](#integrating-with-the-document-list-component)
- [Custom file parameters](#custom-file-parameters)
- [Supported file formats](#supported-file-formats)
- [Content Renditions](#content-renditions)
- [Configuring PDF.js library](#configuring-pdfjs-library)
- [Extending the Viewer](#extending-the-viewer)
- [Custom layout](#custom-layout)
- [Printing](#printing)
- [See also](#see-also)
## Basic usage
Using with node id:
```html
<adf-viewer
[showViewer]="true"
[overlayMode]="true"
[nodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
</adf-viewer>
```
Using with file url:
```html
<adf-viewer
[overlayMode]="true"
[urlFile]="'filename.pdf'">
</adf-viewer>
```
Using with shared link:
```html
<adf-viewer
[overlayMode]="true"
[sharedLinkId]="'WWDg_afiTU6lHEgr4fAbQA'">
</adf-viewer>
```
Note that if you have a URL which contains a shared link ID, you should extract the
ID portion and use it with the `sharedLinkId` property rather than using the whole
URL with `urlFile`.
### [Transclusions](../../user-guide/transclusion.md)
The [Viewer component](viewer.component.md) lets you transclude content for the toolbar (and toolbar buttons),
the sidebar, thumbnails, and the "Open with" and "More actions" menus.
See the [Custom layout](#custom-layout) section for full details of all available tranclusions.
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| allowDownload | `boolean` | true | Toggles downloading. |
| allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
| allowGoBack | `boolean` | true | Allows `back` navigation |
| allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
| allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
| allowPrint | `boolean` | false | Toggles printing. |
| allowRightSidebar | `boolean` | false | Allow the right sidebar. |
| allowThumbnails | `boolean` | true | Toggles PDF thumbnails. |
| blobFile | [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) | | Loads a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) File |
| canNavigateBefore | `boolean` | true | Toggles the "before" ("&lt;") button. Requires `allowNavigate` to be enabled. |
| canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
| displayName | `string` | | Specifies the name of the file when it is not available from the URL. |
| fileName | `string` | | Content filename. |
| maxRetries | `number` | 10 | Number of times the Viewer will retry fetching content Rendition. There is a delay of at least one second between attempts. |
| mimeType | `string` | | MIME type of the file content (when not determined by the filename extension). |
| nodeId | `string` | null | [Node](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) Id of the file to load. |
| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
| sharedLinkId | `string` | null | Shared link id (to display shared file). |
| showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
| showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
| showToolbar | `boolean` | true | Hide or show the toolbar |
| showViewer | `boolean` | true | Hide or show the viewer |
| sidebarLeftTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the left sidebar. The template context contains the loaded node data. |
| sidebarRightTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the right sidebar. The template context contains the loaded node data. |
| thumbnailsTemplate | [`TemplateRef`](https://angular.io/api/core/TemplateRef)`<any>` | null | The template for the pdf thumbnails. |
| urlFile | `string` | "" | If you want to load an external file that does not come from ACS you can use this URL to specify where to load the file from. |
| urlFileViewer | `string` | null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| extensionChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when the filename extension changes. |
| goBack | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`BaseEvent`](../../../lib/core/events/base.event.ts)`<any>>` | Emitted when user clicks the 'Back' button. |
| invalidSharedLink | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the shared link used is not valid. |
| navigateBefore | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when user clicks 'Navigate Before' ("&lt;") button. |
| navigateNext | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when user clicks 'Navigate Next' (">") button. |
| print | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`BaseEvent`](../../../lib/core/events/base.event.ts)`<any>>` | Emitted when user clicks the 'Print' button. |
| showViewerChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the viewer is shown or hidden. |
## Keyboard shortcuts
| Name | Description |
| ---- | ----------- |
| Esc | Close the viewer (overlay mode only). |
| Left | Invoke 'Navigate before' action. |
| Right | Invoke 'Navigate next' action. |
| Ctrl+F | Activate full-screen mode. |
## Details
### Integrating with the Document List component
Below is the most simple integration of the Viewer and
[Document List](../../content-services/document-list.component.md) components within your custom component:
```html
<adf-document-list
currentFolderId="-my-"
(preview)="showPreview($event)">
</adf-document-list>
<adf-viewer
[(showViewer)]="showViewer"
[overlayMode]="true"
[nodeId]="nodeId">
</adf-viewer>
```
The component controller class implementation might look like the following:
```ts
export class OverlayViewerComponent {
@Input()
showViewer: boolean = false;
nodeId: string;
showPreview(event) {
if (event.value.entry.isFile) {
this.nodeId = event.value.entry.id;
this.showViewer = true;
}
}
}
```
### Custom file parameters
You can provide custom file parameters, for example a value for the `mimeType` or `displayName` when using URL values that have no file names or extensions:
```html
<adf-viewer
[displayName]="fileName"
[allowGoBack]="false"
[mimeType]="mimeType"
[urlFile]="fileUrl">
</adf-viewer>
```
### Supported file formats
The [Viewer component](viewer.component.md) consists of separate Views that handle particular types or type families based on either a file extension or a mime type:
- PDF View
- application/pdf
- \*.pdf
- Image View
- image/png
- image/jpeg
- image/gif
- image/bmp
- image/svg+xml
- \*.png
- \*.jpg
- \*.jpeg
- \*.gif
- \*.bpm
- \*.svg
- Text View
- text/plain
- text/csv
- text/xml
- text/html
- application/x-javascript
- \*.txt
- \*.xml
- \*.js
- \*.html
- \*.json
- \*.ts
- Media View
- video/mp4
- video/webm
- video/ogg
- audio/mpeg
- audio/ogg
- audio/wav
- \*.wav
- \*.mp4
- \*.mp3
- \*.webm
- \*.ogg
### Content Renditions
For those extensions and mime types that cannot be natively displayed in the browser, the Viewer will try to fetch the corresponding rendition using the [renditions service api](https://community.alfresco.com/docs/DOC-5879-rendition-service).
For the full list of supported types please refer to: [File types that support preview and thumbnail generation](http://docs.alfresco.com/5.2/references/valid-transformations-preview.html).
### Configuring PDF.js library
Configure your webpack-enabled application with the PDF.js library as follows.
1. Install pdfjs-dist
```sh
npm install pdfjs-dist
```
2. Update `vendors.ts` by appending the following code. This will enable the [viewer component](viewer.component.md)
and compatibility mode for all browsers. It will also configure the web worker for the PDF.js
library to render PDF files in the background:
```ts
// PDF.js
require('pdfjs-dist/web/compatibility.js');
const pdfjsLib = require('pdfjs-dist');
pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
require('pdfjs-dist/web/pdf_viewer.js');
```
3. Update the `plugins` section of the `webpack.common.js` file with the following lines:
```js
new CopyWebpackPlugin([
...
{
from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
to: 'pdf.worker.js'
}
])
```
The [Viewer component](viewer.component.md) now should be able to display PDF files.
### Extending the Viewer
You can define your own custom handler to handle other file formats that are not yet supported by
the [Viewer component](viewer.component.md). Below is an example that shows how to use the `adf-viewer-extension`
to handle 3D data files:
```html
<adf-viewer [nodeId]="nodeId">
<adf-viewer-extension [supportedExtensions]="['obj','3ds']" #extension>
<ng-template let-urlFileContent="urlFileContent" let-extension="extension">
<threed-viewer
[urlFile]="urlFileContent"
[extension]="extension">
</threed-viewer>
</ng-template>
</adf-viewer-extension>
</adf-viewer>
```
Note: you need to add the `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
You can define multiple `adf-viewer-extension` templates if required:
```html
<adf-viewer [nodeId]="nodeId">
<adf-viewer-extension [supportedExtensions]="['xls','xlsx']" #extension>
<ng-template let-urlFileContent="urlFileContent">
<my-custom-xls-component
urlFileContent="urlFileContent">
</my-custom-xls-component>
</ng-template>
</adf-viewer-extension>
<adf-viewer-extension [supportedExtensions]="['txt']" #extension>
<ng-template let-urlFileContent="urlFileContent" >
<my-custom-txt-component
urlFileContent="urlFileContent">
</my-custom-txt-component>
</ng-template>
</adf-viewer-extension>
</adf-viewer>
```
### Custom layout
The [Viewer component](viewer.component.md) lets you transclude custom content in several different places as
explained in the sections below.
#### Custom toolbar
You can replace the standard viewer toolbar with your own custom implementation:
```html
<adf-viewer>
<adf-viewer-toolbar>
<h1>toolbar</h1>
</adf-viewer-toolbar>
</adf-viewer>
```
Everything you put inside the "adf-viewer-toolbar" tags will be rendered instead of the
standard toolbar.
#### Custom toolbar buttons
If you are happy with the custom toolbar's behaviour but want to add some extra buttons
then you can do so as shown in the following example:
```html
<adf-viewer>
<adf-viewer-toolbar-actions>
<button mat-icon-button>
<mat-icon>alarm</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>backup</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>bug_report</mat-icon>
</button>
</adf-viewer-toolbar-actions>
</adf-viewer>
```
The result should look like this:
![Custom Toolbar Actions](../../docassets/images/viewer-toolbar-actions.png)
#### Custom sidebar
The [Viewer component](viewer.component.md) also supports custom sidebar components and layouts.
Set the `allowRightSidebar` property to `true` to enable this feature.
The custom sidebar can be injected in two different ways. The first way is to use
transclusion, which will display all content placed inside the `<adf-viewer-sidebar>` element:
```html
<adf-viewer [allowRightSidebar]="true">
<adf-viewer-sidebar>
<h1>My info</h1>
</adf-viewer-sidebar>
</adf-viewer>
```
The second way to customize the sidebar is to use template injection but note that this only works
when using the viewer with `nodeId`.
```html
<ng-template let-node="node" #sidebarTemplate>
<adf-content-metadata-card [node]="node"></adf-content-metadata-card>
</ng-template>
<adf-viewer [allowRightSidebar]="true" [sidebarRightTemplate]="sidebarTemplate"></adf-viewer>
```
#### Custom thumbnails
The PDF viewer comes with its own default list of thumbnails but you can replace this
by providing a custom template and binding to the context property `viewer` to access the PDFJS.PDFViewer
instance.
![PDF thumbnails](../../docassets/images/pdf-thumbnails.png)
Provide the custom template as in the following example:
```javascript
import { Component, Input } from '@angular/core';
@Component({
selector: 'custom-thumbnails',
template: '<p> Custom Thumbnails Component </p>'
})
export class CustomThumbnailsComponent {
@Input() pdfViewer: any;
...
}
```
```html
<ng-template #customThumbnailsTemplate let-pdfViewer="viewer">
<custom-thumbnails [pdfViewer]="pdfViewer"></custom-thumbnails>
</ng-template>
<adf-viewer [thumbnailsTemplate]="customThumbnailsTemplate"></adf-viewer>
```
#### Custom "Open With" menu
You can enable a custom "Open With" menu by providing at least one action inside the
`adf-viewer-open-with` tag:
```html
<adf-viewer [nodeId]="nodeId">
<adf-viewer-open-with>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Option 1</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Option 2</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Option 3</span>
</button>
</adf-viewer-open-with>
</adf-viewer>
```
![Open with](../../docassets/images/viewer-open-with.png)
#### Custom "More actions" menu
You can enable a custom "More actions" menu by providing at least one action inside the `adf-viewer-more-actions` tag:
```html
<adf-viewer [nodeId]="nodeId">
<adf-viewer-more-actions>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Action One</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Action Two</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Action Three</span>
</button>
</adf-viewer-more-actions>
</adv-viewer>
```
![More actions](../../docassets/images/viewer-more-actions.png)
### Printing
You can configure the Viewer to let the user print the displayed content. The
component will show a "Print" button if the `allowPrint` property is set to
true.
```html
<adf-viewer [allowPrint]="true">
...
</adf-viewer>
```
You can also use the `print` event to get notification when the user prints some
content.
## See also
- [Document List component](../../content-services/document-list.component.md)