[ADF-2135] Updated tables of contents and tools (#2820)

This commit is contained in:
Andy Stark
2018-01-11 10:15:00 +00:00
committed by Eugenio Romano
parent 9e706d68e4
commit 994041fb23
23 changed files with 353 additions and 464 deletions

View File

@@ -2,8 +2,9 @@
Below is an index of the documentation for ADF. The [User Guide](#user-guide)
section discusses particular techniques in depth. The other sections are references for the ADF
libraries. Items marked with an asterisk (\*) do not currently have documentation - the link leads
to the appropriate source file.
libraries. Click the name of an item to see its documentation or click the source link to see
its main source file. Note that ADF is developed continuously, so the source files for some items
may be listed here before their documentation is available.
## Contents
@@ -61,13 +62,13 @@ for more information about installing and using the source code.
| [Toolbar title component](toolbar-title.component.md) | Supplies custom HTML to be included in a Toolbar component title. | [Source](../lib/core/toolbar/toolbar-title.component.ts) |
| [Toolbar component](toolbar.component.md) | Simple container for headers, titles, actions and breadcrumbs. | [Source](../lib/core/toolbar/toolbar.component.ts) |
| [User info component](user-info.component.md) | Shows user information. | [Source](../lib/core/userinfo/components/user-info.component.ts) |
| [Viewer component](viewer.component.md) | See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/) | [Source](../lib/core/viewer/components/viewer.component.ts) |
| [Viewer component](viewer.component.md) | Displays content from an ACS repository. | [Source](../lib/core/viewer/components/viewer.component.ts) |
## Directives
| Name | Description | Source link |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| [Context menu directive](context-menu.directive.md) | See **Demo Shell** or **DocumentList** implementation for more details and use cases. | [Source](../lib/core/context-menu/context-menu.directive.ts) |
| [Context menu directive](context-menu.directive.md) | Adds a context menu to a component. | [Source](../lib/core/context-menu/context-menu.directive.ts) |
| [Highlight directive](highlight.directive.md) | Adds highlighting to selected sections of an HTML element's content. | [Source](../lib/core/directives/highlight.directive.ts) |
| [Logout directive](logout.directive.md) | Logs the user out when the decorated element is clicked. | [Source](../lib/core/directives/logout.directive.ts) |
| [Node delete directive](node-delete.directive.md) | Deletes multiple files and folders. | [Source](../lib/core/directives/node-delete.directive.ts) |
@@ -93,7 +94,7 @@ for more information about installing and using the source code.
| --------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| [File size pipe](file-size.pipe.md) | Converts a number of bytes to the equivalent in KB, MB, etc. | [Source](../lib/core/pipes/file-size.pipe.ts) |
| [Mime type icon pipe](mime-type-icon.pipe.md) | Retrieves an icon to represent a MIME type. | [Source](../lib/core/pipes/mime-type-icon.pipe.ts) |
| [Node name tooltip pipe](node-name-tooltip.pipe.md) | Formats the tooltip of the underlying Node based on the following rules: | [Source](../lib/core/pipes/node-name-tooltip.pipe.ts) |
| [Node name tooltip pipe](node-name-tooltip.pipe.md) | Formats the tooltip for a Node. | [Source](../lib/core/pipes/node-name-tooltip.pipe.ts) |
| [Text highlight pipe](text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/pipes/text-highlight.pipe.ts) |
| [Time ago pipe](time-ago.pipe.md) | Converts a recent past date into a number of days ago. | [Source](../lib/core/pipes/time-ago.pipe.ts) |
| [User initial pipe](user-initial.pipe.md) | Takes the name fields of a UserProcessModel object and extracts and formats the initials. | [Source](../lib/core/pipes/user-initial.pipe.ts) |
@@ -149,7 +150,7 @@ for more information about installing and using the source code.
### Other classes and interfaces
| Name | Description | Source link |
| -- | -- | -- |
| ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| [Data Table Adapter interface](DataTableAdapter.md) | Defines how table data is supplied to [DataTable](datatable.component.md) and [Tasklist](task-list.component.md) components. | [Source](../core/datatable/data/datatable-adapter.ts) |
| [Form Field Validator interface](FormFieldValidator.md) | Defines how the input fields of [ADF Form](form.component.md) and [ADF Task Details](task-details.component.md) components are validated. | [Source](../core/form/components/widgets/core/form-field-validator.ts) |
@@ -174,7 +175,7 @@ for more information about installing and using the source code.
| [Content action component](content-action.component.md) | Adds options to a Document List actions menu for a particular content type. | [Source](../lib/content-services/document-list/components/content-action/content-action.component.ts) |
| [Document list component](document-list.component.md) | Displays the documents from a repository. | [Source](../lib/content-services/document-list/components/document-list.component.ts) |
| [Search control component](search-control.component.md) | Displays a input text which shows find-as-you-type suggestions. | [Source](../lib/content-services/search/components/search-control.component.ts) |
| [Search component](search.component.md) | You have to add a template that will be shown when the results are loaded. | [Source](../lib/content-services/search/components/search.component.ts) |
| [Search component](search.component.md) | Searches items for supplied search terms. | [Source](../lib/content-services/search/components/search.component.ts) |
| [Sites dropdown component](sites-dropdown.component.md) | Displays a dropdown menu to show and interact with the sites of the current user. | [Source](../lib/content-services/site-dropdown/sites-dropdown.component.ts) |
| [Like component](like.component.md) | Allows a user to add "likes" to an item. | [Source](../lib/content-services/social/like.component.ts) |
| [Rating component](rating.component.md) | Allows a user to add ratings to an item. | [Source](../lib/content-services/social/rating.component.ts) |
@@ -186,7 +187,7 @@ for more information about installing and using the source code.
| [Upload drag area component](upload-drag-area.component.md) | Adds a drag and drop area to upload files to Alfresco. | [Source](../lib/content-services/upload/components/upload-drag-area.component.ts) |
| [Version list component](version-list.component.md) | Displays the version history of a node in a [Version Manager component](version-manager.component.md) | [Source](../lib/content-services/version-manager/version-list.component.ts) |
| [Version manager component](version-manager.component.md) | Displays the version history of a node with the ability to upload a new version. | [Source](../lib/content-services/version-manager/version-manager.component.ts) |
| [Webscript component](webscript.component.md) | Another example: | [Source](../lib/content-services/webscript/webscript.component.ts) |
| [Webscript component](webscript.component.md) | Provides access to Webscript features. | [Source](../lib/content-services/webscript/webscript.component.ts) |
| _Content metadata card component_ | _Not currently documented_ | [Source](../lib/content-services/content-metadata/content-metadata-card.component.ts) |
| _Content metadata component_ | _Not currently documented_ | [Source](../lib/content-services/content-metadata/content-metadata.component.ts) |
| _Content node selector panel component_ | _Not currently documented_ | [Source](../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) |

View File

@@ -2,17 +2,6 @@
Provides access to initialized **AlfrescoJSApi** instance.
<!-- 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
```ts

View File

@@ -14,20 +14,13 @@ Generates and shows charts
### Properties
| Name | Type | Description |
| --- | --- | -- |
| ---- | ---- | ----------- |
| reportId | string | The report id |
| reportParamQuery | ReportQuery | The object contains all the parameters that the report needs |
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| success | Raised when the charts are loaded |
| error | Raised when an error occurs during the loading |
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

View File

@@ -13,7 +13,7 @@ Shows a list of all available reports
### Properties
| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| ---- | ---- | -------- | ------- | ----------- |
| appId | string | optional | | The application id |
| layoutType | string | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value |
| selectFirst | boolean | optional | false | Change the value to true if you want to select the first item in the list as default |
@@ -21,14 +21,7 @@ Shows a list of all available reports
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| success | The event is emitted when the report list is loaded |
| error | The event is emitted when an error occurs during the loading |
| reportClick | The event is emitted when the report in the list is selected |
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

View File

@@ -16,7 +16,7 @@ Shows the charts related to the reportId passed as input
### Properties
| Name | Type | Description |
| --- | --- | --- |
| ---- | ---- | ----------- |
| appId | string | The application id |
| reportId | string | The report id |
| hideParameters | boolean | Toggle the analytics parameters |
@@ -36,15 +36,8 @@ You can also hide chart parameters UI by setting the `hideParameters` to `true`:
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| success | The event is emitted when the report parameters are loaded |
| error | The event is emitted when an error occurs during the loading |
| reportSaved | The event is emitted when a report is saved |
| reportDeleted | The event is emitted when a report is deleted |
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

View File

@@ -2,17 +2,6 @@
Supports app configuration settings, stored server side.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Details](#details)
* [Variable substitution in configuration strings](#variable-substitution-in-configuration-strings)
<!-- tocstop -->
<!-- markdown-toc end -->
## Details
The `AppConfigService` service provides support for loading and accessing global application configuration settings that you store on the server side in the form of a JSON file.
@@ -102,6 +91,6 @@ The `AppConfigService` also supports a limited set of variable substitutions to
The supported variables are:
| Variable name | Runtime value |
| --- | --- |
| ------------- | ------------- |
| hostname | `location.hostname` |
| port | `location.port` |

View File

@@ -2,18 +2,6 @@
Provides authentication for use with the Login component.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
**app.component.ts**
@@ -39,7 +27,7 @@ export class AppComponent {
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| onLogin | Raised when user logs in |
| onLogout | Raised when user logs out |

View File

@@ -1,9 +1,11 @@
# Comment list component
Shows a list of comments.
![ADF Comment List](docassets/images/adf-comment-list.png)
## Basic Usage
Populate the comments in the component class:
```ts
@@ -39,7 +41,6 @@ export class SomeComponent implements OnInit {
onClickCommentRow(comment: CommentProcessModel) {
console.log('Clicked row: ', comment);
}
```
In the component template use the comment list component:
@@ -54,16 +55,11 @@ In the component template use the comment list component:
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| comments | CommentProcessModel[] | | The comments data used to populate the list |
| ---- | ---- | ------- | ----------- |
| comments | CommentProcessModel\[] | | The comments data used to populate the list |
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| clickRow | Emitted when the user clicks on one of the comment rows |
<!-- seealso start -->
<!-- seealso end -->

View File

@@ -4,26 +4,21 @@ Adds options to a Document List actions menu for a particular content type.
![Document Actions](docassets/images/document-actions.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
## Contents
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
* [Built-in action examples](#built-in-action-examples)
+ [Delete - System handler combined with custom handler](#delete---system-handler-combined-with-custom-handler)
+ [Download](#download)
+ [Copy and move](#copy-and-move)
* [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
* [Customizing built-in actions](#customizing-built-in-actions)
- [Built-in action examples](#built-in-action-examples)
- [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
- [Customizing built-in actions](#customizing-built-in-actions)
- [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
@@ -80,19 +75,19 @@ export class MyView {
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ---- | ---- | ------- | ----------- |
| `target` | string | | "document" or "folder" |
| `title` | string | | The title of the action as shown in the menu |
| `icon` | string | | The name of the icon to display next to the menu command (can be left blank) |
| `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" |
| `permission` | string | | The name of the permission |
| `disabled` | boolean | | Is the menu item disabled?
| `disabled` | boolean | | Is the menu item disabled? |
| `disableWithNoPermission` | boolean | | Should this action be disabled in the menu if the user doesn't have permission for it? |
### Events
| Name | Handler | Description |
| --- | --- | --- |
| ---- | ------- | ----------- |
| `execute` | All | Emitted when user clicks on the action. For combined handlers see below |
| `permissionEvent` | All | Emitted when a permission error happens |
| `success` | copy, move, delete | Emitted on successful action with the success string message |
@@ -113,7 +108,7 @@ A number of built-in actions are defined to handle common use cases:
You can use one of the built-in handlers by assigning its name to the `handler` property.
(The names are case-insensitive, so `handler="download"` and `handler="DOWNLOAD"`
will trigger the same action.) You can also add your own handler by implementing the
`execute` event. Note that you can use *both* a built-in handler and your own `execute`
`execute` event. Note that you can use _both_ a built-in handler and your own `execute`
function in the same action.
### Built-in action examples
@@ -255,7 +250,9 @@ and override the default implementations. See the doc pages for
for details and examples.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Document list component](document-list.component.md)

View File

@@ -1,18 +1,6 @@
# Activiti Content Component
The component shows the content preview.
<!-- 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 -->
Shows the content preview.
## Basic Usage
@@ -27,11 +15,11 @@ The component shows the content preview.
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. |

View File

@@ -1,15 +1,6 @@
# Context Menu directive
<!-- 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 -->
Adds a context menu to a component.
## Basic Usage
@@ -48,7 +39,7 @@ export class MyComponent implements OnInit {
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ---- | ---- | ------- | ----------- |
| showIcons | boolean | false | Render defined icons |
## Details

View File

@@ -2,25 +2,21 @@
Defines column properties for DataTable, Tasklist, Document List and other components.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
## Contents
- [Basic Usage](#basic-usage)
* [Properties](#properties)
- [Properties](#properties)
- [Details](#details)
* [Automatic column header translation](#automatic-column-header-translation)
* [Custom tooltips](#custom-tooltips)
* [Column Template](#column-template)
* [Styling Techniques](#styling-techniques)
+ [Custom icons for selected rows](#custom-icons-for-selected-rows)
+ [Hiding columns on small screens](#hiding-columns-on-small-screens)
- [Automatic column header translation](#automatic-column-header-translation)
- [Custom tooltips](#custom-tooltips)
- [Column Template](#column-template)
- [Styling Techniques](#styling-techniques)
- [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
@@ -38,7 +34,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ---- | ---- | ------- | ----------- |
| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
| type | string | text | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
| format | string | | Value format (if supported by components), for example format of the date |
@@ -105,7 +101,7 @@ You can provide custom column/cell templates that may contain other Angular comp
Every cell in the DataTable component is bound to the dynamic data context containing the following properties:
| Name | Type | Description |
| --- | --- | --- |
| ---- | ---- | ----------- |
| data | [DataTableAdapter](DataTableAdapter.md) | Data adapter instance. |
| row | [DataRow](DataTableAdapter.md) | Current data row instance. |
| col | [DataColumn](DataTableAdapter.md) | Current data column instance. |
@@ -145,7 +141,7 @@ You may want using **row** api to get raw value access.
</data-column>
```
Use **data** api to get values with post-processing, like datetime/icon conversion._
Use **data** api to get values with post-processing, like datetime/icon conversion.\_
In the Example below we will prepend `Hi!` to each file and folder name in the list:
@@ -272,7 +268,9 @@ Now you can declare columns and assign `desktop-only` class where needed:
![Responsive Mobile](docassets/images/responsive-mobile.png)
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Document list component](document-list.component.md)

View File

@@ -6,32 +6,24 @@ Displays data as a table with customizable columns and presentation.
See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
## Contents
- [Basic usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [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)
* [Custom Empty content template](#custom-empty-content-template)
* [Loading content template](#loading-content-template)
* [Events](#events-1)
+ [row-keyup DOM event](#row-keyup-dom-event)
+ [rowClick event](#rowclick-event)
+ [rowDblClick event](#rowdblclick-event)
+ [showRowContextMenu event](#showrowcontextmenu-event)
+ [showRowActionsMenu event](#showrowactionsmenu-event)
+ [executeRowAction event](#executerowaction-event)
- [Supplying data for the table](#supplying-data-for-the-table)
- [Customizing columns](#customizing-columns)
- [DataTable DOM Events](#datatable-dom-events)
- [Custom Empty content template](#custom-empty-content-template)
- [Loading content template](#loading-content-template)
- [Events](#events-1)
- [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage
**app.component.html**
@@ -127,12 +119,12 @@ export class DataTableDemo {
### 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 |
| 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. |
@@ -141,12 +133,12 @@ export class DataTableDemo {
| 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 |
| selection | DataRow[] | [] | Contains selected rows |
| selection | DataRow\[] | \[] | Contains selected rows |
### Events
| Name | Description
| --- | --- |
| 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 |
@@ -174,7 +166,7 @@ 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 |
@@ -250,8 +242,8 @@ You can use any HTML layout or Angular component as a content of the empty templ
</adf-datatable>
```
| Name | Type | Default | Description
| --- | --- | --- | --- |
| 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 |
@@ -462,7 +454,9 @@ where you can handle the process, inspect the action payload and all custom prop
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)

View File

@@ -4,38 +4,36 @@ Displays the documents from a repository.
![Custom columns](docassets/images/custom-columns.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
## Contents
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
* [DOM Events](#dom-events)
* [Pagination strategy](#pagination-strategy)
* [Data Sources](#data-sources)
+ [Node ID](#node-id)
+ [Repository aliases](#repository-aliases)
+ [DocumentList aliases](#documentlist-aliases)
* [Setting default folder](#setting-default-folder)
* [Calling DocumentList api directly](#calling-documentlist-api-directly)
* [Underlying node object](#underlying-node-object)
* [Custom columns](#custom-columns)
* [Date Column](#date-column)
* [Location Column](#location-column)
* [Actions](#actions)
* [Navigation mode](#navigation-mode)
- [DOM Events](#dom-events)
- [Pagination strategy](#pagination-strategy)
- [Data Sources](#data-sources)
- [Setting default folder](#setting-default-folder)
- [Calling DocumentList api directly](#calling-documentlist-api-directly)
- [Underlying node object](#underlying-node-object)
- [Custom columns](#custom-columns)
- [Date Column](#date-column)
- [Location Column](#location-column)
- [Actions](#actions)
- [Navigation mode](#navigation-mode)
- [Advanced usage and customization](#advanced-usage-and-customization)
* [Custom row filter](#custom-row-filter)
* [Custom image resolver](#custom-image-resolver)
* [Custom 'empty folder' template](#custom-empty-folder-template)
- [Custom row filter](#custom-row-filter)
- [Custom image resolver](#custom-image-resolver)
- [Custom 'empty folder' template](#custom-empty-folder-template)
- [Custom 'permission denied' template](#custom-permission-denied-template)
- [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
@@ -52,8 +50,8 @@ Displays the documents from a repository.
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, choose the one that suites more your use case.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| permissionsStyle | [PermissionStyleModel[]](permissions-style.model.md) | null | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](permissions-style.model.md) page for further details and examples. |
| ---- | ---- | ------- | ----------- |
| permissionsStyle | [PermissionStyleModel\[\]](permissions-style.model.md) | null | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](permissions-style.model.md) page for further details and examples. |
| locationFormat | string | '/' | The default route for all the location-based columns (if declared). |
| navigate | boolean | true | Toggles navigation to folder content or file preview |
| navigationMode | string (click,dblclick) | dblclick | User interaction for folder navigation or file preview |
@@ -65,7 +63,7 @@ The properties currentFolderId, folderNode and node are the entry initialization
| contextMenuActions | boolean | false | Toggles context menus for each row |
| emptyFolderImageUrl | string | assets/images/empty_doc_lib.svg | Custom image for empty folder |
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| sorting | string[] | | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override default sorting detected by the component based on columns. |
| sorting | string\[] | | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override default sorting detected by the component based on columns. |
| 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 |
| loading | boolean | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. |
@@ -81,7 +79,7 @@ The properties currentFolderId, folderNode and node are the entry initialization
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| nodeClick | emitted when user clicks a list node |
| nodeDblClick | emitted when user double-clicks list node |
| folderChange | emitted once current display folder has changed |
@@ -98,7 +96,7 @@ Below are the DOM events the DocumentList component emits.
All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
| Name | Description |
| --- | --- |
| ---- | ----------- |
| node-click | Raised when user clicks the node |
| node-dblclick | Raised when user double-clicks the node |
| node-select | Raised when user selects a node |
@@ -183,7 +181,7 @@ The default column layout for non-reserved views is:
- Modified (date)
- Modified by
__Trashcan__
**Trashcan**
```html
<adf-document-list
@@ -201,7 +199,7 @@ Default layout:
- Deleted
- Deleted by
__Shared Links__
**Shared Links**
```html
<adf-document-list
@@ -220,7 +218,7 @@ Default layout:
- Modified by
- Shared by
__Sites__
**Sites**
```html
<adf-document-list
@@ -234,7 +232,7 @@ Default layout:
- Title
- Status
__My Sites__
**My Sites**
```html
<adf-document-list
@@ -248,7 +246,7 @@ Default layout:
- Title
- Status
__Favorites__
**Favorites**
```html
<adf-document-list
@@ -266,7 +264,7 @@ Default layout:
- Modified
- Modified by
__Recent Files__
**Recent Files**
```html
<adf-document-list
@@ -756,8 +754,11 @@ This can be changed by means of the custom html template:
That will give the following output:
![Custom no permission](docassets/images/no-permission-custom.png)
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Datatable component](datatable.component.md)

View File

@@ -1,17 +1,6 @@
# ADF Form List Component
The component shows the activiti forms as a list.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
<!-- tocstop -->
<!-- markdown-toc end -->
Shows APS forms as a list.
## Basic Usage
@@ -26,5 +15,5 @@ The component shows the activiti forms as a list.
The recommended set of properties can be found in the following table:
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ---- | ---- | ------- | ----------- |
| forms | any | | The array that contains the information to show inside the list. |

View File

@@ -1,21 +1,6 @@
# Node Name Tooltip directive
Formats the tooltip of the underlying Node based on the following rules:
* if the *title* and *description* are missing, then the tooltip shows the *name*;
* if the *title* is missing, then the tooltip shows the *name* and *description*;
* if the *description* is missing, then the tooltip shows the *name* and *title*;
* if *name* and *title*, *name* and *description*, or *title* and *description* are the same, then only a single line is displayed.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
<!-- tocstop -->
<!-- markdown-toc end -->
Formats the tooltip for a Node.
## Basic Usage
@@ -29,9 +14,11 @@ Formats the tooltip of the underlying Node based on the following rules:
</data-column>
```
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## Details
## See also
The tooltip is formatted according to the following rules:
<!-- seealso end -->
- if the _title_ and _description_ are missing, then the tooltip shows the _name_;
- if the _title_ is missing, then the tooltip shows the _name_ and _description_;
- if the _description_ is missing, then the tooltip shows the _name_ and _title_;
- if _name_ and _title_, _name_ and _description_, or _title_ and _description_ are the same, then only a single line is displayed.

View File

@@ -1,19 +1,6 @@
# Search 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)
<!-- tocstop -->
<!-- markdown-toc end -->
Searches items for supplied search terms.
## Basic usage
@@ -27,7 +14,7 @@
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| ---- | ---- | ------- | ----------- |
| searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results |
| maxResults | number | 20 | Maximum number of results to show in the search. |
| skipResults | number | 0 | Number of results to skip from the results pagination. |
@@ -37,12 +24,13 @@
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| resultLoaded | Emitted when search results have fully loaded |
## Details
### Customise Search Results
You have to add a template that will be shown when the results are loaded.
```html
@@ -56,6 +44,7 @@ You have to add a template that will be shown when the results are loaded.
</ng-template>
</adf-search>
```
The results are provided via the [$implicit variable of angular2](https://angular.io/api/common/NgTemplateOutlet) and can be accessed via the sugar sintax 'let-yourChosenName'. As per example above the result will be something like :
![adf-search-control](docassets/images/search-component-simple-template.png)
@@ -106,8 +95,8 @@ Which will look like :
![adf-search-control](docassets/images/search-component-complex-template.png)
### Attach an input field to the search
You can also attach your input field to the adf-search component via the trigger [searchAutocomplete]
```html
@@ -121,4 +110,5 @@ You can also attach your input field to the adf-search component via the trigger
</ng-template>
</adf-search>
```
In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable.

View File

@@ -1,22 +1,27 @@
# Alfresco Viewer component
Displays content from an ACS repository.
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 -->
## Contents
- [Basic usage](#basic-usage)
- [Properties](#properties)
- [Events](#events)
- [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 -->
- [Integrating with DocumentList component](#integrating-with-documentlist-component)
- [Supported file formats](#supported-file-formats)
- [PDF Conversion](#pdf-conversion)
- [Configuring PDF.js library](#configuring-pdfjs-library)
- [Custom toolbar](#custom-toolbar)
- [Custom sidebar](#custom-sidebar)
- [Custom "Open With" menu](#custom-open-with-menu)
- [Custom "More actions" menu](#custom-more-actions-menu)
- [Extending the Viewer](#extending-the-viewer)
## Basic usage
@@ -39,10 +44,10 @@ Using with file url:
</adf-viewer>
```
## Properties
### Properties
| Name | Type | 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 |
| urlFileViewer | string | null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
@@ -60,16 +65,18 @@ Using with file url:
| sidebarPosition | string | right | The position of the sidebar. Can be `left` or `right`. |
| sidebarTemplate | TemplateRef<any> | null | The template intended to be used as a sidebar. The template context contains the loaded node data. |
## Events
### Events
| Name | Argument Type | Cancelable | Description |
| --- | --- | --- | --- |
| ---- | ------------- | ---------- | ----------- |
| goBack | any | Yes | Raised when user clicks the 'Back' button. |
| download | any | Yes | Raised when user clicks the 'Download' button. |
| print | any | Yes | Raised when user clicks the 'Print' button. |
| share | any | Yes | Raised when user clicks the 'Share' button. |
## Integrating with DocumentList component
## Details
### Integrating with DocumentList component
Below is the most simple integration of Viewer and DocumentList components within your custom component:
@@ -105,12 +112,10 @@ export class OverlayViewerComponent {
}
```
## Details
### Supported file formats
| Type | Extension |
| --- | --- |
| ---- | --------- |
| Media | wav, Mp3, Mp4, WebM, Ogv |
| Images | png, jpg, jpeg, gif, bmp |
| Text | pdf, txt |
@@ -176,6 +181,7 @@ The Viewer component also supports custom sidebar components and layouts.
The `allowSidebar` property should be set to `true` to enable this feature.
Custom sidebar for the viewer can be injected in two different ways:
- using transclusion
- using template **(only works when using the viewer with fileNodeId)**

View File

@@ -1,19 +1,6 @@
# 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 -->
Provides access to Webscript features.
## Basic usage
@@ -56,7 +43,7 @@ export class AppComponent {
### 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 |
@@ -65,15 +52,14 @@ export class AppComponent {
| contentType | string | TEXT | how to handle the data received from the web script JSON , HTML , DATATABLE or TEXT |
| showData | boolean | true | render the webscript data |
### Events
| Name | Description |
| --- | --- |
| ---- | ----------- |
| success | You can get the plain data from the webscript through the **success** event parameter and use it as you need in your application |
**contentType** {string}
***data*** {string} data containing the plain value you get from the webscipt as an output parameter
**_data_** {string} data containing the plain value you get from the webscipt as an output parameter
## Details
@@ -82,7 +68,7 @@ export class AppComponent {
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```
`http://localhost:8080/alfresco/service/sample/folder/Company%20Home`
```html
<adf-webscript-get
@@ -100,7 +86,7 @@ This sample Web Scripts reside in your Alfresco Server. You can access the folde
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```
`http://localhost:8080/alfresco/service/sample/folder/DATATABLE`
```html
<adf-webscript-get
@@ -158,7 +144,7 @@ that will render the following table
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```
`http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE`
```html
<adf-webscript-get

View File

@@ -17,6 +17,7 @@ var aggData = {};
var toolsFolderName = "tools";
var configFileName = "doctool.config.json";
var defaultFolder = path.resolve("..", "docs");
function initPhase(aggData) {
@@ -78,8 +79,7 @@ function updatePhase(srcFolder, destFolder, filenames, aggData) {
});
if (modified)
fs.writeFileSync(path.resolve(destFolder, filenames[i]), remark().stringify(tree));
fs.writeFileSync(path.resolve(destFolder, filenames[i]), remark().data("settings", {paddedTable: false}).stringify(tree));
//console.log(JSON.stringify(tree));
}
}
@@ -119,7 +119,15 @@ if (program.args.length === 0) {
return 0;
}
/*
var sourcePath;
if (program.args.length > 0)
sourcePath = path.resolve(program.args[0]);
else
sourcePath = defaultFolder;
*/
var sourcePath = path.resolve(program.args[0]);
var sourceInfo = fs.statSync(sourcePath);
@@ -150,6 +158,7 @@ if (sourceInfo.isDirectory()) {
} else if (sourceInfo.isFile()) {
files = [ path.basename(sourcePath) ];
sourcePath = path.dirname(sourcePath);
destPath = path.dirname(destPath);
}
files = files.filter(filename =>

View File

@@ -1,5 +1,5 @@
{
"enabledTools": [
"index"
"toc"
]
}

View File

@@ -91,7 +91,7 @@ function aggPhase(aggData) {
]
});
fs.writeFileSync(path.resolve("..", "docs", "README.md"), remark().stringify(indexFileTree));
fs.writeFileSync(path.resolve("..", "docs", "README.md"), remark().data("settings", {paddedTable: false}).stringify(indexFileTree));
//fs.writeFileSync(indexMdFilePath, remark().stringify(indexFileTree));
//fs.writeFileSync(path.resolve(".", "testJson.md"), JSON.stringify(indexFileTree));
}

View File

@@ -8,7 +8,17 @@ const contentsHeading = "Contents";
const minHeadingsForToc = 8;
const maxTocHeadingDepth = 3;
module.exports = process;
module.exports = {
"initPhase": initPhase,
"readPhase": readPhase,
"aggPhase": aggPhase,
"updatePhase": updatePhase
}
function initPhase(aggData) {}
function readPhase(tree, pathname, aggData) {}
function aggPhase(aggData) {}
// Find an existing Contents section or add a new empty one if needed.
// Returns true if section is present/needed, false if not needed.
@@ -47,7 +57,7 @@ function establishContentsSection(mdTree) {
// If there are enough headings for a ToC to be necessary then
// add one in the right place.
if (!foundContentsHeading) {
var newContsHeading = unist.makeHeading(contentsHeading, 2);
var newContsHeading = unist.makeHeading(unist.makeText(contentsHeading), 2);
// If we found another L2 heading then add the Contents in just before it.
if (firstL2HeadingPos != -1) {
@@ -62,21 +72,22 @@ function establishContentsSection(mdTree) {
return numTocHeadings;
}
function process(mdTree, file) {
function updatePhase(tree, pathname, aggData) {
// If we need a contents section then add one or update the existing one.
var numTocHeadings = establishContentsSection(mdTree);
var numTocHeadings = establishContentsSection(tree);
if (numTocHeadings >= minHeadingsForToc) {
var newToc = tocGenerator(mdTree, {heading: contentsHeading, maxDepth: 3});
var newToc = tocGenerator(tree, {heading: contentsHeading, maxDepth: 3});
replaceSection(mdTree, contentsHeading, function(before, oldSection, after) {
replaceSection(tree, contentsHeading, function(before, oldSection, after) {
return [before, newToc.map, after];
});
} else {
// Otherwise, we don't need one, so remove any existing one.
replaceSection(mdTree, contentsHeading, function(before, oldSection, after) {
replaceSection(tree, contentsHeading, function(before, oldSection, after) {
return [after];
});
}
return true;
}