[ADF-1549] Added docs for Upload, Userinfo, Viewer and Webscript (#2359)

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)
+- [File uploading dialog component](docs/file-uploading-dialog.component.md)
-- [Upload drag area component](ng2-components/ng2-alfresco-upload/README.md)
+- [Upload button component](docs/upload-button.component.md)
-- [File uploading dialog component](ng2-components/ng2-alfresco-upload/README.md)
+- [Upload drag area component](docs/upload-drag-area.component.md)
-- [Upload service](ng2-components/ng2-alfresco-upload/README.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 -->

docs/file-uploading-dialog.component.md

@@ -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.

docs/start-task.component.md

@@ -0,0 +1,39 @@
+# Start Task Component
+
+Creates/Starts new task for the specified app
+
+![adf-start-task](../docassets/images/adf-start-task.png)
+
+<!-- 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 |

docs/task-details.model.md

@@ -0,0 +1,11 @@
+# TaskDetailsModel
+
+```json
+{ 
+    "id": "string", 
+    "assignee": "User", 
+    "dueDate": "data", 
+    "endDate": "string", 
+    "description": "string"
+}
+```

docs/toolbar-divider.component.md

@@ -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>
+```

docs/toolbar-title.component.md

@@ -0,0 +1,31 @@
+# Toolbar Title Component
+
+Supplies custom HTML to be included in a Toolbar component title.
+
+![](../docassets/images/adf-toolbar-02.png)
+
+<!-- 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.

docs/upload-button.component.md

@@ -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
+        );
+    }
+
+}
+```
+
+![Upload notification message](../docassets/images/upload-notification-message.png)
+
+### 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>
+```
+
+![Upload disable button](../docassets/images/upload-disable-button.png)

docs/upload-drag-area.component.md

@@ -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 |

docs/upload.service.md

@@ -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.

docs/user-info.component.md

@@ -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.

docs/viewer.component.md

@@ -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
+
+![Rendition](../docassets/images/renditions.png)                         
+
+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> 
+```

docs/webscript.component.md

@@ -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>
+```                          
+
+![Custom columns](../docassets/images/HTML.png)                         
+
+### 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
+
+![Custom columns](../docassets/images/datatable.png)
+
+### 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);
+}
+```