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 (#3081)

Browse Source
This commit is contained in:
Andy Stark
2018-03-15 15:41:09 +00:00
committed by Eugenio Romano
parent c27273cb7d
commit e33cb06371
49 changed files with 131 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
docs/core/activiti-alfresco.service.md Normal file
View File

@@ -0,0 +1,131 @@
---
Added: v2.0.0
Status: Active
---
# Activiti Alfresco Content Service
Gets Alfresco Repository folder content based on a Repository account configured in Alfresco Process Services (APS).
It is possible to configure multiple Alfresco Repository accounts in APS (i.e. multiple Alfresco Servers).
This service can also be used to link Alfresco content as related content in APS.
Content such as documents and other files can be attached to Process Instances
and Task Instances as related content.
<aside class="warning">
At the moment you must provide the `ActivitiAlfrescoContentService` class from your `NgModule` for it to work:
```ts
@NgModule({
...
providers: [ActivitiAlfrescoContentService]
})
```
And also import it in the way shown below.
</aside>
## Importing
```ts
import { ActivitiAlfrescoContentService } from '@alfresco/adf-core';
export class SomePageComponent implements OnInit {
constructor(private contentService: ActivitiAlfrescoContentService) {
}
```
## Methods
#### getAlfrescoNodes(accountId: string, folderId: string): Observable<[ExternalContent]>
Get all the nodes under passed in folder node ID (e.g. 3062d73b-fe47-4040-89d2-79efae63869c) for passed in
Alfresco Repository account ID as configured in APS:
```ts
export class SomePageComponent implements OnInit {
ngOnInit() {
const alfRepoAccountId = 'alfresco-2';
const folderNodeId = '3062d73b-fe47-4040-89d2-79efae63869c';
this.contentService.getAlfrescoNodes(alfRepoAccountId, folderNodeId).subscribe( nodes => {
console.log('Nodes: ', nodes);
}, error => {
console.log('Error: ', error);
});
}
```
In the above sample code the `alfRepoAccountId` points to an Alfresco Repository configuration in APS with ID `alfresco-2`.
The `folderNodeId` needs to identify a folder node ID in the Alfresco Repository identified by the `alfRepoAccountId`.
The response contained in `nodes` is an array with properties for each object like in this sample:
```
0:
folder: false
id: "2223d3c2-0709-4dd7-a79b-c45571901889;1.0"
simpleType: "pdf"
title: "JLAN_Server_Installation_Guide.pdf"
1:
folder: false
id: "900b4dc0-bfdc-4ec1-84dd-5f1f0a420066;1.0"
simpleType: "image"
title: "Screen Shot 2017-09-21 at 15.44.23.png"
2:
folder: true
id: "f7010382-7b4e-4a78-bb94-9de092439230"
simpleType: "folder"
title: "Event More Stuff"
```
#### linkAlfrescoNode(accountId: string, node: ExternalContent, siteId: string): Observable<ExternalContentLink>
Link Alfresco content as related content in APS by passing in Alfresco node identifying the content, the Share site
that contains the content, and the Alfresco Repository account ID as configured in APS:
```ts
export class SomePageComponent implements OnInit {
ngOnInit() {
const alfRepoAccountId = 'alfresco-2';
const siteId = 'sample-workspace';
const externalContentNode = {
id: 'da196918-1324-4e97-9d26-d28f1837a0b6',
simpleType: 'content',
title: 'simple.txt',
folder: false
}
this.contentService.linkAlfrescoNode(alfRepoAccountId, externalContentNode, siteId).subscribe(link => {
console.log('Link: ', link);
}, error => {
console.log('Error: ', error);
});
}
```
In the above sample code the `alfRepoAccountId` points to an Alfresco Repository configuration in APS with ID `alfresco-2`.
The `siteId` identifies an Alfresco Share site in the Alfresco Repository where the content to be linked resides.
You can get the ID for a Share site from the URL: `http://localhost:8080/share/page/site/<siteId>`.
The `externalContentNode` identifies the content that should be set up as temporary related content in APS. The
`externalContentNode.id` points to an Alfresco node in the Share site specified with `siteId`.
The response contained in `link` looks like in this sample:
```
link:
contentAvailable: true
created: Tue Nov 07 2017 13:18:48 GMT+0000 (GMT) {}
createdBy: {id: 1, firstName: null, lastName: "Administrator", email: "admin@app.activiti.com"}
id: 6006
link:true
mimeType: null
name: "simple.txt"
previewStatus: "queued"
relatedContent: false
simpleType: "content"
source: "alfresco-2"
sourceId: "da196918-1324-4e97-9d26-d28f1837a0b6@sample-workspace"
thumbnailStatus: "queued"
```
<!-- seealso start -->
<!-- seealso end -->

38
docs/core/alfresco-api.service.md Normal file
View File

@@ -0,0 +1,38 @@
---
Added: v2.0.0
Status: Active
---
# Alfresco Api Service
Provides access to initialized **AlfrescoJSApi** instance.
## Basic Usage
```ts
export class MyComponent implements OnInit {
constructor(private apiService: AlfrescoApiService) {
}
ngOnInit() {
let nodeId = 'some-node-id';
let params = {};
this.apiService.getInstance().nodes
.getNodeChildren(nodeId, params)
.then(result => console.log(result));
}
}
```
## Details
**Note for developers**: _the TypeScript declaration files for Alfresco JS API
are still under development and some Alfresco APIs may not be accessed
via your favourite IDE's intellisense or TypeScript compiler.
In case of any TypeScript type check errors you can still call any supported
Alfresco JS api by casting the instance to `any` type like the following:_
```ts
let api: any = this.apiService.getInstance();
api.nodes.addNode('-root-', body, {});
```

57
docs/core/alfresco-content.service.md Normal file
View File

@@ -0,0 +1,57 @@
---
Added: v2.0.0
Status: Active
---
# Alfresco Content service
Gets URLs and access info and creates folders in Content Services.
## Methods
`getDocumentThumbnailUrl(nodeId: any, attachment?: boolean, ticket?: string): string`<br/>
Gets a thumbnail URL for a node.
`getContentUrl(nodeId: any, attachment?: boolean, ticket?: string): string`<br/>
Gets the URL for a node's content.
`getNodeContent(nodeId: string): Observable<any>`<br/>
Gets a node's content.
`createFolder(relativePath: string, name: string, parentId?: string): Observable<FolderCreatedEvent>`<br/>
Creates a folder.
`hasPermission(node: any, permission: PermissionsEnum|string): boolean`<br/>
Checks if the user has the specified permissions for `node`.
`hasAllowableOperations(node: any): boolean `<br/>
Checks if the the node has the `allowableOperations` property.
## Details
The methods that take a `node` parameter can receive the node as either a node ID string
or as a [MinimalNode](../content-services/document-library.model.md) object. You can obtain the `ticket` string,
if you need it, from the [Authentication service](authentication.service.md). If
`attachment` is false then the content can be viewed in the browser but not downloaded; the
default value of true allows a download to take place.
The `createFolder` method adds a folder with a given `name` within the folder at `parentId`,
if supplied. You can use the well-known names "-my-" , "-shared-" or "-root-" as the `parentId`.
The `relativePath` will create a sequence of folders within `parentId` with `name` as the last
element but you can use an empty string to make the folder a direct child of `parentId`.
The `hasPermission` method reports whether the node has the specified permission. (The
[Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/models/permissions.enum.ts)
enum contains the values `DELETE`, `UPDATE`, `CREATE`, `UPDATEPERMISSIONS`, `NOT_DELETE`,
`NOT_UPDATE`, `NOT_CREATE` and `NOT_UPDATEPERMISSIONS`.
See the
[Alfresco JS API](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api)
for more information about the low-level REST API that these methods are based on.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
<!-- seealso end -->

97
docs/core/authentication.service.md Normal file
View File

@@ -0,0 +1,97 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-03-13
---
# Authentication Service
Provides authentication to ACS and APS.
## Methods
- `isLoggedIn(): boolean`
Checks if the user logged in.
- `login(username: string, password: string, rememberMe: boolean = false): Observable<{ type: string; ticket: any; }>`
Logs the user in.
- `username` - Username for the login
- `password` - Password for the login
- `rememberMe` - Stores the user's login details if true
- `isRememberMeSet(): boolean`
Checks whether the "remember me" cookie was set or not.
- `logout(): any`
Logs the user out.
- `removeTicket()`
Removes the login ticket from Storage.
- `getTicketEcm(): string`
Gets the ECM ticket stored in the Storage.
- `getTicketBpm(): string`
Gets the BPM ticket stored in the Storage.
- `getTicketEcmBase64(): string`
Gets the BPM ticket from the Storage in Base 64 format.
- `saveTickets()`
Saves the ECM and BPM ticket in the Storage.
- `saveTicketEcm()`
Saves the ECM ticket in the Storage.
- `saveTicketBpm()`
Saves the BPM ticket in the Storage.
- `saveTicketAuth()`
Saves the AUTH ticket in the Storage.
- `isEcmLoggedIn(): boolean`
Checks if the user is logged in on an ECM provider.
- `isBpmLoggedIn(): boolean`
Checks if the user is logged in on a BPM provider.
- `getEcmUsername(): string`
Gets the ECM username.
- `getBpmUsername(): string`
Gets the BPM username
- `setRedirectUrl(url: RedirectionModel)`
Sets the URL to redirect to after login.
- `url` - URL to redirect to
- `getRedirectUrl(provider: string): string`
Gets the URL to redirect to after login.
- `provider` - Service provider. Can be "ECM", "BPM" or "ALL".
- `handleError(error: any): Observable<any>`
Prints an error message in the console browser
- `error` - Error message
## Details
### Usage example
```ts
import { AuthenticationService } from '@alfresco/adf-core';
@Component({...})
export class AppComponent {
constructor(authService: AuthenticationService) {
this.AuthenticationService.login('admin', 'admin').subscribe(
token => {
console.log(token);
},
error => {
console.log(error);
}
);
}
}
```
## See also
- [Login component](login.component.md)

63
docs/core/boilerplate.component.md Normal file
View File

@@ -0,0 +1,63 @@
# Boilerplate component
Shows how to write a Markdown file for a component.
![Screenshot goes here if necessary](../docassets/images/adf-toolbar-01.png)
<!-- Most doc files don't need a table of contents. Delete this part unless
you have added about five subsections in the Details part.
-->
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
<!-- Delete any Basic Usage parts that you don't need (eg, some components don't
have any properties). -->
```html
<adf-document-list
#documentList
[currentFolderId]="'-my-'"
[contextMenuActions]="true"
[contentActions]="true">
</adf-document-list>
```
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| prop1 | string | 'hello' | The property description in the table should be no more than a few sentences. Add extra description in the Details section if you need to. |
| prop2 | boolean | true | Prop tables should have name, type, default and description, in that order. Leave default value blank if appropriate. |
### Events
| Name | Description |
| --- | --- |
| someEvent | Keep description short for the table. Usually starts with "Emitted when..." |
| anotherEvent | Emitted when the user double-clicks a list node |
## Details
**Note: This is not a real component!**
Copy the contents of this file when you create a new component doc and edit or remove bits of it
as necessary. Usually, the title should be derived from the Angular name with the kebab-case expanded
(so "task-details.component" becomes "Task Details component") but there is no need to stick to this
if it looks wrong to you.
### Subsection
You don't need to make subsections in the Details part but add them if they help with the
explanation. Add them as level 3 headings in the Details part only - to keep the consistency
of the docs, you shouldn't normally add any new level 1 or 2 sections to the Markdown.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
<!-- seealso end -->

42
docs/core/boilerplate.service.md Normal file
View File

@@ -0,0 +1,42 @@
# Boilerplate service
Shows how to write a Markdown file for a service.
## Methods
`someMethod(value: string = '')`<br/>
Shows how to document a method.
`anotherMethod(value: string = '')`<br/>
Shows how to document a method.
## Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| prop1 | string | 'hello' | Many services don't need a properties table. Delete this section if you don't need it. |
| prop2 | boolean | true | Prop tables should have name, type, default and description, in that order. Leave default blank if appropriate. |
## Details
**Note: This is not a real component!**
Copy the contents of this file when you create a new service doc and edit or remove bits of it
as necessary. Usually, the title should be derived from the Angular name with the kebab-case expanded
(so "page-title.service" becomes "Page Title service") but there is no need to stick to this
if it looks wrong to you.
The main difference between service and component docs is that services usually have methods. Replace
the method signature and description with your own text but keep the &lt;br&gt; at the end of the
signature line.
### Subsection
You don't need to make subsections in the Details part but add them if they help with the
explanation. Add them as level 3 headings in the Details part only - to keep the consistency
of the docs, you shouldn't normally add any new level 1 or 2 sections to the Markdown.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
<!-- seealso end -->

29
docs/core/content.widget.md Normal file
View File

@@ -0,0 +1,29 @@
---
Added: v2.0.0
Status: Active
---
# APS Content Component
Shows the content preview.
## Basic Usage
```html
<adf-content
[contentId]="'1001'">
</adf-content>
```
### Properties
The recommended set of properties can be found in the following table:
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| contentId | string | | The content id to show. |
### Events
| Name | Description |
| ---- | ----------- |
| contentClick | Invoked when the content is clicked. |

10
docs/core/data-column.component.md
View File

@@ -105,9 +105,9 @@ Every cell in the DataTable component is bound to the dynamic data context conta
| 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. |
| 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:
@@ -277,6 +277,6 @@ Now you can declare columns and assign `desktop-only` class where needed:
## See also
- [Document list component](../content-services/document-list.component.md)
- [Datatable component](../datatable.component.md)
- [Task list component](../task-list.component.md)
- [Datatable component](datatable.component.md)
- [Task list component](../process-services/task-list.component.md)
<!-- seealso end -->

155
docs/core/datatable-adapter.interface.md Normal file
View File

@@ -0,0 +1,155 @@
---
Added: v2.0.0
Status: Active
---
# DataTableAdapter interface
Defines how table data is supplied to [DataTable](datatable.component.md)
and [Tasklist](../process-services/task-list.component.md) components.
## Properties
| Name | Type | Description |
| --- | --- | --- |
| selectedRow | DataRow | The data for the currently selected row. |
## Methods
`getRows(): Array<DataRow>;`<br/>
`setRows(rows: Array<DataRow>): void;`<br/>
Get/set the values for display in the table using an array of rows.
`getColumns(): Array<DataColumn>;`<br/>
`setColumns(columns: Array<DataColumn>): void;`<br/>
Get/set an array of column specifications.
`getValue(row: DataRow, col: DataColumn): any;`<br/>
Get the data value from a specific table cell.
`getSorting(): DataSorting;`
`setSorting(sorting: DataSorting): void;`
Get/set the sorting key and direction (ascending or descending).
`sort(key?: string, direction?: string): void;`
Sort the table with a specified key and direction (ascending or descending).
## Details
You can implement DataTableAdapter in your own class to display your data with the [DataTable](datatable.component.md)
and [Tasklist](../process-services/task-list.component.md) components.
This interface (along with other interfaces for column and row data) hides the details of your class from the caller, so you can store your data internally however you like. The DataTable library implements the interface in the [ObjectDataTableAdapter](#objectdatatableadapter) class which is the standard adapter for the Datatable component.
The basic idea of DataTableAdapter is that the caller can request your class to return an array of column
definition objects. Each of these objects specifies the unique key, name, type and other properties of a single column.
The caller can also request the data values for the table as an array of row objects. The caller accesses the data from a row using a `getValue` method that returns the data from a specified column. This column is identified by the unique key that was set during the column definition.
The data-hiding works the other way around when the caller needs to set data in the DataTableAdapter class - the internal
details of the caller's storage are hidden by the column and row interfaces. When the `setColumns` and `setRows` methods are
called on the adapter, it can simply query the column/row objects it receives and then store the data in its own format.
### Columns and rows
Columns are defined by the DataColumn interface:
```ts
interface DataColumn {
key: string;
type: string;
format?: string;
sortable?: boolean;
title?: string;
srTitle?: string;
cssClass?: string;
template?: TemplateRef<any>;
formatTooltip?: Function;
}
```
An array of these objects is passed to your object when the `setColumns` method is called. The `key` property is used to identify columns and so each column's key should be unique. The `type` string can have a value of 'text', 'image' or 'date'.
An array of DataRow objects is passed to your object when the `setRows` method is called:
```ts
interface DataRow {
isSelected: boolean;
isDropTarget?: boolean;
cssClass?: string;
hasValue(key: string): boolean;
getValue(key: string): any;
}
```
Each row contains a set of values. An item in the set is retrieved by passing its key (specified in the column description) to the `getValue` method. As a result, the row does not need to store its data items in any particular order or format as long as it can retrieve the right item using its key.
### ObjectDataTableAdapter
The DataTable library provides a implementation of DataTableAdapter, called
[ObjectDataTableAdapter](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts). This is a simple adapter that binds to object arrays and turns object fields into columns:
```ts
let data = new ObjectDataTableAdapter(
// Row data
[
{ id: 1, name: 'Name 1' },
{ id: 2, name: 'Name 2' }
],
// Column schema
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: true
}
]
);
```
![DataTable demo](../docassets/images/datatable-demo.png)
If you don't specify the column array then the constructor will infer the layout of the columns from
the structure of the row objects. The field names ('id' and 'name' in the example below) will be used
for both the `key` and `title` properties of the columns:
```ts
let data = [
{ id: 2, name: 'abs' },
{ id: 1, name: 'xyz' }
];
let schema = ObjectDataTableAdapter.generateSchema(data);
/*Auto generated column schema:
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: false
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: false
}
]
*/
```
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Datatable component](datatable.component.md)
- [Task list component](../process-services/task-list.component.md)
<!-- seealso end -->

487
docs/core/datatable.component.md Normal file
View File

@@ -0,0 +1,487 @@
---
Added: v2.0.0
Status: Active
---
# DataTable component
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)
- [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)
- [Custom Empty content template](#custom-empty-content-template)
- [Loading content template](#loading-content-template)
- [Events](#events-1)
- [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
}
]
);
}
}
```
You can also use HTML-based schema declaration like shown below:
```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>
```
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{
id: 1,
name: 'Name 1',
createdBy : { name: 'user'},
createdOn: 123,
icon: 'http://example.com/img.png'
},
{
id: 2,
name: 'Name 2',
createdBy : { name: 'user 2'},
createdOn: 123,
icon: 'http://example.com/img.png'
}
]
);
}
}
```
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| 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. |
| 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 |
| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
| rows | Object\[] | \[] | The rows that the datatable should show |
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| actions | boolean | false | Toggles data actions column |
| actionsPosition | string (left\|right) | right | Position of the actions dropdown menu. |
| fallbackThumbnail | string | | Fallback image for row where thumbnail is missing |
| contextMenu | boolean | false | Toggles custom context menu for the component |
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template |
| showHeader | boolean | true | Toggles header visibility |
| display | string | 'list' | change the display mode can be one of the values provided by the enum : **list**, **gallery** |
| selection | DataRow\[] | \[] | Contains selected rows |
### Events
| Name | Description |
| ---- | ----------- |
| [rowClick](#rowclick-event) | Emitted when user clicks the row |
| [rowDblClick](#rowdblclick-event) | Emitted when user double-clicks the row |
| [showRowContextMenu](#showrowcontextmenu-event) | Emitted before context menu is displayed for a row |
| [showRowActionsMenu](#showrowactionsmenu-event) | Emitted before actions menu is displayed for a row |
| [executeRowAction](#executerowaction-event) | Emitted when row action is executed by user |
## Details
### Supplying data for the table
The column layout and row data are supplied to the table using an object that implements the
DataTableAdapter 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 that is useful for many
common uses. See the [DataTableAdapter](datatable-adapter.interface.md) for full details about the interface and
the ObjectDataTableAdapter class.
### Customizing columns
You can define custom HTML templates for columns and also add tooltips, automatic column title translation and other features. See the DataColumn component page for more information.
### DataTable DOM Events
Below are the DOM events raised by 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
If you want to enable the card view mode you need to set to 'gallery' the input parameter [display] :
```html
<adf-datatable
[data]="data"
[display]="'gallery'">
</adf-datatable
```
![card-view](../docassets/images/document-list-card-view.png)
### Custom Empty content template
You can add a template that will be shown when there are no results in your datatable:
```html
<adf-datatable
[data]="data"
[actions]="contentActions"
[multiselect]="multiselect"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<no-content-template>
<!--Add your custom empty template here-->
<ng-template>
<h1>Sorry, no content</h1>
</ng-template>
</no-content-template>
</adf-datatable>
```
You can use the empty list component if you want to show the default ADF empty template.
You can use any HTML layout or Angular component as a content of the empty template section by using the special `<adf-empty-list-header>, <adf-empty-list-body>, <adf-empty-list-footer>` elements:
```html
<adf-datatable
[data]="data"
[actions]="contentActions"
[multiselect]="multiselect"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<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>
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| emptyListImageUrl | String | empty_doc_lib.svg | The default image used as background |
| emptyMsg | String | This list is empty | The default title message |
| dragDropMsg | String | Drag and drop | The default drag and drop message |
| additionalMsg | String | Drag and drop | The default additional message |
![](../docassets/images/adf-empty-list.png)
### Loading content template
You can add a template that will be shown during the loading of your data:
```html
<adf-datatable
[data]="data"
[actions]="contentActions"
[multiselect]="multiselect"
[loading]=isLoading()"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<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>
</loading-content-template>
</adf-datatable>
```
```js
isLoading(): boolean {
//your custom logic to identify if you are in a loading state
}
```
Note: the `<loading-content-template>` and `<no-content-template>` can be used together
### Events
#### row-keyup DOM event
Raised on the 'keyup' event for the focused row.
This is an instance of the `CustomEvent` with the `details` property containing the following object:
```ts
row: DataRow,
keyboardEvent: KeyboardEvent,
sender: any
```
#### rowClick event
Emitted when 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 default behaviour.
#### rowDblClick event
Emitted when 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 default behaviour.
#### showRowContextMenu event
Emitted before context menu is displayed for a row.
Note that DataTable itself does not populate context menu items,
you can provide all necessary content via 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 default behaviour.
DataTable will automatically render provided menu items.
See the [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core)
documentation for more details on context actions format and behaviour.
#### showRowActionsMenu event
Emitted before actions menu is displayed for a row.
Requires `actions` property to be set to `true`.
Event properties:
```ts
value: {
row: DataRow,
action: any
}
```
Note that DataTable itself does not populate action menu items,
you can provide all necessary content via handler.
This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour.
#### executeRowAction event
Emitted when a row action is executed by the user.
Usually accompanies `showRowActionsMenu` event.
DataTable itself does not execute actions but provides support for external
integration. If there were actions provided with `showRowActionsMenu` event
then `executeRowAction` will be automatically executed when user clicks
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)
Developers are allowed to use any payloads as row actions.
The only requirement for the objects is having `title` property.
Once corresponding action is clicked in the dropdown menu DataTable invokes `executeRowAction` event
where you can handle the process, inspect the action payload and all custom properties defined earlier,
and do corresponding actions.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Data column component](data-column.component.md)
- [Pagination component](pagination.component.md)
- [DataTableAdapter](datatable-adapter.interface.md)
- [Document list component](../content-services/document-list.component.md)
<!-- seealso end -->

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

@@ -0,0 +1,26 @@
---
Added: v2.0.0
Status: Active
---
# Favorites Api service
Gets a list of items a user has marked as their favorites.
## Methods
`getFavorites(personId: string, options?: any): Observable<NodePaging>`<br/>
Gets the favorites for a user.
## Details
Process Services allows users to mark items as "favorites". These are typically
items that are important or frequently used.
Use `getFavorites` to find a user's favorite items. You could use this, for example,
to create a menu for the user to access their favorites quickly rather than by
navigating or searching. Using "-me-" for the `personId` indicates that the target
person is the currently logged-in user.
You can specify a number of `options` to modify the search further. See the
[Alfresco JS API page](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/FavoritesApi.md#getfavorites)
for `getFavorites` for more information.

2
docs/core/form-field.model.md
View File

@@ -64,7 +64,7 @@ example, the `currency` property holds the currency symbol to be displayed next
### Validation
A [Form](form.component.md) or [Task Details](../task-details.component.md) component can
A [Form](form.component.md) or [Task Details](../process-services/task-details.component.md) component can
be supplied with a set of validator objects. Each validator applies a particular kind of
check to a field. A number of `FormFieldModel` properties are used by validators. For
example, `minValue` and `maxValue` are used to check that a numeric value falls within an

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

@@ -0,0 +1,30 @@
---
Added: v2.0.0
Status: Active
---
# Host settings component
Validates the URLs for ACS and APS and saves them in the user's local storage
![Host settings](../docassets/images/host-settings-component.png)
## Basic Usage
```html
<adf-host-settings>
</adf-breadcrumb>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| providers | `string` | `'ALL'` | Determines which configurations are shown. Possible valid values are "ECM", "BPM" or "ALL". |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | `EventEmitter<string>` | Emitted when the URL is invalid. |
| ecmHostChange | `EventEmitter<string>` | Emitted when the ECM host url is changed. |
| bpmHostChange | `EventEmitter<string>` | Emitted when the BPM host url is changed. |

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

@@ -0,0 +1,65 @@
---
Added: v2.0.0
Status: Active
---
# Infinite Pagination component
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>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| pagination | `Pagination` | | Pagination object. |
| target | `PaginatedComponent` | | Component that provides custom pagination support. |
| pageSize | `number` | `InfinitePaginationComponent.DEFAULT_PAGE_SIZE` | Number of items that are added with each "load more" event. |
| isLoading | `boolean` | `false` | Is a new page loading? |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| loadMore | `EventEmitter<Pagination>` | Emitted when the "Load More" button is clicked. |
## Details
Pagination 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](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/Pagination.md)
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)

277
docs/core/login.component.md Normal file
View File

@@ -0,0 +1,277 @@
---
Added: v2.0.0
Status: Active
---
# Login component
Authenticates to Alfresco Content Services and Alfresco Process Services.
![Login component](../docassets/images/custom-footer.png)
## Contents
- [Basic usage](#basic-usage)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Handling events](#handling-events)
- [Change footer content](#change-footer-content)
- [Change header content](#change-header-content)
- [Extra content](#extra-content)
- [Custom logo and background](#custom-logo-and-background)
- [Customize Validation rules](#customize-validation-rules)
- [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
## Basic usage
```html
<adf-login
providers="ECM"
successRoute="/home">
</adf-login>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| showRememberMe | `boolean` | `true` | Should the `Remember me` checkbox be shown? |
| showLoginActions | `boolean` | `true` | Should the extra actions (`Need Help`, `Register`, etc) be shown? |
| 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. |
| logoImageUrl | `string` | `'./assets/images/alfresco-logo.svg'` | Path to a custom logo image. |
| backgroundImageUrl | `string` | `'./assets/images/background.svg'` | Path to a custom background image. |
| copyrightText | `string` | `'\u00A9 2016 Alfresco Software, Inc. All Rights Reserved.'` | The copyright text below the login box. |
| providers | `string` | | Possible valid values are ECM, BPM or ALL. By default, this component will log in only to ECM. If you want to log in in both systems then use ALL. There is also a way to call your Auth token API using the string "OAUTH" (supported only for BPM) |
| fieldsValidation | `any` | | Custom validation rules for the login form. |
| disableCsrf | `boolean` | | Prevents the CSRF Token from being submitted. Only valid for Alfresco Process Services. |
| successRoute | `string` | `null` | Route to redirect to on successful login. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| success | `EventEmitter<LoginSuccessEvent>` | Emitted when the login is successful. |
| error | `EventEmitter<LoginErrorEvent>` | Emitted when the login fails. |
| executeSubmit | `EventEmitter<LoginSubmitEvent>` | Emitted when the login form is submitted. |
## Details
### Handling events
**app.component.html**
```html
<adf-login
providers="ALL"
(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);
}
}
```
### Change footer content
![Login with custom footer](../docassets/images/custom-footer.png)
You can replace the entire content in the footer of the login component with your custom content.
```html
<adf-login ...>
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer>
</adf-login>`
```
### Change header content
![Login with custom header](../docassets/images/custom-header.png)
You can replace the entire content in the header of the login component with your custom content.
```html
<adf-login ...>
<login-header><ng-template>My custom HTML for the header</ng-template></login-header>
</adf-login>`
```
### Extra content
You can put additional html content between `alfresco-login` tags to get it rendered as part of the login dialog.
This becomes handy in case you need to extend it with custom input fields handled by your application or parent component:
```html
<adf-login ...>
<div>
<div>Your extra content</div>
</div>
</adf-login>
```
Here's an example of custom content:
![Login with custom content](../docassets/images/login-extra-content.png)
### Custom logo and background
It is possible changing logo and background images to custom values.
```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>
```
Should give you something like the following:
![Login with custom logo and background](../docassets/images/custom-login.png)
Alternatively you can bind to your component properties and provide values dynamically if needed:
```html
<adf-login
[backgroundImageUrl]="myCustomBackground"
[logoImageUrl]="myCustomLogo">
</adf-login>
```
### Customize Validation rules
If needed it is possible to customise the validation rules of the login
form. You can add/modify the default rules of the login form.
**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
If needed it is possible to call an external provider to identify the 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
If absolutely needed it is possible taking full control over form
submit execution by means of `executeSubmit` event.
This event is fired on form submit.
You can prevent default behaviour by calling `event.preventDefault()`.
This allows for example having custom form validation scenarios and/or additional validation summary presentation.
Alternatively you may want just running additional code without suppressing default one.
**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();
}
}
}
```
**Please note that if `event.preventDefault()` is not called then default behaviour
will also be executed after your custom code.**
## See Also
- [Logout directive](logout.directive.md)

17
docs/core/logout.directive.md Normal file
View File

@@ -0,0 +1,17 @@
---
Added: v2.0.0
Status: Active
---
# Logout directive
Logs the user out when the decorated element is clicked.
## Basic Usage
```html
<button adf-logout>Logout</button>
```
## See also
- [Login component](login.component.md)

2
docs/core/nodes-api.service.md
View File

@@ -57,7 +57,7 @@ The Nodes Api Service has methods for getting information about nodes and
managing them within the repository (creating, deleting, etc).
Other lower level interfaces to the ACS nodes API are also available - see the
[Alfresco Api service](../alfresco-api.service.md), the
[Alfresco Api service](alfresco-api.service.md), the
[Alfresco JS API docs](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-core-rest-api)
and the
[REST API Explorer](https://api-explorer.alfresco.com/api-explorer/#/nodes)

81
docs/core/pagination.component.md Normal file
View File

@@ -0,0 +1,81 @@
---
Added: v2.0.0
Status: Active
---
# Pagination Component
Adds pagination to the component it is used with.
![](../docassets/images/basic.png)
## 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>
```
## Integrating with Document List
```html
<adf-document-list #documentList ...></adf-document-list>
<adf-pagination [target]="documentList" ...>
</adf-pagination>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| target | `PaginatedComponent` | | Component that provides custom pagination support. |
| supportedPageSizes | `number[]` | `[5, 25, 50, 100]` | An array of page sizes. |
| pagination | `Pagination` | | Pagination object. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| change | `EventEmitter<PaginationQueryParams>` | Emitted when paginaton changes in any way. |
| changePageNumber | `EventEmitter<Pagination>` | Emitted when the page number changes. |
| changePageSize | `EventEmitter<Pagination>` | Emitted when the page size changes. |
| nextPage | `EventEmitter<Pagination>` | Emitted when the next page is requested. |
| prevPage | `EventEmitter<Pagination>` | Emitted when the previous page is requested. |
## Details
The pagination object is a generic component to paginate component. The Alfresco API are paginated and return a Pagination object. You can use the pagination object to feed the pagination component and then listen to the event which returns the current pagination and query again the API with the options chosen by the user.
Each event helps to detect the certain action that user have made using the component.
For `change` event, a [PaginationQueryParams](https://github.com/Alfresco/alfresco-ng2-components/blob/development/ng2-components/ng2-alfresco-core/src/components/pagination/pagination-query-params.interface.ts) (including the query parameters supported by the REST API, `skipCount` and `maxItems`) is returned.
For all events other than `change`, a new Pagination object is returned as in the following example, with updated properties to be used to query further.
### Custom pagination
The component also provides light integration with external implementations of the pagination.
Any component can implement the `PaginatedComponent` and be used as a value for the `target` property.
```js
export interface PaginatedComponent {
pagination: Subject<Pagination>;
updatePagination(params: PaginationQueryParams);
}
```
Your component needs to provide a `pagination` subject to allow Pagination component to reflect to changes.
Every time user interacts with the Pagination, it will call the `updatePagination` method and pass the parameters.
## See also
- [Infinite Pagination component](infinite-pagination.component.md)

14
docs/core/search-api.service.md Normal file
View File

@@ -0,0 +1,14 @@
# Search Api service
Accesses the Content Services Search API.
## Methods
`search(query: any): Observable<NodePaging>`<br/>
Searches the repository.
## Details
See the
[Alfresco JS API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-search-rest-api/docs/SearchApi.md#search)
for the format of the query and returned data.

49
docs/core/site.model.md Normal file
View File

@@ -0,0 +1,49 @@
---
Added: v2.0.0
Status: Active
---
# Site model
Provides information about a site in a Content Services repository.
## Details
`SiteModel` is returned by methods from the [Sites Api service](sites.service.md).
Also, the
[`getSite`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitesApi.md#getSite)
and
[`getSites`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitesApi.md#getSites) pages in the Alfresco JS API docs have further information about this API.
```ts
class SiteModel {
role: string;
visibility: string;
guid: string;
description: string;
id: string;
preset: string;
title: string;
contents: SiteContentsModel[] = [];
members: SiteMembersModel[] = [];
pagination: Pagination;
}
class SiteContentsModel {
id: string;
folderId: string;
}
class SiteMembersModel {
role: string;
firstName: string;
emailNotificationsEnabled: boolean = false;
company: any;
id: string;
enable: boolean = false;
email: string;
}
```
## See also
- [Sites service](sites.service.md)

4
docs/core/sites.service.md
View File

@@ -30,7 +30,7 @@ Accesses and manipulates sites from a Content Services repository.
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).
[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
@@ -49,4 +49,4 @@ for more information about the available options.
## See also
- [Site model](../site.model.md)
- [Site model](site.model.md)

2
docs/core/start-form.component.md
View File

@@ -62,7 +62,7 @@ Displays the Start Form for a process.
## Details
The [Start Process component](../start-process.component.md) uses the Start Form component
The [Start Process component](../process-services/start-process.component.md) uses the Start Form component
to display the
[start form](http://docs.alfresco.com/process-services1.6/topics/none_start_event.html)
for the process.

152
docs/core/translation.service.md Normal file
View File

@@ -0,0 +1,152 @@
---
Added: v2.0.0
Status: Active
---
# Translation service
Supports localisation.
## Methods
- `addTranslationFolder(name: string = '', path: string = '')`
Adds a new folder of translation source files.
- `name` - Name for the translation provider
- `path` - Path to the folder
- `use(lang: string): Observable<any>`
Sets the target language for translations.
- `lang` - Code name for the language
- `get(key: string|Array<string>, interpolateParams?: Object): Observable<any>`
Gets the translation for the supplied key.
- `key` - Key to translate
- `interpolateParams` - (Optional) String(s) to be interpolated into the main message
- `instant(key: string | Array<string>, interpolateParams?: Object): any`
Directly returns the translation for the supplied key.
- `key` - Key to translate
- `interpolateParams` - (Optional) String(s) to be interpolated into the main message
## Details
In the `get` and `instant` methods, the `interpolateParams` parameter supplies
interpolation strings for keys that include them. For example, in the standard
`en.json`, the `CORE.PAGINATION.ITEMS_RANGE` key is defined as:
"Showing {{ range }} of {{ total }}"
The `range` and `total` interpolations are supplied to the `get` method using
an object with fields of the same name:
```ts
this.trans.get(
"CORE.PAGINATION.ITEMS_RANGE",
{
range: "1..10",
total: "122"
}
).subscribe(translation => {
this.translatedText = translation;
});
```
### Registering translation sources
To supply your own set of translation source files, you
first need to create a subfolder for them within your application's
`assets` folder. The folder can have any name you like but it must also have
a sub-folder called `i18n` where the translation lists will be stored. So, the
general format of the path to this folder will be:
`<app>/src/assets/my-translations/i18n`
If you wanted English and French translations then you would copy the built-in
`en.json` and `fr.json` files into the `i18n` folder and add your new keys:
// en.json
...
"WELCOME_MESSAGE": "Welcome!"
...
// fr.json
...
"WELCOME_MESSAGE": "Bienvenue !"
...
To enable the new translations in your app, you also need to register them in your
`app.module.ts` file. Import `TRANSLATION_PROVIDER` and add the path of your
translations folder to the `providers`:
```ts
// Other imports...
import { TRANSLATION_PROVIDER } from "@alfresco/adf-core";
...
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [
{
provide: TRANSLATION_PROVIDER,
multi: true,
useValue: {
name: 'my-translations',
source: 'assets/my-translations'
}
}
...
```
You can now use your new keys in your component:
```ts
...
ngOnInit() {
this.trans.use("fr");
this.trans.get("WELCOME_MESSAGE").subscribe(translation => {
this.translatedText = translation;
});
}
...
```
The new translation files completely replace the built-in ones.
If you want to continue using the built-in keys then you must add your new
keys to copies of the existing files.
Note: the `source` property points to the web application root. Ensure you have
webpack correctly set up to copy all the i18n files at compile time.
```text
index.html
assets/ng2-alfresco-core/i18n/en.json
...
```
You can register as many entries as you like.
### Switching languages
Depending on your application, you may want to have buttons or dropdown menus to allow language selection for the end users.
You can use `TranslationService` to switch languages from your code based on input events of your choice:
```ts
class MyComponent {
constructor(private translateService: TranslationService) {
}
onLanguageClicked(lang: string) {
this.translateService.use(lang || 'en');
}
}
```
## See Also
- [Internationalization](../internationalization.md)

74
docs/core/upload.service.md Normal file
View File

@@ -0,0 +1,74 @@
---
Added: v2.0.0
Status: Active
---
# Upload Service
Provides access to various APIs related to file upload features.
## Methods
- `isUploading(): boolean`
Checks whether the service is uploading a file.
- `getQueue(): FileModel[]`
Returns the file Queue
- `addToQueue(files: FileModel[]): FileModel[]`
Adds files to the uploading queue to be uploaded
- `files` - One or more separate parameters or an array of files to queue
- `uploadFilesInTheQueue(emitter: EventEmitter<any>)`
Finds all the files in the queue that are not yet uploaded and uploads them into the directory folder.
- `emitter` - (Deprecated) Emitter to invoke on file status change
- `cancelUpload(files: FileModel[])`
Cancels uploading of files.
- `files` - One or more separate parameters or an array of files
- `clearQueue()`
Clears the upload queue
- `getUploadPromise(file: FileModel): any`
Gets an upload promise for a file.
- `file` - The target file
## Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| queueChanged | FileModel\[] | Raised every time the file queue changes. |
| fileUpload | FileUploadEvent | Raised every time a File model changes its state. |
| fileUploadStarting | FileUploadEvent | Raised when upload starts. |
| fileUploadCancelled | FileUploadEvent | Raised when upload gets cancelled by user. |
| fileUploadProgress | FileUploadEvent | Raised during file upload process and contains the current progress for the particular File model. |
| fileUploadAborted | FileUploadEvent | Raised when file upload gets aborted by the server. |
| fileUploadError | FileUploadEvent | Raised when an error occurs to file upload. |
| fileUploadComplete | FileUploadCompleteEvent | Raised when file upload is complete. |
| fileUploadDelete | FileUploadDeleteEvent | Raised when uploaded file is removed from server. |
| fileDeleted | string | This can be invoked when a file is deleted from an external source to upload the file dialog status. |
## Details
### Ignore list configuration
Is possible add an ignore list for files that you don't want to allow upload on your CS.
The configuration of this service is saved in the **_app.config.json file_**.If you want more details about the configuration service follow this [link](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-core#appconfigservice).
In the example below you can see how filtered out the : '.git', '.DS_Store' and 'desktop.ini'. **Every element is a glob pattern string.** So, if you want to exclude all the txt files, you can add the "\*.txt". (notice the asterisk at the beginning of the pattern!)
**app.config.json**
```json
{
"ecmHost": "http://localhost:3000/ecm",
"bpmHost": "http://localhost:3000/bpm",
"application": {
"name": "Alfresco"
},
"files": {
"excluded": [".DS_Store", "desktop.ini", ".git", "*.txt"]
}
}
```
Note:
- Standard glob patterns work.
- You can end patterns with a forward slash / to specify a directory.

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

@@ -0,0 +1,29 @@
---
Added: v2.0.0
Status: Active
---
# User Info component
Shows user information.
## Basic usage
```html
<adf-userinfo></adf-userinfo>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| ecmBackgroundImage | `string` | `'./assets/images/ecm-background.png'` | Custom path for the background banner image for ACS users. |
| bpmBackgroundImage | `string` | `'./assets/images/bpm-background.png'` | Custom path for the background banner image for APS 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`. |
| showName | `boolean` | `true` | Shows/hides the username next to the user info button. |
| namePosition | `string` | `'right'` | When the username is shown, this defines its position relative to the user info button. Can be `right` or `left`. |
## Details
This will show a round icon with user and on click some user information.
If user is logged in with both ACS and APS, the ACS image will be shown.