mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1549] Added docs for Upload, Userinfo, Viewer and Webscript (#2359)
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
5cf61e319f
commit
a3020897ed
31
docIndex.md
31
docIndex.md
@@ -280,25 +280,25 @@ for more information about installing and using the source code.
|
||||
- [Create task attachment component](docs/create-task-attachment.component.md)
|
||||
- [People search component](docs/people-search.component.md)
|
||||
- [People component](docs/people.component.md)
|
||||
- [Start task component](docs/start-task.component.md)
|
||||
- [Task attachment list component](docs/task-attachment-list.component.md)
|
||||
- [Task audit directive](docs/task-audit.directive.md)
|
||||
- [Task details component](docs/task-details.component.md)
|
||||
- [Task filters component](docs/task-filters.component.md)
|
||||
- [Task header component](docs/task-header.component.md)
|
||||
- [Tasklist component](docs/tasklist.component.md)
|
||||
- [Task details model](docs/task-details.model.md)
|
||||
|
||||
**Undocumented**
|
||||
|
||||
- [Comment list component](ng2-components/ng2-activiti-tasklist/src/components/comment-list.component.ts)
|
||||
- [No task detail template directive](ng2-components/ng2-activiti-tasklist/src/components/no-task-detail-template.directive.ts)
|
||||
- [People list component](ng2-components/ng2-activiti-tasklist/src/components/people-list.component.ts)
|
||||
- [Start task component](ng2-components/ng2-activiti-tasklist/src/components/start-task.component.ts)
|
||||
- [Comment model](ng2-components/ng2-activiti-tasklist/src/models/comment.model.ts)
|
||||
- [Filter model](ng2-components/ng2-activiti-tasklist/src/models/filter.model.ts)
|
||||
- [Form model](ng2-components/ng2-activiti-tasklist/src/models/form.model.ts)
|
||||
- [Icon model](ng2-components/ng2-activiti-tasklist/src/models/icon.model.ts)
|
||||
- [Start task model](ng2-components/ng2-activiti-tasklist/src/models/start-task.model.ts)
|
||||
- [Task details model](ng2-components/ng2-activiti-tasklist/src/models/task-details.model.ts)
|
||||
- [Task list model](ng2-components/ng2-activiti-tasklist/src/models/task-list.model.ts)
|
||||
- [User event model](ng2-components/ng2-activiti-tasklist/src/models/user-event.model.ts)
|
||||
- [User model](ng2-components/ng2-activiti-tasklist/src/models/user.model.ts)
|
||||
@@ -322,6 +322,8 @@ for more information about installing and using the source code.
|
||||
- [Context menu directive](docs/context-menu.directive.md)
|
||||
- [Data column component](docs/data-column.component.md)
|
||||
- [Pagination component](docs/pagination.component.md)
|
||||
- [Toolbar divider component](docs/toolbar-divider.component.md)
|
||||
- [Toolbar title component](docs/toolbar-title.component.md)
|
||||
- [Toolbar component](docs/toolbar.component.md)
|
||||
- [Card view component](docs/card-view.component.md)
|
||||
- [Node permission directive](docs/node-permission.directive.md)
|
||||
@@ -332,6 +334,7 @@ for more information about installing and using the source code.
|
||||
- [Notification service](docs/notification.service.md)
|
||||
- [Renditions service](docs/renditions.service.md)
|
||||
- [Translation service](docs/translation.service.md)
|
||||
- [Upload service](docs/upload.service.md)
|
||||
- [User preferences service](docs/user-preferences.service.md)
|
||||
|
||||
**Undocumented**
|
||||
@@ -345,8 +348,6 @@ for more information about installing and using the source code.
|
||||
- [Mdl menu directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-menu.directive.ts)
|
||||
- [Mdl textfield directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-textfield.directive.ts)
|
||||
- [Mdl upgrade element directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-upgrade-element.directive.ts)
|
||||
- [Toolbar divider component](ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-divider.component.ts)
|
||||
- [Toolbar title component](ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-title.component.ts)
|
||||
- [Card view content proxy directive](ng2-components/ng2-alfresco-core/src/components/view/card-view-content-proxy.directive.ts)
|
||||
- [Card view dateitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.ts)
|
||||
- [Card view item dispatcher component](ng2-components/ng2-alfresco-core/src/components/view/card-view-item-dispatcher.component.ts)
|
||||
@@ -383,7 +384,6 @@ for more information about installing and using the source code.
|
||||
- [Storage service](ng2-components/ng2-alfresco-core/src/services/storage.service.ts)
|
||||
- [Thumbnail service](ng2-components/ng2-alfresco-core/src/services/thumbnail.service.ts)
|
||||
- [Translate loader service](ng2-components/ng2-alfresco-core/src/services/translate-loader.service.ts)
|
||||
- [Upload service](ng2-components/ng2-alfresco-core/src/services/upload.service.ts)
|
||||
<!-- ng2-alfresco-core end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
@@ -530,13 +530,12 @@ Contains components for uploading files to Content Services. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-upload/README.md)
|
||||
for more information about installing and using the source code.
|
||||
|
||||
<!-- xxxng2-alfresco-upload start -->
|
||||
<!-- ng2-alfresco-upload start -->
|
||||
**Documented**
|
||||
|
||||
- [Upload button component](ng2-components/ng2-alfresco-upload/README.md)
|
||||
- [Upload drag area component](ng2-components/ng2-alfresco-upload/README.md)
|
||||
- [File uploading dialog component](ng2-components/ng2-alfresco-upload/README.md)
|
||||
- [Upload service](ng2-components/ng2-alfresco-upload/README.md)
|
||||
- [File uploading dialog component](docs/file-uploading-dialog.component.md)
|
||||
- [Upload button component](docs/upload-button.component.md)
|
||||
- [Upload drag area component](docs/upload-drag-area.component.md)
|
||||
|
||||
**Undocumented**
|
||||
|
||||
@@ -554,10 +553,10 @@ Contains the User Info component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-userinfo/README.md)
|
||||
for more information about installing and using the source code.
|
||||
|
||||
<!-- xxxng2-alfresco-userinfo start -->
|
||||
<!-- ng2-alfresco-userinfo start -->
|
||||
**Documented**
|
||||
|
||||
- [User info component](ng2-components/ng2-alfresco-userinfo/README.md)
|
||||
- [User info component](docs/user-info.component.md)
|
||||
|
||||
**Undocumented**
|
||||
|
||||
@@ -576,10 +575,10 @@ Contains the Viewer component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-viewer/README.md)
|
||||
for more information about installing and using the source code.
|
||||
|
||||
<!-- xxxng2-alfresco-viewer start -->
|
||||
<!-- ng2-alfresco-viewer start -->
|
||||
**Documented**
|
||||
|
||||
- [Viewer component](ng2-components/ng2-alfresco-viewer/README.md)
|
||||
- [Viewer component](docs/viewer.component.md)
|
||||
|
||||
**Undocumented**
|
||||
|
||||
@@ -602,8 +601,8 @@ Contains the Webscript component. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-webscript/README.md)
|
||||
for more information about installing and using the source code.
|
||||
|
||||
<!-- xxxng2-alfresco-webscript start -->
|
||||
<!-- ng2-alfresco-webscript start -->
|
||||
**Documented**
|
||||
|
||||
- [Webscript component](ng2-components/ng2-alfresco-webscript/README.md)
|
||||
- [Webscript component](docs/webscript.component.md)
|
||||
<!-- ng2-alfresco-webscript end -->
|
||||
BIN
docassets/images/HTML.png
Normal file
BIN
docassets/images/HTML.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
docassets/images/adf-start-task.png
Normal file
BIN
docassets/images/adf-start-task.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docassets/images/datatable.png
Normal file
BIN
docassets/images/datatable.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
docassets/images/renditions.png
Normal file
BIN
docassets/images/renditions.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
docassets/images/upload-disable-button.png
Normal file
BIN
docassets/images/upload-disable-button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
docassets/images/upload-notification-message.png
Normal file
BIN
docassets/images/upload-notification-message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
31
docs/file-uploading-dialog.component.md
Normal file
31
docs/file-uploading-dialog.component.md
Normal file
@@ -0,0 +1,31 @@
|
||||
# File Uploading Dialog Component
|
||||
|
||||
Shows a dialog listing all the files uploaded with the Upload Button or Drag Area components.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
- [Details](#details)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<file-uploading-dialog></file-uploading-dialog>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| position | string | 'right' | Dialog position. Accepted values are 'left' or 'right' |
|
||||
|
||||
## Details
|
||||
|
||||
This component should be used in combination with upload button or drag-and-drop area.
|
||||
39
docs/start-task.component.md
Normal file
39
docs/start-task.component.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# Start Task Component
|
||||
|
||||
Creates/Starts new task for the specified app
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-start-task
|
||||
[appId]="YOUR_APP_ID">
|
||||
</adf-start-task>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| appId | string | (**required**): The id of the app. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| success | Raised when the task is successfully created |
|
||||
| cancel | Raised when the cancel button is pressed by the user |
|
||||
| error | Raised if there is an error during task creation |
|
||||
11
docs/task-details.model.md
Normal file
11
docs/task-details.model.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# TaskDetailsModel
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "string",
|
||||
"assignee": "User",
|
||||
"dueDate": "data",
|
||||
"endDate": "string",
|
||||
"description": "string"
|
||||
}
|
||||
```
|
||||
24
docs/toolbar-divider.component.md
Normal file
24
docs/toolbar-divider.component.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# Toolbar Divider Component
|
||||
|
||||
Divides groups of elements in a Toolbar with a visual separator.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-toolbar>
|
||||
<button></button>
|
||||
<button></button>
|
||||
<adf-toolbar-divider></adf-toolbar-divider>
|
||||
<button></button>
|
||||
</adf-toolbar>
|
||||
```
|
||||
31
docs/toolbar-title.component.md
Normal file
31
docs/toolbar-title.component.md
Normal file
@@ -0,0 +1,31 @@
|
||||
# Toolbar Title Component
|
||||
|
||||
Supplies custom HTML to be included in a Toolbar component title.
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Details](#details)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## 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.
|
||||
96
docs/upload-button.component.md
Normal file
96
docs/upload-button.component.md
Normal file
@@ -0,0 +1,96 @@
|
||||
# Upload Button Component
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
- [Details](#details)
|
||||
* [How to show notification message with no permission](#how-to-show-notification-message-with-no-permission)
|
||||
* [How to disable the button when the delete permission is missing](#how-to-disable-the-button-when-the-delete-permission-is-missing)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-upload-button
|
||||
[parentId]="-my-"
|
||||
[uploadFolders]="true"
|
||||
[multipleFiles]="false"
|
||||
[acceptedFilesType]=".jpg,.gif,.png,.svg"
|
||||
[versioning]="false"
|
||||
(onSuccess)="customMethod($event)">
|
||||
</adf-upload-button>
|
||||
<file-uploading-dialog></file-uploading-dialog>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| disabled | boolean | false | Toggle component disabled state if there is no node permission checking |
|
||||
| **(deprecated)** showNotificationBar | boolean | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** |
|
||||
| uploadFolders | boolean | false | Allow/disallow upload folders (only for Chrome) |
|
||||
| multipleFiles | boolean | false | Allow/disallow multiple files |
|
||||
| acceptedFilesType | string | * | array of allowed file extensions , example: ".jpg,.gif,.png,.svg" |
|
||||
| **(deprecated)** currentFolderPath | string | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
|
||||
| **(deprecated)** rootFolderId | string | '-root-' | The ID of the root folder node. **Deprecated in 1.6.2: use parentId instead.** |
|
||||
| parentId | string | empty | The ID of the root. It can be the nodeId if you are using the upload for the Content Service or taskId/processId for the Process Service. |
|
||||
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
|
||||
| staticTitle | string | (predefined) | define the text of the upload button |
|
||||
| **(deprecated)** disableWithNoPermission ***use node permission directive from core instead*** | boolean | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled |
|
||||
| tooltip | string | | Custom tooltip |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| onSuccess | Raised when the file is uploaded |
|
||||
|
||||
## Details
|
||||
|
||||
### How to show notification message with no permission
|
||||
|
||||
You can show a notification error when the user doesn't have the right permission to perform the action.
|
||||
The UploadButtonComponent provides the event permissionEvent that is raised when the delete permission is missing
|
||||
You can subscribe to this event from your component and use the NotificationService to show a message.
|
||||
|
||||
```html
|
||||
<adf-upload-button
|
||||
[rootFolderId]="currentFolderId"
|
||||
(permissionEvent)="onUploadPermissionFailed($event)">
|
||||
</adf-upload-button>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class MyComponent {
|
||||
|
||||
onUploadPermissionFailed(event: any) {
|
||||
this.notificationService.openSnackMessage(
|
||||
`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### How to disable the button when the delete permission is missing
|
||||
|
||||
You can easily disable the button when the user doesn't have the permission to perform the action.
|
||||
The UploadButtonComponent provides the property disableWithNoPermission that can be true. In this way the button should be disabled if the delete permission is missing for the node.
|
||||
|
||||
```html
|
||||
<adf-upload-button
|
||||
[rootFolderId]="currentFolderId"
|
||||
[disableWithNoPermission]="true">
|
||||
</adf-upload-button>
|
||||
```
|
||||
|
||||
|
||||
53
docs/upload-drag-area.component.md
Normal file
53
docs/upload-drag-area.component.md
Normal file
@@ -0,0 +1,53 @@
|
||||
# Upload Drag Area Component
|
||||
|
||||
Adds a drag and drop area to upload files to Alfresco.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-upload-drag-area (onSuccess)="customMethod($event)">
|
||||
<div style="width: 200px; height: 100px; border: 1px solid #888888">
|
||||
DRAG HERE
|
||||
</div>
|
||||
</adf-upload-drag-area>
|
||||
<file-uploading-dialog></file-uploading-dialog>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class AppComponent {
|
||||
|
||||
public onSuccess(event: Object): void {
|
||||
console.log('File uploaded');
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| disabled | boolean | false | Toggle component disabled state |
|
||||
| **(deprecated)** enabled | boolean | true | Toggle component enabled state |
|
||||
| **(deprecated)** showNotificationBar | boolean | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** |
|
||||
| rootFolderId | string | '-root-' | The ID of the root folder node. |
|
||||
| **(deprecated)** currentFolderPath | string | '/' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** |
|
||||
| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| onSuccess | Raised when the file is uploaded |
|
||||
60
docs/upload.service.md
Normal file
60
docs/upload.service.md
Normal file
@@ -0,0 +1,60 @@
|
||||
# Upload Service
|
||||
|
||||
Provides access to various APIs related to file upload features.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Events](#events)
|
||||
- [Details](#details)
|
||||
* [Ignore list configuration](#ignore-list-configuration)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### 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'.
|
||||
|
||||
**app.config.json**
|
||||
|
||||
```json
|
||||
{
|
||||
"ecmHost": "http://localhost:3000/ecm",
|
||||
"bpmHost": "http://localhost:3000/bpm",
|
||||
"application": {
|
||||
"name": "Alfresco"
|
||||
},
|
||||
"files": {
|
||||
"excluded": [".DS_Store", "desktop.ini", ".git"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Note:
|
||||
- Standard glob patterns work.
|
||||
- You can end patterns with a forward slash / to specify a directory.
|
||||
34
docs/user-info.component.md
Normal file
34
docs/user-info.component.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Alfresco User Info component
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
- [Details](#details)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<adf-userinfo></adf-userinfo>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| ecmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for ECM users |
|
||||
| bpmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for BPM users |
|
||||
| menuPositionX | string | | Custom choice for opening the menu bottom : `before` or `after` |
|
||||
| menuPositionY | string | | Custom choice for opening the menu bottom : `above` or `below` |
|
||||
| fallBackThumbnailImage | string | (alfresco image) | Fallback image for profile when thumbnail is missing|
|
||||
|
||||
## Details
|
||||
|
||||
This will show a round icon with user and on click some user information.
|
||||
If user is logged in with ECM and BPM the ECM image will be shown.
|
||||
157
docs/viewer.component.md
Normal file
157
docs/viewer.component.md
Normal file
@@ -0,0 +1,157 @@
|
||||
# Alfresco Viewer component
|
||||
|
||||
See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
- [Details](#details)
|
||||
* [Supported file formats](#supported-file-formats)
|
||||
* [PDF Conversion](#pdf-conversion)
|
||||
* [Configuring PDF.js library](#configuring-pdfjs-library)
|
||||
* [Custom extension handler](#custom-extension-handler)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic usage
|
||||
|
||||
Using with node id:
|
||||
|
||||
```html
|
||||
<adf-viewer
|
||||
[showViewer]="true"
|
||||
[overlayMode]="true"
|
||||
[fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
|
||||
</adf-viewer>
|
||||
```
|
||||
|
||||
Using with file url:
|
||||
|
||||
```html
|
||||
<adf-viewer
|
||||
[overlayMode]="true"
|
||||
[urlFile]="'filename.pdf'">
|
||||
</adf-viewer>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Attribute | Options | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| fileNodeId | string | | Node Id of the file to load |
|
||||
| urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file |
|
||||
| urlBlob | Blob | | If you want to load a Blob File |
|
||||
| overlayMode | boolean | false | If `true` show the Viewer full page over the present content otherwise will fit the parent div |
|
||||
| showViewer | boolean | true | Hide or show the viewer |
|
||||
| showToolbar | boolean | true | Hide or show the toolbars |
|
||||
| displayName | string | | You can specify the name of the file |
|
||||
|
||||
## Details
|
||||
|
||||
### Supported file formats
|
||||
|
||||
| Type | Extension |
|
||||
| --- | --- |
|
||||
| Media | wav, Mp3, Mp4, WebM, Ogv |
|
||||
| Images | png, jpg, jpeg, gif, bmp |
|
||||
| Text | pdf, txt |
|
||||
|
||||
### PDF Conversion
|
||||
|
||||
|
||||
|
||||
Note for unsupported extensions the viewer will offer the possibility to convert to PDF if that kind of extension is supported by the [content service renditions service](https://community.alfresco.com/docs/DOC-5879-rendition-service)
|
||||
|
||||
### Configuring PDF.js library
|
||||
|
||||
In order to configure your webpack-enabled application with the PDF.js library please follow the next steps.
|
||||
|
||||
Install pdfjs-dist
|
||||
|
||||
```sh
|
||||
npm install pdfjs-dist
|
||||
```
|
||||
|
||||
Update `vendors.ts` by appending the following:
|
||||
|
||||
```ts
|
||||
// PDF.js
|
||||
require('pdfjs-dist/web/compatibility.js');
|
||||
const pdfjsLib = require('pdfjs-dist');
|
||||
pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
|
||||
require('pdfjs-dist/web/pdf_viewer.js');
|
||||
```
|
||||
|
||||
The code above enables the "viewer" component and "compatibility" mode for all the browsers.
|
||||
It also configures the web worker for PDF.js library to render PDF files in the background.
|
||||
|
||||
Update the `plugins` section of the `webpack.common.js` file with the next lines:
|
||||
|
||||
```js
|
||||
new CopyWebpackPlugin([
|
||||
...
|
||||
{
|
||||
from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
|
||||
to: 'pdf.worker.js'
|
||||
}
|
||||
])
|
||||
```
|
||||
|
||||
The Viewer component now should be able displaying PDF files.
|
||||
|
||||
### Custom extension handler
|
||||
|
||||
If you want to handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler.
|
||||
|
||||
Below you can find an example with the use of `extension-viewer` if you can handle 3d files
|
||||
|
||||
```html
|
||||
<adf-viewer
|
||||
[(showViewer)]="fileShowed"
|
||||
[fileNodeId]="fileNodeId"
|
||||
[overlayMode]="true">
|
||||
|
||||
<extension-viewer [supportedExtensions]="['obj','3ds']" #extension>
|
||||
<template let-urlFileContent="urlFileContent" let-extension="extension">
|
||||
<threed-viewer
|
||||
[urlFile]="urlFileContent"
|
||||
[extension]="extension">
|
||||
</threed-viewer>
|
||||
</template>
|
||||
</extension-viewer>
|
||||
|
||||
</adf-viewer>
|
||||
```
|
||||
|
||||
Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make the example above work.
|
||||
|
||||
It is possible to define multiple `extension-viewer` templates:
|
||||
|
||||
```html
|
||||
<adf-viewer
|
||||
[(showViewer)]="fileShowed"
|
||||
[fileNodeId]="fileNodeId"
|
||||
[overlayMode]="true">
|
||||
|
||||
<extension-viewer [supportedExtensions]="['xls','xlsx']" #extension>
|
||||
<template let-urlFileContent="urlFileContent" >
|
||||
<my-custom-xls-component
|
||||
urlFileContent="urlFileContent">
|
||||
</my-custom-xls-component>
|
||||
</template>
|
||||
</extension-viewer>
|
||||
|
||||
<extension-viewer [supportedExtensions]="['txt']" #extension>
|
||||
<template let-urlFileContent="urlFileContent" >
|
||||
<my-custom-txt-component
|
||||
urlFileContent="urlFileContent">
|
||||
</my-custom-txt-component>
|
||||
</template>
|
||||
</extension-viewer>
|
||||
</adf-viewer>
|
||||
```
|
||||
175
docs/webscript.component.md
Normal file
175
docs/webscript.component.md
Normal file
@@ -0,0 +1,175 @@
|
||||
# Alfresco Webscript Get component
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
- [Details](#details)
|
||||
* [Webscript View HTML example](#webscript-view-html-example)
|
||||
* [Webscript View DATATABLE example](#webscript-view-datatable-example)
|
||||
* [Webscript View JSON example](#webscript-view-json-example)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic usage
|
||||
|
||||
```html
|
||||
<adf-webscript-get
|
||||
[scriptPath]="string"
|
||||
[scriptArgs]="Object"
|
||||
[contextRoot]="string"
|
||||
[servicePath]="string"
|
||||
[showData]="boolean"
|
||||
[contentType]="JSON | HTML | DATATABLE | TEXT"
|
||||
(onSuccess)= "logData($event)">
|
||||
</adf-webscript-get>
|
||||
```
|
||||
|
||||
Another example:
|
||||
|
||||
**app.component.html**
|
||||
|
||||
```html
|
||||
<adf-webscript-get
|
||||
[scriptPath]="scriptPath"
|
||||
[scriptArgs]="scriptArgs"
|
||||
[contextRoot]="contextRoot"
|
||||
[servicePath]="servicePath"
|
||||
[contentType]="'HTML'">
|
||||
</adf-webscript-get>
|
||||
```
|
||||
|
||||
**app.component.ts**
|
||||
|
||||
```ts
|
||||
export class AppComponent {
|
||||
scriptPath: string = 'sample/folder/Company%20Home';
|
||||
contextRoot: string = 'alfresco';
|
||||
servicePath: string = 'service';
|
||||
}
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| scriptPath | string | | (**mandatory**) path to Web Script (as defined by Web Script) |
|
||||
| scriptArgs | Object | | arguments to pass to Web Script |
|
||||
| contextRoot | string | | path where application is deployed |
|
||||
| scriptPath | string | alfresco | path to Web Script (as defined by Web Script) |
|
||||
| contentType | string | service | path where Web Script service is mapped default value |
|
||||
| contentType | string | TEXT | how to handle the data received from the web script JSON , HTML , DATATABLE or TEXT |
|
||||
| onSuccess | event | | You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application |
|
||||
| showData | booleann | true | render the webscript data |
|
||||
|
||||
**contentType** {string}
|
||||
***data*** {string} data containing the plain value you get from the webscipt as an output parameter
|
||||
|
||||
## Details
|
||||
|
||||
### Webscript View HTML example
|
||||
|
||||
This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript
|
||||
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
|
||||
|
||||
```http://localhost:8080/alfresco/service/sample/folder/Company%20Home```
|
||||
|
||||
```html
|
||||
<adf-webscript-get
|
||||
[scriptPath]="scriptPath"
|
||||
[contextRoot]="'alfresco'"
|
||||
[servicePath]="'service'";
|
||||
[scriptPath]="'Sample/folder/Company%20Home'"
|
||||
[contentType]="'HTML'">
|
||||
</adf-webscript-get>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Webscript View DATATABLE example
|
||||
|
||||
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
|
||||
|
||||
```http://localhost:8080/alfresco/service/sample/folder/DATATABLE```
|
||||
|
||||
```html
|
||||
<adf-webscript-get
|
||||
[scriptPath]="scriptPath"
|
||||
[contextRoot]="'alfresco'"
|
||||
[servicePath]="'service'";
|
||||
[scriptPath]="'Sample/folder/DATATABLE'"
|
||||
[contentType]="'DATATABLE'">
|
||||
</adf-webscript-get>
|
||||
```
|
||||
|
||||
If you want to show the result from a webscript inside a ng2-alfresco-datatable you have to return from the GET of the webscript the datastructure below:
|
||||
subdivide in data and schema
|
||||
|
||||
```ts
|
||||
data: [],
|
||||
schema: []
|
||||
```
|
||||
|
||||
this is an example:
|
||||
|
||||
```ts
|
||||
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',
|
||||
sortable: true
|
||||
}]
|
||||
```
|
||||
|
||||
or you can send just the array data and the component will create a schema for you:
|
||||
|
||||
```ts
|
||||
data: [
|
||||
{id: 1, name: 'Name 1'},
|
||||
{id: 2, name: 'Name 2'}
|
||||
]]
|
||||
```
|
||||
|
||||
that will render the following table
|
||||
|
||||
|
||||
|
||||
### Webscript View JSON example
|
||||
|
||||
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
|
||||
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
|
||||
|
||||
```http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE```
|
||||
|
||||
```html
|
||||
<adf-webscript-get
|
||||
[scriptPath]="scriptPath"
|
||||
[contextRoot]="'alfresco'"
|
||||
[servicePath]="'service'";
|
||||
[scriptPath]="'Sample/folder/JSON_EXAMPLE'"
|
||||
[contentType]="'HTML'"
|
||||
[showData]="false"
|
||||
(onSuccess)="logDataExample($event)">
|
||||
</adf-webscript-get>
|
||||
```
|
||||
|
||||
You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application
|
||||
|
||||
```ts
|
||||
logDataExample(data) {
|
||||
console.log('You webscript data are here' + data);
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user