inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3514] Added transclusions sections to doc files (#3756)

Browse Source 
* [ADF-3514] Added transclusion sections and guide page

* [ADF-3514] Updated tables of contents where needed

* [ADF-3514] Updated index files
This commit is contained in:
Andy Stark 2018-09-10 11:11:25 +01:00 committed by Eugenio Romano
parent 35e1563fde
commit 2c49de6070
35 changed files with 682 additions and 515 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/README.md
View File

@ -37,6 +37,7 @@ See the [Tutorials index](tutorials/README.md) for the full list.
- [Form Extensibility and Customisation](user-guide/extensibility.md)
- [Internationalization in ADF](user-guide/internationalization.md)
- [Theming](user-guide/theming.md)
- [Transclusion](user-guide/transclusion.md)
- [Typography](user-guide/typography.md)
- [Walkthrough - adding indicators to highlight information about a node](user-guide/metadata-indicators.md)
@ -58,7 +59,7 @@ for more information about installing and using the source code.
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [About component](core/about.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | This component allow you to have a general overview of the version of ADF installed and the status of the Content service and Process service. | [Source](../lib/core/about/about.component.ts) |
| [Buttons menu component](core/buttons-menu.component.md) | Displays buttons on a responsive menu. | [Source](../lib/core/buttons-menu/buttons-menu.component.ts) |
| [Buttons menu component](core/buttons-menu.component.md) | Displays buttons on a responsive menu. | [Source](../lib/core/buttons-menu/buttons-menu.component.ts) |
| [Card view component](core/card-view.component.md) | Displays a configurable property list renderer. | [Source](../lib/core/card-view/components/card-view/card-view.component.ts) |
| [Accordion group component](core/accordion-group.component.md) | Adds a collapsible panel to an accordion menu. | [Source](../lib/core/collapsable/accordion-group.component.ts) |
| [Accordion component](core/accordion.component.md) | Creates a collapsible accordion menu. | [Source](../lib/core/collapsable/accordion.component.ts) |
@ -66,6 +67,7 @@ for more information about installing and using the source code.
| [Comments component](core/comments.component.md) | Displays comments from users involved in a specified task or content and allows an involved user to add a comment to a task or a content. | [Source](../lib/core/comments/comments.component.ts) |
| [Data column component](core/data-column.component.md) | Defines column properties for DataTable, Tasklist, Document List and other components. | [Source](../lib/core/data-column/data-column.component.ts) |
| [Datatable component](core/datatable.component.md) | Displays data as a table with customizable columns and presentation. | [Source](../lib/core/datatable/components/datatable/datatable.component.ts) |
| [Empty list component](core/empty-list.component.md) | Displays a message indicating that a list is empty. | [Source](../lib/core/datatable/components/datatable/empty-list.component.ts) |
| [Form field component](core/form-field.component.md) | A form field in an APS form. | [Source](../lib/core/form/components/form-field/form-field.component.ts) |
| [Form list component](core/form-list.component.md) | Shows APS forms as a list. | [Source](../lib/core/form/components/form-list.component.ts) |
| [Form component](core/form.component.md) | Shows a Form from APS | [Source](../lib/core/form/components/form.component.ts) |
@ -74,12 +76,13 @@ for more information about installing and using the source code.
| [Info drawer layout component](core/info-drawer-layout.component.md) | Displays a sidebar-style information panel. | [Source](../lib/core/info-drawer/info-drawer-layout.component.ts) |
| [Info drawer component](core/info-drawer.component.md) | Displays a sidebar-style information panel with tabs. | [Source](../lib/core/info-drawer/info-drawer.component.ts) |
| [Language menu component](core/language-menu.component.md) | Displays all the languages that are present in the "app.config.json" or the default one (EN). | [Source](../lib/core/language-menu/language-menu.component.ts) |
| [Login component](core/login.component.md) | Authenticates to Alfresco Content Services and Alfresco Process Services. | [Source](../lib/core/login/components/login.component.ts) |
| [Header component](core/header.component.md) ![Experimental](docassets/images/ExperimentalIcon.png) | Reusable header for Alfresco applications. | [Source](../lib/core/layout/components/header/header.component.ts) |
| [Sidebar action menu component](core/sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts) |
| [Sidenav layout component](core/sidenav-layout.component.md) | Displays the standard three-region ADF application layout. | [Source](../lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts) |
| [Login component](core/login.component.md) | Authenticates to Alfresco Content Services and or Alfresco Process Services. | [Source](../lib/core/login/components/login.component.ts) |
| [Infinite pagination component](core/infinite-pagination.component.md) | Adds "infinite" pagination to the component it is used with. | [Source](../lib/core/pagination/infinite-pagination.component.ts) |
| [Pagination component](core/pagination.component.md) | Adds pagination to the component it is used with. | [Source](../lib/core/pagination/pagination.component.ts) |
| [Host settings component](core/host-settings.component.md) ![Internal](docassets/images/InternalIcon.png) | Validates the URLs for ACS and APS and saves them in the user's local storage | [Source](../lib/core/settings/host-settings.component.ts) |
| [Sidebar action menu component](core/sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts) |
| [Sidenav layout component](core/sidenav-layout.component.md) | Displays the standard three-region ADF application layout. | [Source](../lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts) |
| [Sorting picker component](core/sorting-picker.component.md) | Selects from a set of predefined sorting definitions and directions. | [Source](../lib/core/sorting-picker/sorting-picker.component.ts) |
| [Empty content component](core/empty-content.component.md) | Provides a generic "Empty Content" placeholder for components. | [Source](../lib/core/templates/empty-content/empty-content.component.ts) |
| [Error content component](core/error-content.component.md) | Displays info about a specific error. | [Source](../lib/core/templates/error-content/error-content.component.ts) |
@ -122,7 +125,7 @@ for more information about installing and using the source code.
| [Node name tooltip pipe](core/node-name-tooltip.pipe.md) | Formats the tooltip for a Node. | [Source](../lib/core/pipes/node-name-tooltip.pipe.ts) |
| [Text highlight pipe](core/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](core/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](core/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) |
| [User initial pipe](core/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) |
## Services
@ -133,7 +136,7 @@ for more information about installing and using the source code.
| [Activiti alfresco service](core/activiti-alfresco.service.md) | Gets Alfresco Repository folder content based on a Repository account configured in Alfresco Process Services (APS). | [Source](../lib/core/form/services/activiti-alfresco.service.ts) |
| [Form rendering service](core/form-rendering.service.md) | Maps an APS form field type string onto the corresponding form widget component type. | [Source](../lib/core/form/services/form-rendering.service.ts) |
| [Form service](core/form.service.md) | Implements Process Services form methods | [Source](../lib/core/form/services/form.service.ts) |
| [Node service](core/node.service.md) | Gets Alfresco Repository node metadata and creates nodes with metadata. | [Source](../lib/core/form/services/node.service.ts) |
| [Node service](core/node.service.md) | Gets Alfresco Repository node metadata and creates nodes with metadata. | [Source](../lib/core/form/services/node.service.ts) |
| [Process content service](core/process-content.service.md) | Manipulates content related to a Process Instance or Task Instance in APS. | [Source](../lib/core/form/services/process-content.service.ts) |
| [Alfresco api service](core/alfresco-api.service.md) | Provides access to an initialized **AlfrescoJSApi** instance. | [Source](../lib/core/services/alfresco-api.service.ts) |
| [Apps process service](core/apps-process.service.md) | Gets details of the Process Services apps that are deployed for the user. | [Source](../lib/core/services/apps-process.service.ts) |
@ -153,7 +156,7 @@ for more information about installing and using the source code.
| [Nodes api service](core/nodes-api.service.md) | Accesses and manipulates ACS document nodes using their node IDs. | [Source](../lib/core/services/nodes-api.service.ts) |
| [Notification service](core/notification.service.md) | Shows a notification message with optional feedback. | [Source](../lib/core/services/notification.service.ts) |
| [Page title service](core/page-title.service.md) | Sets the page title. | [Source](../lib/core/services/page-title.service.ts) |
| [People content service](core/people-content.service.md) | Gets information about a Content Services user. | [Source](../lib/core/services/people-content.service.ts) |
| [People content service](core/people-content.service.md) | Gets information about a Content Services user. | [Source](../lib/core/services/people-content.service.ts) |
| [People process service](core/people-process.service.md) | Gets information about Process Services users. | [Source](../lib/core/services/people-process.service.ts) |
| [Renditions service](core/renditions.service.md) ![Deprecated](docassets/images/DeprecatedIcon.png) | Manages prearranged conversions of content to different formats. | [Source](../lib/core/services/renditions.service.ts) |
| [Search configuration service](core/search-configuration.service.md) | Provides fine control of parameters to a search. | [Source](../lib/core/services/search-configuration.service.ts) |
@ -219,7 +222,7 @@ for more information about installing and using the source code.
| [Search slider component](content-services/search-slider.component.md) | Implements a numeric slider widget for the Search Filter component. | [Source](../lib/content-services/search/components/search-slider/search-slider.component.ts) |
| [Search sorting picker component](content-services/search-sorting-picker.component.md) | Provides an ability to select one of the predefined sorting definitions for search results: | [Source](../lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts) |
| [Search text component](content-services/search-text.component.md) | Implements a text input widget for the Search Filter component. | [Source](../lib/content-services/search/components/search-text/search-text.component.ts) |
| [Search component](content-services/search.component.md) | Searches items for supplied search terms. | [Source](../lib/content-services/search/components/search.component.ts) |
| [Search component](content-services/search.component.md) | Searches items for supplied search terms. | [Source](../lib/content-services/search/components/search.component.ts) |
| [Sites dropdown component](content-services/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](content-services/like.component.md) | Allows a user to add "likes" to an item. | [Source](../lib/content-services/social/like.component.ts) |
| [Rating component](content-services/rating.component.md) | Allows a user to add ratings to an item. | [Source](../lib/content-services/social/rating.component.ts) |
@ -307,13 +310,14 @@ for more information about installing and using the source code.
| [Process instance tasks component](process-services/process-instance-tasks.component.md) | Lists both the active and completed tasks associated with a particular process instance | [Source](../lib/process-services/process-list/components/process-instance-tasks.component.ts) |
| [Process list component](process-services/process-list.component.md) | Renders a list containing all the process instances matched by the parameters specified. | [Source](../lib/process-services/process-list/components/process-list.component.ts) |
| [Start process component](process-services/start-process.component.md) | Starts a process. | [Source](../lib/process-services/process-list/components/start-process.component.ts) |
| [Attach form component](process-services/attach-form.component.md) | This component can be used when there is no form attached to a task and we want to add one. | [Source](../lib/process-services/task-list/components/attach-form.component.ts) |
| [Checklist component](process-services/checklist.component.md) | Shows the checklist task functionality. | [Source](../lib/process-services/task-list/components/checklist.component.ts) |
| [Start task component](process-services/start-task.component.md) | Creates/Starts new task for the specified app | [Source](../lib/process-services/task-list/components/start-task.component.ts) |
| [Task details component](process-services/task-details.component.md) | Shows the details of the task ID passed in as input. | [Source](../lib/process-services/task-list/components/task-details.component.ts) |
| [Task filters component](process-services/task-filters.component.md) | Shows all available filters. | [Source](../lib/process-services/task-list/components/task-filters.component.ts) |
| [Task header component](process-services/task-header.component.md) | Shows all the information related to a task. | [Source](../lib/process-services/task-list/components/task-header.component.ts) |
| [Task list component](process-services/task-list.component.md) | Renders a list containing all the tasks matched by the parameters specified. | [Source](../lib/process-services/task-list/components/task-list.component.ts) |
| [Task standalone component](process-services/task-standalone.component.md) | This component can be used when there is no form attached to a task. | [Source](../lib/process-services/task-list/components/task-standalone.component.ts) |
| [Task standalone component](process-services/task-standalone.component.md) | This component can be used when the task doesn't belong to any processes. | [Source](../lib/process-services/task-list/components/task-standalone.component.ts) |
## Directives
@ -333,9 +337,9 @@ for more information about installing and using the source code.
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [Process filter service](process-services/process-filter.service.md) | Manage Process Filters, which are pre-configured Process Instance queries. | [Source](../lib/process-services/process-list/services/process-filter.service.ts) |
| [Process service](process-services/process.service.md) | Manages Process Instances, Process Variables, and Process Audit Log. | [Source](../lib/process-services/process-list/services/process.service.ts) |
| [Task filter service](process-services/task-filter.service.md) | Manage Task Filters, which are pre-configured Task Instance queries. | [Source](../lib/process-services/task-list/services/task-filter.service.ts) |
| [Process filter service](process-services/process-filter.service.md) | Manage Process Filters, which are pre-configured Process Instance queries. | [Source](../lib/process-services/process-list/services/process-filter.service.ts) |
| [Process service](process-services/process.service.md) | Manages Process Instances, Process Variables, and Process Audit Log. | [Source](../lib/process-services/process-list/services/process.service.ts) |
| [Task filter service](process-services/task-filter.service.md) | Manage Task Filters, which are pre-configured Task Instance queries. | [Source](../lib/process-services/task-list/services/task-filter.service.ts) |
| [Tasklist service](process-services/tasklist.service.md) | Manages Task Instances. | [Source](../lib/process-services/task-list/services/tasklist.service.ts) |
<!--process-services end-->

26
docs/content-services/README.md
View File

@ -22,17 +22,17 @@ for more information about installing and using the source code.
| [Add permission panel component](add-permission-panel.component.md) | Searches for people or groups to add to the current node permissions. | [Source](../../lib/content-services/permission-manager/components/add-permission/add-permission-panel.component.ts) |
| [Add permission component](add-permission.component.md) | Searches for people or groups to add to the current node permissions. | [Source](../../lib/content-services/permission-manager/components/add-permission/add-permission.component.ts) |
| [Permission list component](permission-list.component.md) | Shows node permissions as a table. | [Source](../../lib/content-services/permission-manager/components/permission-list/permission-list.component.ts) |
| [Search check list component](search-check-list.component.md) | Implements a checklist widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-check-list/search-check-list.component.ts) |
| [Search check list component](search-check-list.component.md) | Implements a checklist widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-check-list/search-check-list.component.ts) |
| [Search chip list component](search-chip-list.component.md) | Displays search criteria as a set of "chips". | [Source](../../lib/content-services/search/components/search-chip-list/search-chip-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 date range component](search-date-range.component.md) | Implements a date range widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-date-range/search-date-range.component.ts) |
| [Search date range component](search-date-range.component.md) | Implements a date range widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-date-range/search-date-range.component.ts) |
| [Search filter component](search-filter.component.md) | Represents a main container component for custom search and faceted search settings. | [Source](../../lib/content-services/search/components/search-filter/search-filter.component.ts) |
| [Search number range component](search-number-range.component.md) | Implements a number range widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-number-range/search-number-range.component.ts) |
| [Search radio component](search-radio.component.md) | Implements a radio button list widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-radio/search-radio.component.ts) |
| [Search slider component](search-slider.component.md) | Implements a numeric slider widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-slider/search-slider.component.ts) |
| [Search number range component](search-number-range.component.md) | Implements a number range widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-number-range/search-number-range.component.ts) |
| [Search radio component](search-radio.component.md) | Implements a radio button list widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-radio/search-radio.component.ts) |
| [Search slider component](search-slider.component.md) | Implements a numeric slider widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-slider/search-slider.component.ts) |
| [Search sorting picker component](search-sorting-picker.component.md) | Provides an ability to select one of the predefined sorting definitions for search results: | [Source](../../lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts) |
| [Search text component](search-text.component.md) | Implements a text input widget for the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-text/search-text.component.ts) |
| [Search component](search.component.md) | Searches items for supplied search terms. | [Source](../../lib/content-services/search/components/search.component.ts) |
| [Search text component](search-text.component.md) | Implements a text input widget for the Search Filter component. | [Source](../../lib/content-services/search/components/search-text/search-text.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) |
@ -43,7 +43,7 @@ for more information about installing and using the source code.
| [Upload button component](upload-button.component.md) | Activates a file upload. | [Source](../../lib/content-services/upload/components/upload-button.component.ts) |
| [Upload drag area component](upload-drag-area.component.md) | Adds a drag and drop area to upload files to ACS. | [Source](../../lib/content-services/upload/components/upload-drag-area.component.ts) |
| [Upload version button component](upload-version-button.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | Activates a file version upload. | [Source](../../lib/content-services/upload/components/upload-version-button.component.ts) |
| [Version list component](version-list.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | Displays the version history of a node in a [Version Manager component](../content-services/version-manager.component.md). | [Source](../../lib/content-services/version-manager/version-list.component.ts) |
| [Version list component](version-list.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | Displays the version history of a node in a Version Manager component. | [Source](../../lib/content-services/version-manager/version-list.component.ts) |
| [Version manager component](version-manager.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | 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) | Provides access to Webscript features. | [Source](../../lib/content-services/webscript/webscript.component.ts) |
@ -72,12 +72,12 @@ for more information about installing and using the source code.
| ---- | ----------- | ----------- |
| [Content node dialog service](content-node-dialog.service.md) | Displays and manages dialogs for selecting content to open, copy or upload. | [Source](../../lib/content-services/content-node-selector/content-node-dialog.service.ts) |
| [Custom resources service](custom-resources.service.md) | Manages Document List information that is specific to a user. | [Source](../../lib/content-services/document-list/services/custom-resources.service.ts) |
| [Document actions service](document-actions.service.md) | Implements the document menu actions for the [Document List component](../content-services/document-list.component.md). | [Source](../../lib/content-services/document-list/services/document-actions.service.ts) |
| [Document list service](document-list.service.md) | Implements node operations used by the [Document List component](../content-services/document-list.component.md). | [Source](../../lib/content-services/document-list/services/document-list.service.ts) |
| [Folder actions service](folder-actions.service.md) | Implements the folder menu actions for the [Document List component](../content-services/document-list.component.md). | [Source](../../lib/content-services/document-list/services/folder-actions.service.ts) |
| [Document actions service](document-actions.service.md) | Implements the document menu actions for the Document List component. | [Source](../../lib/content-services/document-list/services/document-actions.service.ts) |
| [Document list service](document-list.service.md) | Implements node operations used by the Document List component. | [Source](../../lib/content-services/document-list/services/document-list.service.ts) |
| [Folder actions service](folder-actions.service.md) | Implements the folder menu actions for the Document List component. | [Source](../../lib/content-services/document-list/services/folder-actions.service.ts) |
| [Node permission dialog service](node-permission-dialog.service.md) | Displays dialogs to let the user set node permissions. | [Source](../../lib/content-services/permission-manager/services/node-permission-dialog.service.ts) |
| [Node permission service](node-permission.service.md) | Manages role permissions for content nodes. | [Source](../../lib/content-services/permission-manager/services/node-permission.service.ts) |
| [Search filter service](search-filter.service.md) | Registers widgets for use with the [Search Filter component](../content-services/search-filter.component.md). | [Source](../../lib/content-services/search/components/search-filter/search-filter.service.ts) |
| [Search filter service](search-filter.service.md) | Registers widgets for use with the Search Filter component. | [Source](../../lib/content-services/search/components/search-filter/search-filter.service.ts) |
| [Search query builder service](search-query-builder.service.md) | Stores information from all the custom search and faceted search widgets, compiles and runs the final search query. | [Source](../../lib/content-services/search/search-query-builder.service.ts) |
| [Rating service](rating.service.md) | Manages ratings for items in Content Services. | [Source](../../lib/content-services/social/services/rating.service.ts) |
| [Tag service](tag.service.md) | Manages tags in Content Services. | [Source](../../lib/content-services/tag/services/tag.service.ts) |
@ -88,4 +88,4 @@ for more information about installing and using the source code.
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [Search Widget interface](search-widget.interface.md) | Specifies required properties for [Search filter component](../content-services/search-filter.component.md) widgets. | [Source](../../lib/content-services/search/search-widget.interface.ts) |
| [Search Widget interface](search-widget.interface.md) | Specifies required properties for Search filter component widgets. | [Source](../../lib/content-services/search/search-widget.interface.ts) |

6
docs/content-services/permission-list.component.md
View File

@ -17,8 +17,10 @@ Shows node permissions as a table.
</adf-permission-list>
```
If permissions list is empty, `No permissions` text is displayed,
or custom template can be added:
### [Transclusions](../user-guide/transclusion.md)
When the list is empty, the contents will simply say "No permissions" by default,
but you can also supply your own content:
```html
<adf-permission-list [nodeId]="nodeId">

33
docs/content-services/search-control.component.md
View File

@ -20,6 +20,21 @@ Displays a input text which shows find-as-you-type suggestions.
</adf-search-control>
```
### [Transclusions](../user-guide/transclusion.md)
You can show your own custom template when no results are found for the search:
```html
<adf-search-control [highlight]="true"
(optionClicked)="onItemClicked($event)"
(submit)="onSearchSubmit($event)">
<adf-empty-search-result>
<!-- YOUR CUSTOM TEMPLATE HERE -->
<span>YOUR CUSTOM MESSAGE</span>
</adf-empty-search-result>
</adf-search-control>
```
## Class members
### Properties
@ -53,21 +68,3 @@ Below is an example of a component that uses the search control. In this example
(submit)="onSearchSubmit($event)">
</adf-search-control>
```
### Customizable template for no result
You can show your own custom template when no results are found for the search:
```html
<adf-search-control [highlight]="true"
(optionClicked)="onItemClicked($event)"
(submit)="onSearchSubmit($event)">
<adf-empty-search-result>
<!-- YOUR CUSTOM TEMPLATE HERE -->
<span>YOUR CUSTOM MESSAGE</span>
</adf-empty-search-result>
</adf-search-control>
```
Place the `adf-empty-search-result` tag inside the `adf-search-control` and then within it, put
whatever content you want to show for an "empty" result.

24
docs/content-services/upload-drag-area.component.md
View File

@ -8,6 +8,17 @@ Last reviewed: 2018-08-07
Adds a drag and drop area to upload files to ACS.
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Intercepting uploads](#intercepting-uploads)
- [Example](#example)
## Basic Usage
```html
@ -29,6 +40,19 @@ export class AppComponent {
}
```
### [Transclusions](../user-guide/transclusion.md)
You can supply any content in the `<adf-upload-drag-area>` to display
as the drag/drop target:
```html
<adf-upload-drag-area (success)="onSuccess($event)">
<div style="width: 200px; height: 100px; border: 1px solid #888888">
DRAG HERE
</div>
</adf-upload-drag-area>
```
## Class members
### Properties

34
docs/core/README.md
View File

@ -11,8 +11,8 @@ for more information about installing and using the source code.
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [About component](about.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | This component allow you to have a general overview of the version of ADF installed and the status of the [Content service](../core/content.service.md) and [Process service](../process-services/process.service.md). | [Source](../../lib/core/about/about.component.ts) |
| [Buttons menu component](buttons-menu.component.md) | Displays buttons on a responsive menu. | [Source](../../lib/core/buttons-menu/buttons-menu.component.ts) |
| [About component](about.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | This component allow you to have a general overview of the version of ADF installed and the status of the Content service and Process service. | [Source](../../lib/core/about/about.component.ts) |
| [Buttons menu component](buttons-menu.component.md) | Displays buttons on a responsive menu. | [Source](../../lib/core/buttons-menu/buttons-menu.component.ts) |
| [Card view component](card-view.component.md) | Displays a configurable property list renderer. | [Source](../../lib/core/card-view/components/card-view/card-view.component.ts) |
| [Accordion group component](accordion-group.component.md) | Adds a collapsible panel to an accordion menu. | [Source](../../lib/core/collapsable/accordion-group.component.ts) |
| [Accordion component](accordion.component.md) | Creates a collapsible accordion menu. | [Source](../../lib/core/collapsable/accordion.component.ts) |
@ -20,25 +20,27 @@ for more information about installing and using the source code.
| [Comments component](comments.component.md) | Displays comments from users involved in a specified task or content and allows an involved user to add a comment to a task or a content. | [Source](../../lib/core/comments/comments.component.ts) |
| [Data column component](data-column.component.md) | Defines column properties for DataTable, Tasklist, Document List and other components. | [Source](../../lib/core/data-column/data-column.component.ts) |
| [Datatable component](datatable.component.md) | Displays data as a table with customizable columns and presentation. | [Source](../../lib/core/datatable/components/datatable/datatable.component.ts) |
| [Empty list component](empty-list.component.md) | Displays a message indicating that a list is empty. | [Source](../../lib/core/datatable/components/datatable/empty-list.component.ts) |
| [Form field component](form-field.component.md) | A form field in an APS form. | [Source](../../lib/core/form/components/form-field/form-field.component.ts) |
| [Form list component](form-list.component.md) | Shows APS forms as a list. | [Source](../../lib/core/form/components/form-list.component.ts) |
| [Form component](form.component.md) | Shows a [`Form`](../../lib/process-services/task-list/models/form.model.ts) from APS | [Source](../../lib/core/form/components/form.component.ts) |
| [Start form component](start-form.component.md) | Displays the Start [`Form`](../../lib/process-services/task-list/models/form.model.ts) for a process. | [Source](../../lib/core/form/components/start-form.component.ts) |
| [Form component](form.component.md) | Shows a Form from APS | [Source](../../lib/core/form/components/form.component.ts) |
| [Start form component](start-form.component.md) | Displays the Start Form for a process. | [Source](../../lib/core/form/components/start-form.component.ts) |
| [Text mask component](text-mask.component.md) | Implements text field input masks. | [Source](../../lib/core/form/components/widgets/text/text-mask.component.ts) |
| [Info drawer layout component](info-drawer-layout.component.md) | Displays a sidebar-style information panel. | [Source](../../lib/core/info-drawer/info-drawer-layout.component.ts) |
| [Info drawer component](info-drawer.component.md) | Displays a sidebar-style information panel with tabs. | [Source](../../lib/core/info-drawer/info-drawer.component.ts) |
| [Language menu component](language-menu.component.md) | Displays all the languages that are present in the "app.config.json" or the default one (EN). | [Source](../../lib/core/language-menu/language-menu.component.ts) |
| [Login component](login.component.md) | Authenticates to Alfresco Content Services and Alfresco Process Services. | [Source](../../lib/core/login/components/login.component.ts) |
| [Header component](header.component.md) ![Experimental](../docassets/images/ExperimentalIcon.png) | Reusable header for Alfresco applications. | [Source](../../lib/core/layout/components/header/header.component.ts) |
| [Sidebar action menu component](sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../../lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts) |
| [Sidenav layout component](sidenav-layout.component.md) | Displays the standard three-region ADF application layout. | [Source](../../lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts) |
| [Login component](login.component.md) | Authenticates to Alfresco Content Services and or Alfresco Process Services. | [Source](../../lib/core/login/components/login.component.ts) |
| [Infinite pagination component](infinite-pagination.component.md) | Adds "infinite" pagination to the component it is used with. | [Source](../../lib/core/pagination/infinite-pagination.component.ts) |
| [Pagination component](pagination.component.md) | Adds pagination to the component it is used with. | [Source](../../lib/core/pagination/pagination.component.ts) |
| [Host settings component](host-settings.component.md) ![Internal](../docassets/images/InternalIcon.png) | Validates the URLs for ACS and APS and saves them in the user's local storage | [Source](../../lib/core/settings/host-settings.component.ts) |
| [Sidebar action menu component](sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../../lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts) |
| [Sidenav layout component](sidenav-layout.component.md) | Displays the standard three-region ADF application layout. | [Source](../../lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts) |
| [Sorting picker component](sorting-picker.component.md) | Selects from a set of predefined sorting definitions and directions. | [Source](../../lib/core/sorting-picker/sorting-picker.component.ts) |
| [Empty content component](empty-content.component.md) | Provides a generic "Empty Content" placeholder for components. | [Source](../../lib/core/templates/empty-content/empty-content.component.ts) |
| [Error content component](error-content.component.md) | Displays info about a specific error. | [Source](../../lib/core/templates/error-content/error-content.component.ts) |
| [Toolbar divider component](toolbar-divider.component.md) | Divides groups of elements in a Toolbar with a visual separator. | [Source](../../lib/core/toolbar/toolbar-divider.component.ts) |
| [Toolbar title component](toolbar-title.component.md) | Supplies custom HTML to be included in a [Toolbar component](../core/toolbar.component.md) title. | [Source](../../lib/core/toolbar/toolbar-title.component.ts) |
| [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) | Displays content from an ACS repository. | [Source](../../lib/core/viewer/components/viewer.component.ts) |
@ -60,7 +62,7 @@ for more information about installing and using the source code.
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [Form field model](form-field.model.md) | Contains the value and metadata for a field of a [`Form`](../../lib/process-services/task-list/models/form.model.ts) component. | [Source](../../lib/core/form/components/widgets/core/form-field.model.ts) |
| [Form field model](form-field.model.md) | Contains the value and metadata for a field of a Form component. | [Source](../../lib/core/form/components/widgets/core/form-field.model.ts) |
| [Comment process model](comment-process.model.md) | Represents a comment added to a Process Services task or process instance. | [Source](../../lib/core/models/comment-process.model.ts) |
| [Product version model](product-version.model.md) | Contains version and license information classes for Alfresco products. | [Source](../../lib/core/models/product-version.model.ts) |
| [User process model](user-process.model.md) | Represents a Process Services user. | [Source](../../lib/core/models/user-process.model.ts) |
@ -76,18 +78,18 @@ for more information about installing and using the source code.
| [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`](../core/user-process.model.md) object and extracts and formats the initials. | [Source](../../lib/core/pipes/user-initial.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) |
## Services
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [Card item types service](card-item-types.service.md) | Maps type names to field component types for the [Card View component](../core/card-view.component.md). | [Source](../../lib/core/card-view/services/card-item-types.service.ts) |
| [Card view update service](card-view-update.service.md) | Reports edits and clicks within fields of a [Card View component](../core/card-view.component.md). | [Source](../../lib/core/card-view/services/card-view-update.service.ts) |
| [Card item types service](card-item-types.service.md) | Maps type names to field component types for the Card View component. | [Source](../../lib/core/card-view/services/card-item-types.service.ts) |
| [Card view update service](card-view-update.service.md) | Reports edits and clicks within fields of a Card View component. | [Source](../../lib/core/card-view/services/card-view-update.service.ts) |
| [Activiti alfresco service](activiti-alfresco.service.md) | Gets Alfresco Repository folder content based on a Repository account configured in Alfresco Process Services (APS). | [Source](../../lib/core/form/services/activiti-alfresco.service.ts) |
| [Form rendering service](form-rendering.service.md) | Maps an APS form field type string onto the corresponding form [widget component](../insights/widget.component.md) type. | [Source](../../lib/core/form/services/form-rendering.service.ts) |
| [Form rendering service](form-rendering.service.md) | Maps an APS form field type string onto the corresponding form widget component type. | [Source](../../lib/core/form/services/form-rendering.service.ts) |
| [Form service](form.service.md) | Implements Process Services form methods | [Source](../../lib/core/form/services/form.service.ts) |
| [Node service](node.service.md) | Gets Alfresco Repository node metadata and creates nodes with metadata. | [Source](../../lib/core/form/services/node.service.ts) |
| [Node service](node.service.md) | Gets Alfresco Repository node metadata and creates nodes with metadata. | [Source](../../lib/core/form/services/node.service.ts) |
| [Process content service](process-content.service.md) | Manipulates content related to a Process Instance or Task Instance in APS. | [Source](../../lib/core/form/services/process-content.service.ts) |
| [Alfresco api service](alfresco-api.service.md) | Provides access to an initialized **AlfrescoJSApi** instance. | [Source](../../lib/core/services/alfresco-api.service.ts) |
| [Apps process service](apps-process.service.md) | Gets details of the Process Services apps that are deployed for the user. | [Source](../../lib/core/services/apps-process.service.ts) |
@ -107,7 +109,7 @@ for more information about installing and using the source code.
| [Nodes api service](nodes-api.service.md) | Accesses and manipulates ACS document nodes using their node IDs. | [Source](../../lib/core/services/nodes-api.service.ts) |
| [Notification service](notification.service.md) | Shows a notification message with optional feedback. | [Source](../../lib/core/services/notification.service.ts) |
| [Page title service](page-title.service.md) | Sets the page title. | [Source](../../lib/core/services/page-title.service.ts) |
| [People content service](people-content.service.md) | Gets information about a Content Services user. | [Source](../../lib/core/services/people-content.service.ts) |
| [People content service](people-content.service.md) | Gets information about a Content Services user. | [Source](../../lib/core/services/people-content.service.ts) |
| [People process service](people-process.service.md) | Gets information about Process Services users. | [Source](../../lib/core/services/people-process.service.ts) |
| [Renditions service](renditions.service.md) ![Deprecated](../docassets/images/DeprecatedIcon.png) | Manages prearranged conversions of content to different formats. | [Source](../../lib/core/services/renditions.service.ts) |
| [Search configuration service](search-configuration.service.md) | Provides fine control of parameters to a search. | [Source](../../lib/core/services/search-configuration.service.ts) |
@ -134,5 +136,5 @@ for more information about installing and using the source code.
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [Data Table Adapter interface](datatable-adapter.interface.md) | Defines how table data is supplied to DataTable and Tasklist components. | [Source](../../lib/core/datatable/data/datatable-adapter.ts) |
| [Form Field Validator interface](form-field-validator.interface.md) | Defines how the input fields of [`Form`](../../lib/process-services/task-list/models/form.model.ts) and Task Details components are validated. | [Source](../../lib/core/form/components/widgets/core/form-field-validator.ts) |
| [Form Field Validator interface](form-field-validator.interface.md) | Defines how the input fields of Form and Task Details components are validated. | [Source](../../lib/core/form/components/widgets/core/form-field-validator.ts) |
| [Search Configuration interface](search-configuration.interface.md) | Provides fine control of parameters to a search. | [Source](../../lib/core/services/search-configuration.service.ts) |

5
docs/core/accordion-group.component.md
View File

@ -35,6 +35,11 @@ export class MyComponent implements OnInit {
}
```
### [Transclusions](../user-guide/transclusion.md)
Any content can be trancluded inside this component, since its purpose is to
define a section in a surrounding [Accordion component](accordion.component.md).
## Class members
### Properties

9
docs/core/accordion.component.md
View File

@ -35,14 +35,19 @@ export class MyComponent implements OnInit {
}
```
### [Transclusions](../user-guide/transclusion.md)
Content for the accordion menu is transcluded within one or more
[Accordion group components](accordion-group.component.md)
## Details
An accordion menu contains several panels of content, only one of which is visible at any time. The
hidden panels are collapsed down to just the title and pushed together (like the bellows of an accordion)
while the visible panel fills the remaining space in the menu.
Use one or more [Accordion Group](accordion-group.component.md) subcomponents to define the panels and set their
properties (title, selection status, etc).
Use one or more [Accordion Group](accordion-group.component.md) subcomponents to transclude the content
for the panels and set their properties (title, selection status, etc).
### Example

7
docs/core/buttons-menu.component.md
View File

@ -12,12 +12,14 @@ Displays buttons on a responsive menu.
## Basic Usage
### [Transclusions](../user-guide/transclusion.md)
Place the buttons for the menu inside this component's HTML tags.
They must use the following structure:
```html
<adf-buttons-action-menu>
<button mat-menu-item (click)="showSettings()">
<button mat-menu-item (click)="showSettings()">
<mat-icon>settings</mat-icon><span>Settings</span>
</button>
<button mat-menu-item (click)="delete()">
@ -26,7 +28,8 @@ They must use the following structure:
</adf-buttons-action-menu>
```
Notice that the buttons have an icon and a label for the button inside a `<span>` tag.
Note that the buttons themselves also have an icon (supplied as a `<mat-icon`)
and a label (supplied as a `<span>`).
They also make use of the Angular material directive `mat-menu-item`.
```html

160
docs/core/datatable.component.md
View File

@ -16,6 +16,7 @@ See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/
- [Basic usage](#basic-usage)
- [Setting the rows and column schema](#setting-the-rows-and-column-schema)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
@ -24,8 +25,6 @@ See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/
- [Customizing columns](#customizing-columns)
- [DataTable DOM Events](#datatable-dom-events)
- [Card view](#card-view)
- [Custom Empty content template](#custom-empty-content-template)
- [Loading content template](#loading-content-template)
- [Using events](#using-events)
- [See also](#see-also)
@ -245,6 +244,63 @@ export class DataTableDemo {
</adf-datatable>
```
### [Transclusions](../user-guide/transclusion.md)
You can add [Data column component](data-column.component.md) instances to define columns for the
table as described in the usage examples and the [Customizing columns](#customizing-columns) section.
You can also supply a `<no-content-template>` or an
[Empty list component](empty-list-component.md) sub-component to show when the table is empty:
```html
<adf-datatable ...>
<no-content-template>
<!--Add your custom empty template here-->
<ng-template>
<h1>Sorry, no content</h1>
</ng-template>
</no-content-template>
</adf-datatable>
```
```html
<adf-datatable ...>
<adf-empty-list>
<adf-empty-list-header>"'My custom Header'"</adf-empty-list-header>
<adf-empty-list-body>"'My custom body'"</adf-empty-list-body>
<adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer>
<ng-content>"'HTML Layout'"</ng-content>
</adf-empty-list>
</adf-datatable>
```
Another useful transclusion is the `<loading-content-template>`, which is shown
while the data for the table is loading:
```html
<adf-datatable ...>
<loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<mat-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</mat-progress-spinner>
</ng-template>
</loading-content-template>
</adf-datatable>
```
```js
isLoading(): boolean {
//your custom logic to identify if you are in a loading state
}
```
Note that you can use both the `<no-content-template>` and the `<loading-content-template>`
together in the same datatable.
## Class members
### Properties
@ -340,106 +396,6 @@ Set the `display` property to "gallery" to enable Card View mode:
![card-view](../docassets/images/document-list-card-view.png)
### Custom Empty content template
You can add a template that will be shown when there are no rows in your datatable:
```html
<adf-datatable
[data]="data"
[actions]="contentActions"
[multiselect]="multiselect"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<no-content-template>
<!--Add your custom empty template here-->
<ng-template>
<h1>Sorry, no content</h1>
</ng-template>
</no-content-template>
</adf-datatable>
```
You can use the [empty list component](../../lib/core/datatable/components/datatable/empty-list.component.ts) to show the default ADF empty template.
You can place any HTML layout or Angular component as content in the empty template section
by using the `<adf-empty-list-header>`, `<adf-empty-list-body>`, and `<adf-empty-list-footer>`
elements:
```html
<adf-datatable
[data]="data"
[actions]="contentActions"
[multiselect]="multiselect"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<adf-empty-list>
<adf-empty-list-header>"'My custom Header'"</adf-empty-list-header>
<adf-empty-list-body>"'My custom body'"</adf-empty-list-body>
<adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer>
<ng-content>"'HTML Layout'"</ng-content>
</adf-empty-list>
</adf-datatable>
```
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| emptyListImageUrl | String | empty_doc_lib.svg | The default image used as the background |
| emptyMsg | String | This list is empty | The default title message |
| dragDropMsg | String | Drag and drop | The default drag and drop message |
| additionalMsg | String | Drag and drop | The default additional message |
![](../docassets/images/adf-empty-list.png)
### Loading content template
You can add a template to be shown while your data is loading:
```html
<adf-datatable
[data]="data"
[actions]="contentActions"
[multiselect]="multiselect"
[loading]=isLoading()"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<mat-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</mat-progress-spinner>
</ng-template>
</loading-content-template>
</adf-datatable>
```
```js
isLoading(): boolean {
//your custom logic to identify if you are in a loading state
}
```
Note: the `<loading-content-template>` and `<no-content-template>` can be used together.
### Using events
#### row-keyup DOM event

59
docs/core/empty-list.component.md Normal file
View File

@ -0,0 +1,59 @@
---
Added: v2.0.0
Status: Active
---
# Empty list component
Displays a message indicating that a list is empty.
![](../docassets/images/adf-empty-list.png)
## Basic Usage
```html
<adf-datatable ...>
<adf-empty-list>
<adf-empty-list-header>"'My custom Header'"</adf-empty-list-header>
<adf-empty-list-body>"'My custom body'"</adf-empty-list-body>
<adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer>
<ng-content>"'HTML Layout'"</ng-content>
</adf-empty-list>
</adf-datatable>
```
### [Transclusions](../user-guide/transclusion.md)
You can supply a custom header, body, and footer for an empty list using special
sub-components:
```html
<adf-empty-list>
<adf-empty-list-header>"'My custom Header'"</adf-empty-list-header>
<adf-empty-list-body>"'My custom body'"</adf-empty-list-body>
<adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer>
<ng-content>"'HTML Layout'"</ng-content>
</adf-empty-list>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------- | ----------- |
| emptyListImageUrl | `string` | "empty_doc_lib.svg" | The default image used as the background |
| emptyMsg | `string` | "This list is empty" | The default title message |
| dragDropMsg | `string` | "Drag and drop" | The default drag and drop message |
| additionalMsg | `string` | "Drag and drop" | The default additional message |
## Details
This component provides a custom display to show when a [Datatable component](datatable.component.md) has
no content.
## See also
- [Datatable component](datatable.component.md)

30
docs/core/form.component.md
View File

@ -13,12 +13,12 @@ Shows a [`Form`](../../lib/process-services/task-list/models/form.model.ts) from
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Displaying a form](#displaying-a-form)
- [Custom empty form template](#custom-empty-form-template)
- [Controlling outcome execution behaviour](#controlling-outcome-execution-behaviour)
- [Field Validators](#field-validators)
- [Common scenarios](#common-scenarios)
@ -32,6 +32,20 @@ Shows a [`Form`](../../lib/process-services/task-list/models/form.model.ts) from
</adf-form>
```
### [Transclusions](../user-guide/transclusion.md)
Any content in the body of `<adf-form>` will be shown when no form definition is found:
```html
<adf-form .... >
<div empty-form >
<h2>Empty form</h2>
</div>
</adf-form>
```
## Class members
### Properties
@ -164,20 +178,6 @@ The `nameNode` parameter is optional.
Here, the node metadata is shown in an APS [Form,](../../lib/process-services/task-list/models/form.model.ts)
with the form fields themselves saved as metadata. The `nameNode` parameter is optional.
### Custom empty form template
You can add a template that will be shown when no form definition is found:
```html
<adf-form .... >
<div empty-form >
<h2>Empty form</h2>
</div>
</adf-form>
```
### Controlling outcome execution behaviour
In unusual circumstances, you may need to take complete control of form outcome execution.

21
docs/core/header.component.md
View File

@ -6,7 +6,7 @@ Last reviewed: 2018-08-07
# Header component
Reusable header for Alfresco applications
Reusable header for Alfresco applications.
## Basic usage
@ -17,11 +17,21 @@ Reusable header for Alfresco applications
[redirectUrl]="'/home'"
color="primary"
(toggled)=toggleMenu($event)>
.......
</adf-layout-header>
```
### [Transclusions](../user-guide/transclusion.md)
The right-hand side of the header has free-form content that you supply in the
body of the element:
```html
<adf-layout-header>
<div>Optional content for right-hand side</div>
</adf-layout-header>
```
## Class members
### Properties
@ -44,6 +54,5 @@ Reusable header for Alfresco applications
## Details
This component displays a customizable header that can be reused. Use the input properties to
configure the left side (title, button) and the primary color of the header.
The right part of the header can contain other components which are transcluded in the header component.
configure the left side (title, button) and the primary color of the header. The right part of the
header can contain other components which are transcluded in the header component.

19
docs/core/info-drawer-layout.component.md
View File

@ -12,6 +12,15 @@ Displays a sidebar-style information panel.
## Basic usage
### [Transclusions](../user-guide/transclusion.md)
There are three regions where you can add your own content using `<div>` elements
with the following names:
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
```html
<adf-info-drawer-layout>
<div info-drawer-title>File info</div>
@ -30,15 +39,9 @@ Displays a sidebar-style information panel.
## Details
As the name suggests, this is basically just a layout with CSS styling. There are three
regions where you can add your own content, as shown in the example:
As the name suggests, this is basically just a layout with CSS styling.
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
See the [Info drawer layout component](../core/info-drawer-layout.component.md) for an alternative approach that uses tabs to
structure the content of the info drawer.
See the [Info drawer layout component](../core/info-drawer-layout.component.md) for an alternative approach that uses tabs to structure the content of the info drawer.
## See also

14
docs/core/info-drawer.component.md
View File

@ -12,6 +12,18 @@ Displays a sidebar-style information panel with tabs.
## Basic usage
### [Transclusions](../user-guide/transclusion.md)
There are three regions where you can add your own content using `<div>` elements
with the following names (as with the [Info drawer layout component](info-drawer-layout.component.md)):
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
The tabs are added using one or more `<adf-info-drawer-tab>` elements, which can
have any content you like:
```html
<adf-info-drawer title="Activities" (currentTab)="getActiveTab($event)">
<div info-drawer-buttons>
@ -49,8 +61,6 @@ Displays a sidebar-style information panel with tabs.
This is a variant of the [Info Drawer Layout component](info-drawer-layout.component.md) that displays information in tabs. You can use the Info drawer tab subcomponent to add tabs (as shown in the example) and the `currentTab` output property to select the currently active tab.
You can also customize the three regions (title, buttons and content) as with the [Info Drawer Layout component](../core/info-drawer-layout.component.md).
## See also
- [Info drawer layout component](info-drawer-layout.component.md)

76
docs/core/login.component.md
View File

@ -8,17 +8,17 @@ Last reviewed: 2018-08-07
Authenticates to Alfresco Content Services and or Alfresco Process Services.
![Login component](../docassets/images/custom-footer.png)
![Login component](../docassets/images/login-extra-content.png)
## Contents
- [Basic usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Handling events](#handling-events)
- [Changing content](#changing-content)
- [Custom logo and background](#custom-logo-and-background)
- [Customizing validation rules](#customizing-validation-rules)
- [Call an external identity provider to fetch the auth token](#call-an-external-identity-provider-to-fetch-the-auth-token)
@ -34,6 +34,41 @@ Authenticates to Alfresco Content Services and or Alfresco Process Services.
</adf-login>
```
### [Transclusions](../user-guide/transclusion.md)
You can replace the content of the header and footer of the [Login component](../core/login.component.md) with your own custom content:
```html
<adf-login ...>
<login-header><ng-template>My custom HTML for the header</ng-template></login-header>
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer>
</adf-login>`
```
Header:
![Login with custom header](../docassets/images/custom-header.png)
Footer:
![Login with custom footer](../docassets/images/custom-footer.png)
Also, any content that you put inside the `<adf-login>` tags will be rendered as part
of the Login dialog:
```html
<adf-login ...>
<div>
<div><!-- Custom content goes here --></div>
</div>
</adf-login>
```
This is useful if you need to extend the functionality of the dialog
with custom input fields handled by your application or parent component:
![Login with custom content](../docassets/images/login-extra-content.png)
## Class members
### Properties
@ -88,43 +123,6 @@ export class AppComponent {
}
```
### Changing content
You can replace the content of the header and footer of the [Login component](../core/login.component.md) with
your own custom content, as shown in the examples below:
```html
<adf-login ...>
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer>
</adf-login>`
```
![Login with custom footer](../docassets/images/custom-footer.png)
```html
<adf-login ...>
<login-header><ng-template>My custom HTML for the header</ng-template></login-header>
</adf-login>`
```
![Login with custom header](../docassets/images/custom-header.png)
Also, any content that you put inside the &lt;adf-login> tags will be rendered as part
of the Login dialog:
```html
<adf-login ...>
<div>
<div>Your extra content</div>
</div>
</adf-login>
```
This is useful if you need to extend the functionality of the dialog
with custom input fields handled by your application or parent component:
![Login with custom content](../docassets/images/login-extra-content.png)
### Custom logo and background
You can change the logo and background images using the `backgroundImageUrl` and

15
docs/core/sidebar-action-menu.component.md
View File

@ -12,6 +12,15 @@ Displays a sidebar-action menu information panel.
## Basic usage
### [Transclusions](../user-guide/transclusion.md)
There are three regions where you can add your own content in `<div>` elements with
the following names:
- sidebar-menu-title-icon
- sidebar-menu-options
- sidebar-menu-expand-icon
```html
<adf-sidebar-action-menu>
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
@ -39,8 +48,4 @@ Displays a sidebar-action menu information panel.
## Details
As the name suggests, this is basically just a layout with CSS styling. There are three regions where you can add your own content, as shown in the example:
- sidebar-menu-title-icon
- sidebar-menu-options
- sidebar-menu-expand-icon
As the name suggests, this is basically just a layout with CSS styling.

6
docs/core/sidenav-layout.component.md
View File

@ -13,6 +13,7 @@ Displays the standard three-region ADF application layout.
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
@ -23,6 +24,11 @@ Displays the standard three-region ADF application layout.
## Basic Usage
### [Transclusions](../user-guide/transclusion.md)
The content for the header, navigation area, and main content are transcluded using three special
sub-components (note the use of `<ng-template>` in the sub-components' body sections):
```html
<adf-sidenav-layout
[sidenavMin]="70"

86
docs/core/toolbar.component.md
View File

@ -13,12 +13,10 @@ Simple container for headers, titles, actions and breadcrumbs.
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Details](#details)
- [Custom title](#custom-title)
- [Divider](#divider)
- [Spacer](#spacer)
- [Dropdown menu](#dropdown-menu)
- [Custom color](#custom-color)
- [See also](#see-also)
@ -36,6 +34,39 @@ Simple container for headers, titles, actions and breadcrumbs.
</adf-toolbar>
```
### [Transclusions](../user-guide/transclusion.md)
You can set the title content using an `<adf-toolbar-title>` element (although
you can also set a simple textual title with the `title` attribute).
All other content in the toolbar is free-form but you can use one or more
`<adf-toolbar-divider>` elements between your own elements to add a visual
separator. Also, any content following a `<div>` element with the CSS class
`adf-toolbar--spacer` will be pushed across to the right-hand side of the
toolbar:
```html
<adf-toolbar>
<adf-toolbar-title>
<adf-breadcrumb ...></adf-breadcrumb>
</adf-toolbar-title>
<adf-toolbar-divider></adf-toolbar-divider>
<button></button>
<button></button>
<div class="adf-toolbar--spacer"></div>
<button></button>
</adf-toolbar>
```
For example, the image below shows a toolbar with a
[Breadcrumb component](../content-services/breadcrumb.component.md) title, and then some buttons
pushed to the right by a spacer:
![](../docassets/images/adf-toolbar-02.png)
## Class members
### Properties
@ -47,55 +78,6 @@ Simple container for headers, titles, actions and breadcrumbs.
## Details
### Custom title
You can use any HTML layout or Angular component as the content of the title section by
using the `<adf-toolbar-title>` subcomponent instead of the "title" attribute:
```html
<adf-toolbar>
<adf-toolbar-title>
<adf-breadcrumb ...></adf-breadcrumb>
</adf-toolbar-title>
...
</adf-toolbar>
```
![](../docassets/images/adf-toolbar-02.png)
### Divider
You can divide groups of elements with a visual separator `<adf-toolbar-divider>`:
```html
<adf-toolbar>
<button></button>
<button></button>
<adf-toolbar-divider></adf-toolbar-divider>
<button></button>
</adf-toolbar>
```
### Spacer
You can split the toolbar into separate sections at the left and right of the screen
with the `adf-toolbar--spacer` CSS class. In the following example, the toolbar title
element is rendered to the left but all the buttons are pushed to the right side:
```html
<adf-toolbar>
<adf-toolbar-title>
...
<adf-toolbar-title>
<div class="adf-toolbar--spacer"></div>
<button></button>
<adf-toolbar-divider></adf-toolbar-divider>
<button></button>
</adf-toolbar>
```
### Dropdown menu
The following example shows how to create a dropdown menu. The code is based

330
docs/core/viewer.component.md
View File

@ -13,6 +13,7 @@ See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
## Contents
- [Basic usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
@ -23,13 +24,8 @@ See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
- [Supported file formats](#supported-file-formats)
- [Content Renditions](#content-renditions)
- [Configuring PDF.js library](#configuring-pdfjs-library)
- [Custom toolbar](#custom-toolbar)
- [Custom toolbar buttons](#custom-toolbar-buttons)
- [Custom sidebar](#custom-sidebar)
- [Custom thumbnails](#custom-thumbnails)
- [Custom "Open With" menu](#custom-open-with-menu)
- [Custom "More actions" menu](#custom-more-actions-menu)
- [Extending the Viewer](#extending-the-viewer)
- [Custom layout](#custom-layout)
- [See also](#see-also)
## Basic usage
@ -66,6 +62,12 @@ Note that if you have a URL which contains a shared link ID, you should extract
ID portion and use it with the `sharedLinkId` property rather than using the whole
URL with `urlFile`.
### [Transclusions](../user-guide/transclusion.md)
The [Viewer component](../core/viewer.component.md) lets you transclude content for the toolbar (and toolbar buttons),
the sidebar, thumbnails, and the "Open with" and "More actions" menus.
See the [Custom layout](#custom-layout) section for full details of all available tranclusions.
## Class members
### Properties
@ -261,164 +263,6 @@ new CopyWebpackPlugin([
The [Viewer component](../core/viewer.component.md) now should be able to display PDF files.
### Custom toolbar
You can replace the standard viewer toolbar with your own custom implementation:
```html
<adf-viewer>
<adf-viewer-toolbar>
<h1>toolbar</h1>
</adf-viewer-toolbar>
</adf-viewer>
```
Everything you put inside the "adf-viewer-toolbar" tags will be rendered instead of the
standard toolbar.
### Custom toolbar buttons
If you are happy with the custom toolbar's behaviour but want to add some extra buttons
then you can do so as shown in the following example:
```html
<adf-viewer>
<adf-viewer-toolbar-actions>
<button mat-icon-button>
<mat-icon>alarm</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>backup</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>bug_report</mat-icon>
</button>
</adf-viewer-toolbar-actions>
</adf-viewer>
```
The result should look like this:
![Custom Toolbar Actions](../docassets/images/viewer-toolbar-actions.png)
### Custom sidebar
The [Viewer component](../core/viewer.component.md) also supports custom sidebar components and layouts.
Set the `allowSidebar` property to `true` to enable this feature.
The custom sidebar can be injected in two different ways:
- using transclusion
- using a template **(only works when using the viewer with fileNodeId)**
#### Using transclusion
```html
<adf-viewer [allowSidebar]="true">
<adf-viewer-sidebar>
<h1>My info</h1>
</adf-viewer-sidebar>
</adf-viewer>
```
Everything you put inside the "adf-viewer-sidebar" tags will be rendered.
#### Using template injection (only works when using the viewer with fileNodeId)
```html
<ng-template let-node="node" #sidebarTemplate>
<adf-content-metadata-card [node]="node"></adf-content-metadata-card>
</ng-template>
<adf-viewer [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate"></adf-viewer>
```
### Custom thumbnails
The PDF viewer comes with its own default list of thumbnails but you can replace this
by providing a custom template and binding to the context property `viewer` to access the PDFJS.PDFViewer
instance.
![PDF thumbnails](../docassets/images/pdf-thumbnails.png)
#### Using template injection
```javascript
import { Component, Input } from '@angular/core';
@Component({
selector: 'custom-thumbnails',
template: '<p> Custom Thumbnails Component </p>'
})
export class CustomThumbnailsComponent {
@Input() pdfViewer: any;
...
}
```
```html
<ng-template #customThumbnailsTemplate let-pdfViewer="viewer">
<custom-thumbnails [pdfViewer]="pdfViewer"></custom-thumbnails>
</ng-template>
<adf-viewer [thumbnailsTemplate]="customThumbnailsTemplate"></adf-viewer>
```
### Custom "Open With" menu
You can enable a custom "Open With" menu by providing at least one action inside the
`adf-viewer-open-with` tag:
```html
<adf-viewer [fileNodeId]="nodeId">
<adf-viewer-open-with>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Option 1</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Option 2</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Option 3</span>
</button>
</adf-viewer-open-with>
</adf-viewer>
```
![Open with](../docassets/images/viewer-open-with.png)
### Custom "More actions" menu
You can enable a custom "More actions" menu by providing at least one action inside the `adf-viewer-more-actions` tag:
```html
<adf-viewer [fileNodeId]="nodeId">
<adf-viewer-more-actions>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Action One</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Action Two</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Action Three</span>
</button>
</adf-viewer-more-actions>
</adv-viewer>
```
![More actions](../docassets/images/viewer-more-actions.png)
### Extending the Viewer
You can define your own custom handle to handle other file formats that are not yet supported by
@ -465,6 +309,164 @@ You can define multiple `adf-viewer-extension` templates if required:
</adf-viewer>
```
### Custom layout
The [Viewer component](../core/viewer.component.md) lets you transclude custom content in several different places as
explained in the sections below.
#### Custom toolbar
You can replace the standard viewer toolbar with your own custom implementation:
```html
<adf-viewer>
<adf-viewer-toolbar>
<h1>toolbar</h1>
</adf-viewer-toolbar>
</adf-viewer>
```
Everything you put inside the "adf-viewer-toolbar" tags will be rendered instead of the
standard toolbar.
#### Custom toolbar buttons
If you are happy with the custom toolbar's behaviour but want to add some extra buttons
then you can do so as shown in the following example:
```html
<adf-viewer>
<adf-viewer-toolbar-actions>
<button mat-icon-button>
<mat-icon>alarm</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>backup</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>bug_report</mat-icon>
</button>
</adf-viewer-toolbar-actions>
</adf-viewer>
```
The result should look like this:
![Custom Toolbar Actions](../docassets/images/viewer-toolbar-actions.png)
#### Custom sidebar
The [Viewer component](../core/viewer.component.md) also supports custom sidebar components and layouts.
Set the `allowSidebar` property to `true` to enable this feature.
The custom sidebar can be injected in two different ways. The first way is to use
transclusion, which will display all content placed inside the `<adf-viewer-sidebar>` element:
```html
<adf-viewer [allowSidebar]="true">
<adf-viewer-sidebar>
<h1>My info</h1>
</adf-viewer-sidebar>
</adf-viewer>
```
The second way to customize the sidebar is to use template injection but note that this only works
when using the viewer with `fileNodeId`.
```html
<ng-template let-node="node" #sidebarTemplate>
<adf-content-metadata-card [node]="node"></adf-content-metadata-card>
</ng-template>
<adf-viewer [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate"></adf-viewer>
```
#### Custom thumbnails
The PDF viewer comes with its own default list of thumbnails but you can replace this
by providing a custom template and binding to the context property `viewer` to access the PDFJS.PDFViewer
instance.
![PDF thumbnails](../docassets/images/pdf-thumbnails.png)
Provide the custom template as in the following example:
```javascript
import { Component, Input } from '@angular/core';
@Component({
selector: 'custom-thumbnails',
template: '<p> Custom Thumbnails Component </p>'
})
export class CustomThumbnailsComponent {
@Input() pdfViewer: any;
...
}
```
```html
<ng-template #customThumbnailsTemplate let-pdfViewer="viewer">
<custom-thumbnails [pdfViewer]="pdfViewer"></custom-thumbnails>
</ng-template>
<adf-viewer [thumbnailsTemplate]="customThumbnailsTemplate"></adf-viewer>
```
#### Custom "Open With" menu
You can enable a custom "Open With" menu by providing at least one action inside the
`adf-viewer-open-with` tag:
```html
<adf-viewer [fileNodeId]="nodeId">
<adf-viewer-open-with>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Option 1</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Option 2</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Option 3</span>
</button>
</adf-viewer-open-with>
</adf-viewer>
```
![Open with](../docassets/images/viewer-open-with.png)
#### Custom "More actions" menu
You can enable a custom "More actions" menu by providing at least one action inside the `adf-viewer-more-actions` tag:
```html
<adf-viewer [fileNodeId]="nodeId">
<adf-viewer-more-actions>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Action One</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Action Two</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Action Three</span>
</button>
</adf-viewer-more-actions>
</adv-viewer>
```
![More actions](../docassets/images/viewer-more-actions.png)
## See also
- [Document List component](../content-services/document-list.component.md)

BIN
docs/docassets/images/custom-footer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/docassets/images/custom-header.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 11 KiB

2
docs/process-services/README.md
View File

@ -33,7 +33,7 @@ for more information about installing and using the source code.
| [Task filters component](task-filters.component.md) | Shows all available filters. | [Source](../../lib/process-services/task-list/components/task-filters.component.ts) |
| [Task header component](task-header.component.md) | Shows all the information related to a task. | [Source](../../lib/process-services/task-list/components/task-header.component.ts) |
| [Task list component](task-list.component.md) | Renders a list containing all the tasks matched by the parameters specified. | [Source](../../lib/process-services/task-list/components/task-list.component.ts) |
| [Task standalone component](task-standalone.component.md) | This component can be used when there is no form attached to a task. | [Source](../../lib/process-services/task-list/components/task-standalone.component.ts) |
| [Task standalone component](task-standalone.component.md) | This component can be used when the task doesn't belong to any processes. | [Source](../../lib/process-services/task-list/components/task-standalone.component.ts) |
## Directives

5
docs/process-services/apps-list.component.md
View File

@ -18,7 +18,10 @@ Shows all available apps.
</adf-apps>
```
You can also show a custom template if there are no apps present:
### [Transclusions](../user-guide/transclusion.md)
You can show custom content when there are no apps available by supplying an
`<adf-empty-custom-content>` section:
```html
<adf-apps

14
docs/process-services/people-search.component.md
View File

@ -13,6 +13,18 @@ Searches users/people.
<adf-people-search></adf-people-search>
```
### [Transclusions](../user-guide/transclusion.md)
You can provide a title for the search header and a label for the action button using
special sub-components in the body of the `<adf-people-search>` element:
```html
<adf-people-search ...>
<header-title>Custom title</header-title>
<action-button-label>Custom label</action-button-label>
</adf-people-search>
```
## Class members
### Properties
@ -41,7 +53,7 @@ Searches users/people.
[results]="peopleSearch$">
<header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
<action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
</adf-people-search>
</adf-people-search>
```
<!-- {% endraw %} -->

25
docs/process-services/process-attachment-list.component.md
View File

@ -36,6 +36,23 @@ export class MyCustomProcessAttachmentComponent {
}
```
### [Transclusions](../user-guide/transclusion.md)
Any content inside the `<adf-process-attachment-list>` element will be shown when
the list is empty:
```html
<adf-process-attachment-list ...>
<div><!-- Custom empty list message goes here --></div>
</adf-process-attachment-list>
```
![custom-no-content-drag-drop-template-sample](../docassets/images/custom-no-content-drag-drop-template.png)
A default template will be used if you don't supply a custom one to override it:
![default-no-content-template-sample](../docassets/images/default-no-content-template.png)
## Class members
### Properties
@ -84,11 +101,3 @@ a custom _no content template_ (using &lt;adf-empty-list>) to invite the user to
```
<!-- {% endraw %} -->
If the List is empty, the custom no-content template we passed is displayed.
![custom-no-content-drag-drop-template-sample](../docassets/images/custom-no-content-drag-drop-template.png)
A default template will be used if you don't supply a custom one to override it:
![default-no-content-template-sample](../docassets/images/default-no-content-template.png)

27
docs/process-services/process-list.component.md
View File

@ -11,13 +11,13 @@ Renders a list containing all the process instances matched by the parameters sp
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Setting Sorting Order for the list](#setting-sorting-order-for-the-list)
- [Pagination strategy](#pagination-strategy)
- [Show custom template when processList is empty](#show-custom-template-when-processlist-is-empty)
- [See also](#see-also)
## Basic Usage
@ -31,6 +31,19 @@ Renders a list containing all the process instances matched by the parameters sp
</adf-process-instance-list>
```
### [Transclusions](../user-guide/transclusion.md)
Any content inside an `<adf-empty-custom-content>` sub-component will be shown
when the process list is empty:
```html
<adf-process-instance-list>
<adf-empty-custom-content>
Your Content
</adf-empty-custom-content>
<adf-process-instance-list>
```
## Class members
### Properties
@ -170,18 +183,6 @@ The Process Instance List also supports pagination:
</adf-pagination>
```
### Show custom template when processList is empty
You can add your own template or message as shown in the example below:
```html
<adf-process-instance-list>
<adf-empty-custom-content>
Your Content
</adf-empty-custom-content>
<adf-process-instance-list>
```
## See also
- [Data column component](../core/data-column.component.md)

25
docs/process-services/task-attachment-list.component.md
View File

@ -19,6 +19,23 @@ Displays attached documents on a specified task.
</adf-task-attachment-list>
```
### [Transclusions](../user-guide/transclusion.md)
Any content inside the `<adf-task-attachment-list>` element will be displayed
when the list is empty:
```html
<adf-task-attachment-list ...>
<div><!-- Custom empty list message goes here --></div>
</adf-task-attachment-list>
```
![custom-no-content-drag-drop-template-sample](../docassets/images/custom-no-content-drag-drop-template.png)
A default "no content" template is displayed if you don't supply one to override it:
![default-no-content-template-sample](../docassets/images/default-no-content-template.png)
## Class members
### Properties
@ -38,10 +55,6 @@ Displays attached documents on a specified task.
## Details
If the List is empty, a default "no content" template is displayed.
![default-no-content-template-sample](../docassets/images/default-no-content-template.png)
### How to Add Drag and Drop Functionality
You can wrap the component with an [Upload Drag Area component](../content-services/upload-drag-area.component.md)
@ -90,7 +103,3 @@ export class MyCustomTaskAttachmentComponent {
```
[Upload Drag Area Component](../content-services/upload-drag-area.component.md)
If the List is empty, the custom no-content template we passed is displayed.
![custom-no-content-drag-drop-template-sample](../docassets/images/custom-no-content-drag-drop-template.png)

30
docs/process-services/task-list.component.md
View File

@ -11,6 +11,7 @@ Renders a list containing all the tasks matched by the parameters specified.
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
@ -20,7 +21,6 @@ Renders a list containing all the tasks matched by the parameters specified.
- [Pagination strategy](#pagination-strategy)
- [DataTableAdapter example](#datatableadapter-example)
- [DataColumn Features](#datacolumn-features)
- [Show custom template when tasklist is empty](#show-custom-template-when-tasklist-is-empty)
- [See also](#see-also)
## Basic Usage
@ -33,6 +33,19 @@ Renders a list containing all the tasks matched by the parameters specified.
</adf-tasklist>
```
### [Transclusions](../user-guide/transclusion.md)
Any content inside an `<adf-empty-custom-content>` sub-component will be shown
when the task list is empty:
```html
<adf-tasklist>
<adf-empty-custom-content>
Your Content
</adf-empty-custom-content>
<adf-tasklist>
```
## Class members
### Properties
@ -47,13 +60,10 @@ Renders a list containing all the tasks matched by the parameters specified.
| multiselect | `boolean` | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| name | `string` | | Name of the tasklist. |
| page | `number` | 0 | The page number of the tasks to fetch. |
| start | `number` | 0 | Another approach to specify which page you want load. |
| processDefinitionId | `string` | | The Definition Id of the process. |
| processDefinitionKey | `string` | | (**Deprecated:** 2.4.0) The Definition Key of the process. |
| processInstanceId | `string` | | The Instance Id of the process. |
| taskId | `string` | | The taskId you want to be fetched. |
| selectFirstRow | `boolean` | true | Toggles default selection of the first row |
| includeProcessInstance | `boolean` | false | Include the process instance info |
| 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. |
| size | `number` | | The number of tasks to fetch. Default value: 25. |
| sort | `string` | | Define the sort order of the tasks. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
@ -213,18 +223,6 @@ typical tasklist.
You can customize the styling of a column and also add features like tooltips and automatic translation of column titles. See the [`DataColumn`](../../lib/core/datatable/data/data-column.model.ts) page for more information about these features.
### Show custom template when tasklist is empty
You can add your own template or message as shown in the example below:
```html
<adf-tasklist>
<adf-empty-custom-content>
Your Content
</adf-empty-custom-content>
<adf-tasklist>
```
## See also
- [Data column component](../core/data-column.component.md)

1
docs/user-guide/README.md
View File

@ -9,6 +9,7 @@ on an item below to see the corresponding guide page.
- [Form Extensibility and Customisation](extensibility.md)
- [Internationalization in ADF](internationalization.md)
- [Theming](theming.md)
- [Transclusion](transclusion.md)
- [Typography](typography.md)
- [Walkthrough - adding indicators to highlight information about a node](metadata-indicators.md)

41
docs/user-guide/transclusion.md Normal file
View File

@ -0,0 +1,41 @@
---
Added: v2.6.0
---
# Transclusion
Several components in ADF make use of **transclusion**, which is the technique
of incorporating user-supplied content in the body of a standard component. In
most cases, this is used to make small customizations (for example, the various
list components let you supply custom content to show when the list is empty).
However, there are also a few "containers" whose entire content is set by the user
with the container itself being mainly for convenient display and formatting
(for example, the [Accordion component](../core/accordion.component.md)).
You supply the content you want to transclude between the opening and closing tags of
the main component. In a few cases, this content can be completely free-form as with
the body section of the [Login component](../core/login.component.md):
```html
<adf-login ...>
<div>
<div>Your extra content</div>
</div>
</adf-login>
```
More often, though, the main component makes use of one or more sub-components to add
structure to the transclusion. For example, the [Login component](../core/login.component.md)
also has sub-components for the header and footer regions in addition to the free-form
content of the body:
```html
<adf-login ...>
<login-footer><ng-template>My custom HTML for the footer</ng-template></login-footer>
</adf-login>
```
![Custom login footer example](../docassets/images/custom-footer.png)
The doc pages for the components that use transclusion contain full details of all
supported sub-components and their usage.

11
docs/versionIndex.md
View File

@ -6,12 +6,22 @@ of components organized by ADF libraries.
## Versions
- [v2.5.0](#v250)
- [v2.4.0](#v240)
- [v2.3.0](#v230)
- [v2.2.0](#v220)
- [v2.1.0](#v210)
- [v2.0.0](#v200)
## v2.5.0
**Released:** 2018-08-14 ([Release notes](https://community.alfresco.com/docs/DOC-7993))<br/>
**APS compatible version:** v1.6.4+<br/>
**ACS compatible version:** v5.2.3<br/>
No new components added.
## v2.4.0
**Released:** 2018-06-21 ([Release notes](https://community.alfresco.com/docs/DOC-7397))<br/>
@ -166,6 +176,7 @@ of components organized by ADF libraries.
- [Dropdown breadcrumb component](content-services/dropdown-breadcrumb.component.md)
- [Ecm user model](core/ecm-user.model.md)
- [Ecm user service](core/ecm-user.service.md)
- [Empty list component](core/empty-list.component.md)
- [Favorites api service](core/favorites-api.service.md)
- [File draggable directive](content-services/file-draggable.directive.md)
- [File size pipe](core/file-size.pipe.md)

3
tools/doc/doctool.config.json
View File

@ -19,8 +19,7 @@
"toc"
],
"dev": [
"tsInfo",
"typeLinker"
"toc"
]
},
"statusIcons": {

23
tools/doc/tools/toc.js
View File

@ -4,6 +4,7 @@ var fs = require("fs");
var remark = require("remark");
//var tocGenerator = require("mdast-util-toc");
var replaceSection = require("mdast-util-heading-range");
var tostring = require("mdast-util-to-string");
var ejs = require("ejs");
@ -117,18 +118,26 @@ function makeToc(tree) {
var headings = nav.headings(h =>
(h.depth > 1) &&
(h.depth <= maxTocHeadingDepth) &&
!((h.children[0].type === "text") && (h.children[0].value === "Contents"))
(h.depth <= maxTocHeadingDepth) //&&
//!((h.children[0].type === "text") && (h.children[0].value === "Contents"))
);
var context = {headings: []};
headings.forEach(heading => {
context.headings.push({
"level": heading.item.depth - 2,
"title": heading.textValue,
"anchor": "#" + heading.textValue.toLowerCase().replace(/ /g, "-").replace(/[\.,'"`$]/g ,"")
})
var linkTitle = "";
if (!((heading.item.children[0].type === "text") && (heading.item.children[0].value === "Contents"))) {
linkTitle = tostring(heading.item).trim();
}
if (linkTitle !== "") {
context.headings.push({
"level": heading.item.depth - 2,
"title": linkTitle,
"anchor": "#" + linkTitle.toLowerCase().replace(/ /g, "-").replace(/[\.,'"`$]/g ,"")
})
};
});
var templateName = path.resolve(templateFolder, "toc.ejs");

2
tools/doc/yamlTemplates/property.ejs
View File

@ -13,10 +13,12 @@
<% child.decorators.forEach(dec => { -%>
- name: <%= dec.name %>
arguments:
<%_if (typeof dec.arguments !== "undefined") { -%>
<% Object.keys(dec.arguments).forEach(argName => { -%>
- id: <%= argName %>
value: <%- dec.arguments[argName] %>
<% }) %>
<% } -%>
<%_ }) -%>
<% } -%>
syntax: