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-2463] Moved doc files to subfolders (#3070)

Browse Source 
* [ADF-2463] Moved doc files to subfolders

* [ADF-2463] Fixed broken image links

* [ADF-2463] Moved doc files to subfolders

* [ADF-2463] Fixed broken image links
This commit is contained in:
Andy Stark
2018-03-13 11:55:33 +00:00
committed by Eugenio Romano
parent d4780d41ce
commit ba905acf13
37 changed files with 107 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/core/auth-guard-bpm.service.md Normal file
View File

@@ -0,0 +1,41 @@
---
Added: v2.0.0
Status: Active
---
# Auth Guard Bpm service
Adds authentication with Process Services to a route within the app.
## Details
The Auth Guard Bpm service implements an Angular
[route guard](https://angular.io/guide/router#milestone-5-route-guards)
to check the user is logged into Process Services. This is typically used with the
`canActivate` guard check in the route definition:
```ts
const appRoutes: Routes = [
...
{
path: 'examplepath',
component: ExampleComponent,
canActivate: [ AuthGuardBpm ] // <- Requires authentication for this route.
},
...
]
```
If the user now clicks on a link or button that follows this route, they will be prompted
to log in before proceeding.
This service only accepts authentication with APS but you can use the
[Auth Guard Ecm service](auth-guard-ecm.service.md) to authenticate
against ACS or the [Auth Guard service](auth-guard.service.md) to authenticate against
either ACS or APS. See the
[ADF custom page tutorial](https://community.alfresco.com/docs/DOC-6628-adf-105-creating-custom-pages-and-components)
for worked examples of all three guards.
## See also
- [Auth guard ecm service](auth-guard-ecm.service.md)
- [Auth guard service](auth-guard.service.md)

41
docs/core/auth-guard-ecm.service.md Normal file
View File

@@ -0,0 +1,41 @@
---
Added: v2.0.0
Status: Active
---
# Auth Guard Ecm service
Adds authentication with Content Services to a route within the app.
## Details
The Auth Guard Bpm service implements an Angular
[route guard](https://angular.io/guide/router#milestone-5-route-guards)
to check the user is logged into Process Services. This is typically used with the
`canActivate` guard check in the route definition:
```ts
const appRoutes: Routes = [
...
{
path: 'examplepath',
component: ExampleComponent,
canActivate: [ AuthGuardBpm ] // <- Requires authentication for this route.
},
...
]
```
If the user now clicks on a link or button that follows this route, they will be prompted
to log in before proceeding.
This service only accepts authentication with ACS but you can use the
[Auth Guard Bpm service](auth-guard-bpm.service.md) to authenticate
against APS or the [Auth Guard service](auth-guard.service.md) to authenticate against
either APS or ACS. See the
[ADF custom page tutorial](https://community.alfresco.com/docs/DOC-6628-adf-105-creating-custom-pages-and-components)
for worked examples of all three guards.
## See also
- [Auth guard service](auth-guard.service.md)
- [Auth guard bpm service](auth-guard-bpm.service.md)

42
docs/core/auth-guard.service.md Normal file
View File

@@ -0,0 +1,42 @@
---
Added: v2.0.0
Status: Active
---
# Auth Guard service
Adds authentication to a route within the app.
## Details
The Auth Guard service implements an Angular
[route guard](https://angular.io/guide/router#milestone-5-route-guards)
to check the user is logged in. This is typically used with the
`canActivate` guard check in the route definition:
```ts
const appRoutes: Routes = [
...
{
path: 'examplepath',
component: ExampleComponent,
canActivate: [ AuthGuard ] // <- Requires authentication for this route.
},
...
]
```
If the user now clicks on a link or button that follows this route, they will be prompted
to log in before proceeding.
This service will accept authentication with either APS or ACS as valid and is thus suitable for
menu pages and other content that doesn't make use of APS or ACS features. Use the
[Auth Guard Bpm service](auth-guard-bpm.service.md) and
[Auth Guard Ecm service](auth-guard-ecm.service.md) to authenticate
against APS or ACS, respectively. See the
[ADF custom page tutorial](https://community.alfresco.com/docs/DOC-6628-adf-105-creating-custom-pages-and-components)
for worked examples of all three guards.
## See also
- [Auth guard bpm service](auth-guard-bpm.service.md)
- [Auth guard ecm service](auth-guard-ecm.service.md)

128
docs/core/card-view-update.service.md Normal file
View File

@@ -0,0 +1,128 @@
---
Added: v2.0.0
Status: Active
---
# Card View Update service
Reports edits and clicks within fields of a Card View component.
## Details
You can use the Card View Update service to respond to edits and clicks within items on
a card view. This might involve updating application data to reflect the changes made to
the view or could simply be a matter of highlighting a clicked item.
The service is injected into a component using a constructor parameter, which also
creates a corresponding property in the object:
```ts
properties: any;
constructor(private cardViewUpdateService: CardViewUpdateService) {
this.properties = [
new CardViewTextItemModel({
label: 'Name',
value: 'Kirk',
key: 'name',
default: 'No name entered',
multiline: false,
editable: true,
clickable: true
}),
new CardViewTextItemModel({
label: 'Rank',
value: 'Captain',
key: 'rank',
default: 'No rank entered',
multiline: false,
editable: true,
clickable: true
}),
new CardViewTextItemModel({
label: 'Ship',
value: 'Enterprise',
key: 'ship',
default: 'No ship entered',
multiline: false,
editable: true,
clickable: true
})
];
}
```
The constructor here also sets the `CardViewTextItemModel` instances that define the layout of the
card view (see the [Card View component](card-view.component.md) for further information
about this). The model objects and the `key` property are used to identify which item has been clicked
or updated when an event occurs.
You must "subscribe" to the service in order to be informed about clicks and updates. You can do this by
registering your own functions with the service's `itemUpdated$` and `itemClicked$` events
(place this code in the `ngOnInit`
[lifecycle hook](https://angular.io/guide/lifecycle-hooks#oninit) rather than the constructor):
```ts
ngOnInit() {
this.cardViewUpdateService.itemUpdated$.subscribe(this.respondToCardUpdate.bind(this));
this.cardViewUpdateService.itemClicked$.subscribe(this.respondToCardClick.bind(this));
}
```
With the subscriptions in place, `respondToCardUpdate` and `respondToCardClick` will now be
called after updates and clicks, respectively.
### Responding to updates
The update function is passed a parameter of type `UpdateNotification`:
```ts
export interface UpdateNotification {
target: any;
changed: any;
}
```
Here, `target` contains the `CardViewTextItemModel` that was used to initialize
the field in question (in practice, this might be a `CardViewDateItemModel` or `CardViewMapItemModel` if
the card layout includes these objects). The `changed` property contains an object with a single property:
```ts
{ keyValue: 'Value after editing' }
```
Here, `keyValue` is actually the value of the `key` field specified when the item was initialized. So
in our example, if the third item was edited from 'Enterprise' to 'Shuttle Craft', the object would be:
```ts
{ ship: 'Shuttle Craft' }
```
The complete code for `respondToCardUpdate` might look something like the following:
```ts
respondToCardUpdate(un: UpdateNotification) {
this.updateMessage = un.target.label + ' changed to ' + un.changed[un.target.key];
}
```
Note that the function will only be called if the `editable` property of the model object is set to true
for this item. Also, the `editable` value of all items will be overridden if `editable` is set to false
on the [Card View component](card-view.component.md) itself.
### Responding to clicks
The click function is passed a `ClickNotification` object, which is similar to `UpdateNotification` described above,
but without the `changed` property. Use the `target` property to identify the item that was clicked:
```ts
respondToCardClick(cn: ClickNotification) {
this.clickMessage = cn.target.label + ' was just clicked';
}
```
Note that this function will only be called if the `clickable` property of the model object is set to true for this item.
## See also
- [Card view component](card-view.component.md)

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

@@ -0,0 +1,369 @@
---
Added: v2.0.0
Status: Active
---
# Card View component
Displays a configurable property list renderer.
![adf-custom-view](../docassets/images/adf-custom-view.png)
## Basic Usage
```html
<adf-card-view
[properties]="[{label: 'My Label', value: 'My value'}]"
[editable]="false">
</adf-card-view>
```
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| properties | [CardViewItem](#defining-properties)\[] | - | (**required**) The custom view to render |
| editable | boolean | - | If the component editable or not |
| displayEmpty | boolean | true | Whether to show empty properties in non-editable mode |
## Details
You define the property list, the CardViewComponent does the rest. Each property represents a card view item (a row) in the card view component. At the time of writing three a few kind of card view item (property type) is supported out of the box (e.g: [text](#card-text-item) item and [date](#card-date-item) item) but you can define your own custom types as well.
### Editing
The card view can optionally allow its properties to be edited. You can control the editing of the properties in two level.
- **global level** - _via the editable parameter of the card-view.component_
- **property level** - _in each property via the editable attribute_
If you set the global editable parameter to false, no properties can be edited regardless of what is set inside the property.
See the [Card View Update service](card-view-update.service.md) page for details on 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
Properties is an array of models which one by one implements the CardViewItem interface.
```js
export interface CardViewItem {
label: string;
value: any;
key: string;
default?: any;
type: string;
displayValue: string;
editable?: boolean;
}
```
At the moment these are the models supported:
- **CardViewTextItemModel** - _for text items_
- **CardViewMapItemModel** - _for map items_
- **CardViewDateItemModel** - _for date items_
- **CardViewDatetimeItemModel** - _for datetime items_
- **CardViewBoolItemModel** - _for bool items (checkbox)_
- **CardViewIntItemModel** - _for integers items_
- **CardViewFloatItemModel** - _for float items_
Each of them extends the abstract CardViewBaseItemModel class to add some custom functionality to the basic behaviour.
```js
this.properties = [
new CardViewTextItemModel({
label: 'Name',
value: 'Spock',
key: 'name',
default: 'default bar' ,
multiline: false
}),
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
}),
...
]
```
#### Card Text Item
CardViewTextItemModel is a property type for text properties.
```js
const textItemProperty = new CardViewTextItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | --- | The label to render |
| value\* | any | --- | The original value |
| key\* | string | --- | the key of the property. Have an important role when editing the property. |
| default | any | --- | The default value to render in case the value is empty |
| displayValue\* | string | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
| clickable | boolean | false | Whether the property clickable or not |
| multiline | string | false | Single or multiline text |
| pipes | CardViewTextItemPipeProperty\[] | \[] | Pipes to be applied on the displayValue |
##### Using pipes in Card Text Item
You can use pipes for text items almost the same way as you would do it in your template. You can provide an array of pipes with additional pipeParameters like this:
```js
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 is a property type for map properties.
```js
const mapItemProperty = new CardViewMapItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | --- | The label to render |
| value\* | Map | --- | A map that contains the key value pairs |
| key\* | string | --- | the key of the property. |
| default | any | --- | The default value to render in case the value is empty |
| displayValue\* | string | --- | The value to render |
| clickable | boolean | false | Whether the property clickable or not |
#### Card Date Item
CardViewDateItemModel is a property type for date properties.
```js
const dateItemProperty = new CardViewDateItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | --- | The label to render |
| value\* | any | --- | The original value |
| key\* | string | --- | the key of the property. |
| default | any | --- | The default value to render in case the value is empty |
| displayValue\* | any | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
| format | boolean | "MMM DD YYYY" | any format that momentjs accepts |
#### Card Datetime Item
CardViewDatetimeItemModel is a property type for datetime properties.
```js
const datetimeItemProperty = new CardViewDatetimeItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | --- | The label to render |
| value\* | any | --- | The original value |
| key\* | string | --- | the key of the property. |
| default | any | any | The default value to render in case the value is empty |
| displayValue\* | string | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
| format | boolean | "MMM DD YYYY HH:mm" | any format that momentjs accepts |
#### Card Bool Item
CardViewBoolItemModel is a property type for boolean properties.
```js
const boolItemProperty = new CardViewBoolItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | --- | The label to render |
| value\* | boolean | --- | The original value |
| key\* | string | --- | the key of the property. |
| default | boolean | false | The default value to render in case the value is empty |
| displayValue\* | boolean | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
#### Card Int Item
CardViewIntItemModel is a property type for integer properties.
```js
const intItemProperty = new CardViewIntItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | --- | The label to render |
| value\* | integer | --- | The original value |
| key\* | string | --- | the key of the property. |
| default | integer | --- | The default value to render in case the value is empty |
| displayValue\* | integer | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
#### Card Float Item
CardViewFloatItemModel is a property type for float properties.
```js
const floatItemProperty = new CardViewFloatItemModel(options);
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label\* | string | --- | The label to render |
| value\* | float | --- | The original value |
| key\* | string | --- | the key of the property. |
| default | float | --- | The default value to render in case the value is empty |
| displayValue\* | float | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
### Defining your custom card Item
Card item components are loaded dynamically, which makes you able to define your own custom component for the custom card item type.
Let's consider you want to have a **stardate** type to display Captain Picard's birthday (47457.1). For this, you need to do the following steps.
#### 1. Define the Model for the custom type
Your model has to extend the **CardViewBaseItemModel** and implement the **CardViewItem** and **DynamicComponentModel** interface.
_(You can check how the CardViewTextItemModel is implemented for further guidance.)_
```js
import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
export class CardViewStarDateItemModel extends CardViewBaseItemModel implements
CardViewItem, DynamicComponentModel {
type: string = 'star-date';
get displayValue() {
return this.convertToStarDate(this.value) || this.default;
}
private convertToStarDate(starTimeStamp: number): string {
// Do the magic
}
}
```
#### 2. Define the Component for the custom type
Create your custom card view item component. Defining the selector is not important, being it a dinamically loaded component, so you can give any selector name to it, but it makes sense to follow the angular standards.
```js
@Component({
selector: 'card-view-stardateitem' // For example
...
})
export class CardViewStarDateItemComponent {
@Input()
property: CardViewStarDateItemModel;
@Input()
editable: boolean;
constructor(private cardViewUpdateService: CardViewUpdateService) {}
isEditable() {
return this.editable && this.property.editable;
}
showStarDatePicker() {
...
}
}
```
To make your component editable, you can have a look on either the CardViewTextItemComponent' or on the CardViewDateItemComponent's source.
#### 3. Add you custom component to your module's entryComponents list
For Angular to be able to load your custom component dynamically, you have to register your component in your modules entryComponents.
```js
@NgModule({
imports: [...],
declarations: [
CardViewStarDateItemComponent
],
entryComponents: [
CardViewStarDateItemComponent
],
exports: [...]
})
export class MyModule {}
```
#### 4. Bind your custom component to the custom model type, enabling Angular's dynamic component loader to find it.
For mapping each type to their Component, there is the **CardItemTypeService**. This service extends the **DynamicComponentMapper** abstract class.
This CardItemTypeService is responible for the type resolution, it contains all the default components (e.g.: text, date, etc...) also. In order to make your component available, you need to extend the list of possible components.
You can extend this list the following way:
```js
@Component({
...
providers: [ CardItemTypeService ] // If you don't want to pollute the main instance of the CardItemTypeService service
...
})
export class SomeParentComponent {
constructor(private cardItemTypeService: CardItemTypeService) {
cardItemTypeService.setComponentTypeResolver('star-date', () => CardViewStarDateItemComponent);
}
}
```
## See also
- [Card view update service](card-view-update.service.md)

51
docs/core/context-menu.directive.md Normal file
View File

@@ -0,0 +1,51 @@
---
Added: v2.0.0
Status: Active
---
# Context Menu directive
Adds a context menu to a component.
## Basic Usage
```html
<my-component [context-menu]="menuItems"></my-component>
<context-menu-holder></context-menu-holder>
```
```ts
@Component({
selector: 'my-component'
})
export class MyComponent implements OnInit {
menuItems: any[];
constructor() {
this.menuItems = [
{ title: 'Item 1', subject: new Subject() },
{ title: 'Item 2', subject: new Subject() },
{ title: 'Item 3', subject: new Subject() }
];
}
ngOnInit() {
this.menuItems.forEach(l => l.subject.subscribe(item => this.commandCallback(item)));
}
commandCallback(item) {
alert(`Executing ${item.title} command.`);
}
}
```
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| showIcons | boolean | false | Render defined icons |
## Details
See **Demo Shell** or **DocumentList** implementation for more details and use cases.

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

@@ -0,0 +1,282 @@
---
Added: v2.0.0
Status: Active
---
# DataColumn Component
Defines column properties for DataTable, Tasklist, Document List and other components.
## Contents
- [Basic Usage](#basic-usage)
- [Properties](#properties)
- [Details](#details)
- [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>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| key | `string` | | Data source key. Can be either a column/property key like `title` or a property path like `createdBy.name`. |
| type | `string` | `'text'` | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
| format | `string` | | Value format (if supported by the parent component), for example format of the date. |
| sortable | `boolean` | `true` | Toggles ability to sort by this column, for example by clicking the column header. |
| title | `string` | `''` | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
| formatTooltip | `Function` | | Custom tooltip formatter function. |
| srTitle | `string` | | Title to be used for screen readers. |
| cssClass | `string` | | Additional CSS class to be applied to column (header and cells). |
## Details
### Automatic column header translation
You can use i18n resource keys with DataColumn `title` property.
The component will automatically check the corresponding i18n resources and fetch 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 be working as it was before.
### 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](../datatable-adapter.interface.md) | Data adapter instance. |
| row | [DataRow](../datatable-adapter.interface.md) | Current data row instance. |
| col | [DataColumn](../datatable-adapter.interface.md) | Current data column instance. |
You can use all three properties to gain full access to underlying data from within your custom templates.
In order to wire HTML templates with the data context you will need defining a variable that is bound to `$implicit` like shown below:
```html
<ng-template let-context="$implicit">
<!-- template body -->
</ng-template>
```
The format of naming is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want to bind template data context to.
Getting a cell value from the underlying DataTableAdapter:
```ts
context.data.getValue(entry.row, entry.col);
```
You can retrieve all property values for underlying node, including nested properties (via property paths):
```ts
context.row.getValue('name')
context.row.getValue('createdByUser.displayName')
```
You may want using **row** api to get raw value access.
```html
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
<ng-template let-context="$implicit">
<span>Hi! {{context.row.getValue('createdByUser.displayName')}}</span>
<span>Hi! {{context.row.getValue('name')}}</span>
</ng-template>
</data-column>
```
Use **data** api to get values with post-processing, like datetime/icon conversion.\_
In the Example below we will prepend `Hi!` to each file and folder name in the list:
```html
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
<ng-template let-entry="$implicit">
<span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
</ng-template>
</data-column>
```
In the Example below we will integrate the [adf-tag-node-list](../tag-node-list.component.md) component
with the document list.
```html
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
key="id"
sortable="true"
class="full-width ellipsis-cell">
<ng-template let-entry="$implicit">
<adf-tag-node-list [nodeId]="entry.data.getValue(entry.row, entry.col)"></adf-tag-node-list>
</ng-template>
</data-column>
```
![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="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-data-table-cell.adf-data-table-cell--image.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 `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)
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Document list component](../document-list.component.md)
- [Datatable component](../datatable.component.md)
- [Task list component](../task-list.component.md)
<!-- seealso end -->

26
docs/core/deleted-nodes-api.service.md Normal file
View File

@@ -0,0 +1,26 @@
---
Added: v2.0.0
Status: Active
---
# Deleted Nodes Api service
Gets a list of Content Services nodes currently in the trash.
## Methods
- `getDeletedNodes(options?: Object): Observable<NodePaging>`
Gets a list of nodes in the trash.
- `options` - (Optional) Options for JSAPI call
## Details
The `getDeletedNodes` method returns a NodePaging object that lists
the items in the trash (see [Document Library model](../document-library.model.md) for
more information about this class). The format of the `options` parameter is
described in the [getDeletedNodes](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodesApi.md#getDeletedNodes)
page of the Alfresco JS API docs.
## See also
- [Nodes api service](../nodes-api.service.md)
- [Node service](../node.service.md)

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

@@ -0,0 +1,39 @@
---
Added: v2.0.0
Status: Active
---
# Info drawer layout component
Displays a sidebar-style information panel.
![Info drawer layout screenshot](../docassets/images/infodrawerlayout.png)
## Basic usage
```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. There are three regions where you can add your own content, as shown in the example:
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
## See also
- [Info drawer component](info-drawer.component.md)

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

@@ -0,0 +1,52 @@
---
Added: v2.0.0
Status: Active
---
# InfoDrawer component
Displays a sidebar-style information panel with tabs.
![Info drawer screenshot](../docassets/images/activities-infodrawer.png)
## Basic usage
```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>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| title | `string` | `null` | The title of the info drawer. |
| selectedIndex | `number` | `0` | The selected index tab. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| currentTab | `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 `adf-info-drawer-tab` subcomponent to add tabs (as shown in the example) and the `currentTab` output property to select the currently active tab.
You can also customize the three regions (title, buttons and content) as with the Info Drawer Layout component.
## See also
- [Info drawer layout component](info-drawer-layout.component.md)

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

@@ -0,0 +1,75 @@
---
Added: v2.0.0
Status: Active
---
# Language Menu component
Displays all the languages that are present in the "app.config.json" or the default one (EN).
![Language Menu screenshot](../docassets/images/languages-menu.png)
## Basic usage
How to attach an ADF Language Menu as 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
In the previous example we are using the ADF Language Menu as main menu.
The Language Menu component is able to fetch all the languages from the "app.config.json".
This is how the configuration looks like in the the "app.config.json"
```json
"languages": [
{
"key": "en",
"label": "English"
},
{
"key": "fr",
"label": "French"
},
{
"key": "it",
"label": "Italian"
}
]
```
In case no setting is provided, the component shows only the English language.
### Nested Menu language
How to attach an ADF Language Menu as 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)
### Nested menu details
In the previous example we are using the ADF Language Menu as nested menu.
## See Also
- [Internationalization](../internationalization.md)

43
docs/core/node-delete.directive.md Normal file
View File

@@ -0,0 +1,43 @@
---
Added: v2.0.0
Status: Active
---
# Node Delete directive
Deletes multiple files and folders.
## Basic Usage
```html
<adf-toolbar>
<button mat-icon-button
(delete)="documentList.reload()"
[adf-delete]="documentList.selection">
</button>
</adf-toolbar>
<adf-document-list #documentList ...>
...
</adf-document-list>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| selection | `MinimalNodeEntity[] | DeletedNodeEntity[]` | | Array of nodes to delete. |
| permanent | `boolean` | `false` | If true then the nodes are deleted immediately rather than being put in the trash. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| delete | `EventEmitter<any>` | Emitted when the nodes have been deleted. |
## Details
Note it the file is already in the trashcan so is a DeletedNodeEntity the performing of this action will delete the file premanently
## See also
- [Node Restore directive](node-restore.directive.md)

73
docs/core/node-favorite.directive.md Normal file
View File

@@ -0,0 +1,73 @@
---
Added: v2.0.0
Status: Active
---
# Node Favorite directive
Selectively toggles nodes as favorite
## Basic Usage
```html
<adf-toolbar>
<button mat-icon-button
(toggle)="done()"
[adf-node-favorite]="documentList.selection">
</button>
</adf-toolbar>
<adf-document-list #documentList ...>
...
</adf-document-list>
```
```ts
@Component({
selector: 'my-component'
})
export class MyComponent {
done() {
// ...
}
}
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| selection | `MinimalNodeEntity[]` | `[]` | Array of nodes to toggle as favorites. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| toggle | `EventEmitter<any>` | Emitted when the favorite setting is complete. |
## Details
The `NodeFavoriteDirective` instance can be bound to a template variable through **adfFavorite** reference,
which provides a method to help further style the element.
```html
<button
mat-menu-item
#selection="adfFavorite"
[ngClass]="{ 'icon-highlight': selection.hasFavorites() }"
[adf-node-favorite]="documentList.selection">
<mat-icon [ngClass]="{ 'icon-highlight': selection.hasFavorites() }">
{{ selection.hasFavorites() ? 'star' : 'star_border' }}
</mat-icon>
</button>
```
The directive performs as follows:
- if there are no favorite nodes in the selection, then all are marked as favorites
- if there is at least one favorite node in the selection, then only those who are not
are being marked
- if all nodes in the selection are favorites, then they are removed from favorites
See **Demo Shell**

100
docs/core/node-permission.directive.md Normal file
View File

@@ -0,0 +1,100 @@
---
Added: v2.0.0
Status: Active
---
# Node Permission directive
Selectively disables an HTML element or Angular component
## Basic Usage
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| permission | `string` | `null` | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions). |
| nodes | `MinimalNodeEntity[]` | `[]` | Nodes to check permission for. |
## Details
The `NodePermissionDirective` allows you to disable an HTML element or Angular component
by taking a collection of the `MinimalNodeEntity` instances and checking the particular permission.
The decorated element will be disabled if:
- there are no nodes in the collection
- at least one of the nodes has no expected permission
### HTML element example
The best example to show `NodePermissionDirective` in action is by binding DocumentList selection property to a toolbar button.
For example the "Delete" button should be disabled if no selection is present or if user has no rights to delete at least one node in the selection.
```html
<adf-toolbar title="toolbar example">
<button mat-icon-button
adf-node-permission="delete"
[adf-nodes]="documentList.selection">
<mat-icon>delete</mat-icon>
</button>
</adf-toolbar>
<adf-document-list #documentList ...>
...
</adf-document-list>
```
The button will become disabled by default, and is going to change its state once user selects/unselects one or multiple documents that current user has permission to delete.
### Angular component example
You can apply the directive on any angular component which implements the NodePermissionSubject interface. The upload drag area component can be a good candidate, since this one implements that interface. Applying the directive on an angular component is pretty much the same as applying it on an html element.
```html
<alfresco-upload-drag-area
[parentId]="..."
[versioning]="..."
[adf-node-permission]="'create'"
[adf-nodes]="getCurrentDocumentListNode()">
...
</alfresco-upload-drag-area>
```
When designing a component you want to work this directive with, you have two important things to care about.
### Implementing the NodePermissionSubject interface
The component has to implement the NodePermissionSubject interface which basically means it has to have a boolean **disabled** property. This is the property which will be set by the directive.
```js
import { NodePermissionSubject } from '@alfresco/adf-core';
@Component({...})
export class UploadDragAreaComponent implements NodePermissionSubject {
public disabled: boolean = false;
}
```
### Defining your components as an EXTENDIBLE_COMPONENT parent component
The directive will look up the component in the dependency injection tree, up to the @Host() component.
> "The host component is typically the component requesting the dependency. **But when this component is projected into a parent component, that parent component becomes the host.**"
- because of this, you have to provide your component with forward referencing as the EXTENDIBLE_COMPONENT.
- because of the emphasized second sentence you have to provide your component as a viewProvider.
```js
import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';
@Component({
...
viewProviders: [
{ provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}
]
})
export class UploadDragAreaComponent implements NodePermissionSubject { ... }
```
**Notice the usage of viewProviders (instead of providers)! This part is very important, especially if you want to use this directive on a transcluded component!**

49
docs/core/node-restore.directive.md Normal file
View File

@@ -0,0 +1,49 @@
---
Added: v2.0.0
Status: Active
---
# Node Restore directive
Restores deleted nodes to their original location.
## Basic Usage
```html
<adf-toolbar title="toolbar example">
<button mat-icon-button
location="/files"
[adf-restore]="documentList.selection"
(restore)="documentList.reload()">
<mat-icon>restore</mat-icon>
</button>
</adf-toolbar>
<adf-document-list #documentList
currentFolderId="-trash-" ...>
...
</adf-document-list>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| selection | `DeletedNodeEntry[]` | | Array of deleted nodes to restore. |
| location | `string` | `''` | Path to restored node. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| restore | `EventEmitter<any>` | Emitted when restoration is complete. |
## Details
'NodeRestoreDirective' directive takes a selection of `DeletedNodeEntry[]` and restores them in their original location.
If the original location doesn't exist anymore, then they remain in the trash list.
For single node restore, there is action to jump to the location where the node has been restored and for this `location` is used to specify the route path where the list of nodes are rendered
## See Also
- [Node delete directive](node-delete.directive.md)

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

@@ -0,0 +1,42 @@
---
Added: v2.1.0
Status: Active
---
# Sidebar action menu component
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
```html
<adf-sidebar-action-menu>
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-expand-icon>
<mat-icon>queue</mat-icon>
</div>
<div sidebar-menu-options>
<button mat-menu-item>
<mat-icon>assignment</mat-icon>
<span>Button Name</span>
</button>
</div>
</adf-sidebar-action-menu>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| title | `string` | | The title of the sidebar action. |
| expanded | `boolean` | | Toggle the sidebar action menu on expand. |
## Details
As the name suggests, this is basically just a layout with CSS styling. There are three regions where you can add your own content, as shown in the example:
- sidebar-menu-title-icon
- sidebar-menu-options
- sidebar-menu-expand-icon

52
docs/core/sites.service.md Normal file
View File

@@ -0,0 +1,52 @@
---
Added: v2.0.0
Status: Active
---
# Sites service
Accesses and manipulates sites from a Content Services repository.
## Methods
- `getSites(opts: any = {}): Observable<SitePaging>`
Gets a list of all sites in the repository.
- `opts` - Options supported by JSAPI
- `getSite(siteId: string, opts?: any): Observable<SiteEntry>`
Gets the details for a site.
- `siteId` - ID of the target site
- `opts` - (Optional) Options supported by JSAPI
- `deleteSite(siteId: string, permanentFlag: boolean = true): Observable<any>`
Deletes a site.
- `siteId` - Site to delete
- `permanentFlag` - True: deletion is permanent; False: site is moved to the trash
- `getSiteContent(siteId: string): Observable<SiteEntry>`
Gets a site's content.
- `siteId` - ID of the target site
- `getSiteMembers(siteId: string): Observable<SiteEntry>`
Gets a list of all a site's members.
- `siteId` - ID of the target site
## Details
You can use `getSites` to get a list of all sites in the repository.
The sites are returned as `Observable<SiteModel[]>` (see
[Site Model](../site.model.md) for more information about this class).
If you are only interested in a single site and you have its ID, you
can use `getSite` to access it. Alternatively, you can use `getSiteContent`
or `getSiteMembers` to extract just the `contents` and `members` properties
of the site.
You can also delete a site using `deleteSite`. If the `permanentFlag` parameter
is set to false then the site will be moved to the trash rather than being
deleted immediately.
Both `getSite` and `getSites` have an `opts` parameter to supply extra
options. See the Alfresco JS API docs about
[getSites](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitesApi.md#getSites)
and
[getSite](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitesApi.md#getSite)
for more information about the available options.
## See also
- [Site model](../site.model.md)

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

@@ -0,0 +1,66 @@
---
Added: v2.0.0
Status: Active
---
# Text Mask directive
Implements text field input masks.
## Basic Usage
```html
<input [textMask]="{mask: mask, isReversed: isMaskReversed}">
```
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| textMask | any | | 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.

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

@@ -0,0 +1,23 @@
---
Added: v2.0.0
Status: Active
---
# Toolbar Divider Component
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)

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

@@ -0,0 +1,29 @@
---
Added: v2.0.0
Status: Active
---
# Toolbar Title Component
Supplies custom HTML to be included in a Toolbar component 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)

116
docs/core/toolbar.component.md Normal file
View File

@@ -0,0 +1,116 @@
---
Added: v2.0.0
Status: Active
---
# Toolbar Component
Simple container for headers, titles, actions and breadcrumbs.
![](../docassets/images/adf-toolbar-01.png)
## 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>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| title | `string` | `''` | Toolbar title. |
| color | `string` | | Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. |
## Details
### Custom title
You can use any HTML layout or Angular component as a content of the Title section by using the special `<adf-toolbar-title>` component instead of the "title" attribute:
```html
<adf-toolbar>
<adf-toolbar-title>
<adf-breadcrumb ...></adf-breadcrumb>
</adf-toolbar-title>
...
</adf-toolbar>
```
The toolbar should now look similar to the following:
![](../docassets/images/adf-toolbar-02.png)
### Divider
You can divide groups of elements with a visual separator `<adf-toolbar-divider>`:
```html
<adf-toolbar>
<button></button>
<button></button>
<adf-toolbar-divider></adf-toolbar-divider>
<button></button>
</adf-toolbar>
```
### Dropdown menu
You can use the following example to create a dropdown menu:
```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>
```
The code above is based on the `<mat-menu>` component from the `@angular/material` library. You can use any custom menu component as well.
![](../docassets/images/adf-toolbar-03.png)
Once you click the menu button you should see the following menu items as defined earlier:
![](../docassets/images/adf-toolbar-04.png)
### Custom color
Besides the default color you can use 'primary', 'accent', or 'warn' values:
Depending on the overall application theme the colors of the toolbar should change.
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)

108
docs/core/user-preferences.service.md Normal file
View File

@@ -0,0 +1,108 @@
---
Added: v2.0.0
Status: Active
---
# User Preferences Service
Stores preferences for components.
## Methods
- `get(property: string, defaultValue?: string): string`
Gets a preference property.
- `property` - Name of the property
- `defaultValue` - (Optional) Default to return if the property is not found
- `set(property: string, value: any)`
Sets a preference property.
- `property` - Name of the property
- `value` - New value for the property
- `getStoragePrefix(): string`
Gets the active storage prefix for preferences.
- `setStoragePrefix(value: string)`
Sets the active storage prefix for preferences.
- `value` - Name of the prefix
- `getPropertyKey(property: string): string`
Gets the full property key with prefix.
- `property` - The property name
- `getDefaultPageSizes(): number[]`
Gets an array containing the available page sizes.
- `getDefaultLocale(): string`
Gets the default locale.
- `select : Observable`
Return the value for the user status property changed
## Details
The preferences are bound to a particular `prefix` so the application can switch between different profiles on demand.
For example upon login you can set the `prefix` as current username:
```ts
import { UserPreferencesService, AuthenticationService } from '@alfresco/adf-core';
@Component({...})
class AppComponent {
constructor(private userPreferences: UserPreferencesService,
private authService: AuthenticationService) {
}
onLoggedIn() {
this.userPreferences.setStoragePrefix(
this.authService.getEcmUsername()
);
}
}
```
As soon as you assign the storage prefix all settings that you get or set via the `UserPreferencesService` will be saved to dedicated profile.
You can import the service in your controller and use its APIs like below:
```ts
@Component({...})
class AppComponent {
constructor(userPreferences: UserPreferencesService) {
userPreferences.set('myProperty1', 'value1');
userPreferences.set('myProperty2', 'value2');
console.log(
userPreferences.get('myProperty1')
);
}
}
```
The service also provides quick access to a set of the "known" properties used across ADF components:
| Name | Type | Description |
| ---- | ---- | ----------- |
| authType | `string` | Authorization type (can be "ECM", "BPM" or "ALL"). |
| disableCSRF | `boolean` | Prevents the CSRF Token from being submitted if true. Only valid for Process Services. |
| paginationSize | `number` | Pagination size. |
| locale | `string` | Current locale setting. |
## User Preference onChange Stream
Whenever a property is set to the user preference service an onChange event is sent with the whole set of user properties. This comes in handy when a component wants to react to some property change.
```ts
userPreferences.paginationSize = 10;
userPreferences.onChange().subscribe((userStatusValues) => {
console.log(userStatusValues.PAGINATION_SIZE); //this will be 10
});
```
We have added also the `select` method where the user can give the property name which wants to be notified the changes and get the updated value.
A set of basic properties is added into the enumeration `UserPreferenceValues` which gives you the key value to access the standard user preference service properties : **PaginationSize**, **DisableCSRF**, **Locale** and **SupportedPageSizes**.
```ts
userPreferences.disableCSRF = true;
userPreferences.select(UserPreferenceValues.DisableCSRF).subscribe((CSRFflag) => {
console.log(CSRFflag); //this will be true;
});
```