mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3514] Added transclusions sections to doc files (#3756)
* [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
committed by
Eugenio Romano
Eugenio Romano
parent
35e1563fde
commit
2c49de6070
@@ -11,8 +11,8 @@ for more information about installing and using the source code.
|
||||
|
||||
| Name | Description | Source link |
|
||||
| ---- | ----------- | ----------- |
|
||||
| [About component](about.component.md)  | 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)  | 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)  | 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)  | 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)  | 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) |
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
|
||||
### 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 |
|
||||
|
||||
|
||||
|
||||
### 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
59
docs/core/empty-list.component.md
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
|
||||
# Empty list component
|
||||
|
||||
Displays a message indicating that a list is empty.
|
||||
|
||||
|
||||
|
||||
## 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)
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -8,17 +8,17 @@ Last reviewed: 2018-08-07
|
||||
|
||||
Authenticates to Alfresco Content Services and or Alfresco Process Services.
|
||||
|
||||
|
||||
|
||||
|
||||
## 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:
|
||||
|
||||
|
||||
|
||||
Footer:
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
## 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>`
|
||||
```
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<adf-login ...>
|
||||
<login-header><ng-template>My custom HTML for the header</ng-template></login-header>
|
||||
</adf-login>`
|
||||
```
|
||||
|
||||
|
||||
|
||||
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>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:
|
||||
|
||||
|
||||
|
||||
### Custom logo and background
|
||||
|
||||
You can change the logo and background images using the `backgroundImageUrl` and
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
|
||||
## 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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
@@ -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 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.
|
||||
|
||||
|
||||
|
||||
#### 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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 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 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.
|
||||
|
||||
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Document List component](../content-services/document-list.component.md)
|
||||
|
||||
Reference in New Issue
Block a user