[ADF-2824] Reviewed docs for new components in 2.4 (#3400)

This commit is contained in:
Andy Stark 2018-05-25 13:43:40 +01:00 committed by Eugenio Romano
parent d9923a4fb4
commit 85ff224e26
6 changed files with 104 additions and 57 deletions

View File

@ -55,8 +55,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
Note at the moment this component is mostly for internal use and it require: | [Source](../lib/core/about/about.component.ts) |
| [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](../core/content.service.md) and [Process service](../process-services/process.service.md). | [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) |
| [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) |
@ -68,8 +67,8 @@ Note at the moment this component is mostly for internal use and it require: | [
| [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) |
| [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) |
| [Start form component](core/start-form.component.md) | Displays the Start Form for a process. | [Source](../lib/core/form/components/start-form.component.ts) |
| [Form component](core/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](core/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) |
| [Text mask component](core/text-mask.component.md) | Implements text field input masks. | [Source](../lib/core/form/components/widgets/text/text-mask.component.ts) |
| [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) |
@ -83,7 +82,7 @@ Note at the moment this component is mostly for internal use and it require: | [
| [Empty content component](core/empty-content.component.md) | Provides a generic "Empty Content" UI and can used as a placeholder for components that need to show different content when being empty. | [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) |
| [Toolbar divider component](core/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](core/toolbar-title.component.md) | Supplies custom HTML to be included in a Toolbar component title. | [Source](../lib/core/toolbar/toolbar-title.component.ts) |
| [Toolbar title component](core/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 component](core/toolbar.component.md) | Simple container for headers, titles, actions and breadcrumbs. | [Source](../lib/core/toolbar/toolbar.component.ts) |
| [User info component](core/user-info.component.md) | Shows user information. | [Source](../lib/core/userinfo/components/user-info.component.ts) |
| [Viewer component](core/viewer.component.md) | Displays content from an ACS repository. | [Source](../lib/core/viewer/components/viewer.component.ts) |
@ -105,7 +104,8 @@ Note at the moment this component is mostly for internal use and it require: | [
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [Form field model](core/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) |
| [Menu button model](core/menu-button.model.md) | Defines the properties for an item in a [Buttons Menu component](../core/buttons-menu.component.md). | [Source](../lib/core/buttons-menu/menu-button.model.ts) |
| [Form field model](core/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) |
| [Comment process model](core/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](core/product-version.model.md) | Contains version and license information classes for Alfresco products. | [Source](../lib/core/models/product-version.model.ts) |
| [User process model](core/user-process.model.md) | Represents a Process Services user. | [Source](../lib/core/models/user-process.model.ts) |
@ -121,16 +121,16 @@ Note at the moment this component is mostly for internal use and it require: | [
| [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`](../core/user-process.model.md) object and extracts and formats the initials. | [Source](../lib/core/pipes/user-initial.pipe.ts) |
## Services
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [Card item types service](core/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](core/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) |
| [Card item types service](core/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](core/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) |
| [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 rendering service](core/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 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) |
| [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) |

View File

@ -11,17 +11,20 @@ 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) |
| [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) |
| [Comment list component](comment-list.component.md) | Shows a list of comments. | [Source](../../lib/core/comments/comment-list.component.ts) |
| [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) |
| [Sorting picker component](sorting-picker.component.md) | Provides an ability to pick one of the predefined sorting definitions and define sorting direction: | [Source](../../lib/core/components/sorting-picker/sorting-picker.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) |
| [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 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) |
| [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) |
| [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) |
@ -30,10 +33,12 @@ for more information about installing and using the source code.
| [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/sidebar/sidebar-action-menu.component.ts) |
| [Sidebar action menu component](sidebar-action-menu.component.md) | Displays a sidebar-action menu information panel. | [Source](../../lib/core/sidenav-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/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts) |
| [Empty content component](empty-content.component.md) | Provides a generic "Empty Content" UI and can used as a placeholder for components that need to show different content when being empty. | [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 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](../core/toolbar.component.md) 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) |
@ -55,7 +60,8 @@ 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 component. | [Source](../../lib/core/form/components/widgets/core/form-field.model.ts) |
| [Menu button model](menu-button.model.md) | Defines the properties for an item in a [Buttons Menu component](../core/buttons-menu.component.md). | [Source](../../lib/core/buttons-menu/menu-button.model.ts) |
| [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) |
| [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) |
@ -71,15 +77,16 @@ 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 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`](../core/user-process.model.md) object and extracts and formats the initials. | [Source](../../lib/core/pipes/user-initial.pipe.ts) |
## Services
| Name | Description | Source link |
| ---- | ----------- | ----------- |
| [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) |
| [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) |
| [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 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](../insights/widget.component.md) 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) |
| [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) |

View File

@ -1,13 +1,14 @@
---
Added: v2.4.0
Status: Active
Last reviewed: 2018-05-24
---
# App Config Pipe
Retrieves values from the application configuration file directly.
## Examples
## Basic usage
```html
<adf-login
@ -15,9 +16,12 @@ Retrieves values from the application configuration file directly.
</adf-login>
```
## Fallback values
## Details
You can use pipe parameters to pass fallback value:
### Fallback values
You can use the pipe parameter to pass a fallback value which will be
used if the property name is not found:
```html
<adf-login
@ -25,9 +29,9 @@ You can use pipe parameters to pass fallback value:
</adf-login>
```
## Chaining with other pipes
### Chaining with other pipes
You can also chain values with other pipes, for example `translation` one:
You can also chain values with other pipes such as the translation pipe:
```html
<adf-login

View File

@ -1,15 +1,16 @@
---
Added: v2.4.0
Status: Active
Last reviewed: 2018-04-24
---
# Buttons Menu Component
Displays buttons on a responsive menu.
## Basic Usage
![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png)
This component shows buttons on a responsive menu that changes depending on the device's screen.
## Basic Usage
```html
<adf-buttons-action-menu
@ -17,7 +18,30 @@ This component shows buttons on a responsive menu that changes depending on the
</adf-buttons-action-menu>
```
You will need to declare all the buttons that you want to have inside your menu in the parent component.
## Class members
### Properties
| Name | Type | Default value | Description |
| -- | -- | -- | -- |
| buttons | [`MenuButton[]`](../../lib/core/buttons-menu/menu-button.model.ts) | | Array of buttons that defines the menu. |
## Details
This component shows buttons on a responsive menu. The display of the menu changes to fit
the screen size of the device:
Desktop view of the menu
![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png)
Mobile view of the menu
![adf-buttons-menu-mobile](../docassets/images/adf-buttons-menu-mobile.png)
The `buttons` property contains an array of [MenuButton](../../lib/core/buttons-menu/menu-button.model.ts) instances that define
the label and appearance of each button along with a handler function to
implement its action:
```ts
buttons: MenuButton[] = [];
@ -52,37 +76,6 @@ buttons: MenuButton[] = [];
];
```
## Properties
### Buttons Menu Component
| Name | Type | Description |
| ---- | ---- | ----------- |
| buttons | `MenuButton []` | The array that contains all the buttons for the menu |
### Button Model
| Name | Type | Description |
| ---- | ---- | ----------- |
| label | `string` | Label to display for the button. |
| icon | `string` | Icon to display for the button. |
| handler | `function` | Callback for the event handler once the button is clicked. |
| styles | `string` | Classes to apply to the button. |
| id | `string` | Id of the button. |
| isVisible | `function` | Variable to define if button is visible or hidden. This function must return a boolean parameter. For instance, if it returns true the button will be visible. If it returns false the button will be hiden. |
## Details
This component uses [Angular Material](https://material.angular.io/) to style the menu.
Desktop view of the menu
![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png)
Mobile view of the menu
![adf-buttons-menu-mobile](../docassets/images/adf-buttons-menu-mobile.png)
Menu Button Model
## See also
- [Menu Button Model](./menu-button.model.md)

View File

@ -0,0 +1,42 @@
---
Added: v2.4.0
Status: Active
Last reviewed: 2018-05-25
---
# Menu button model
Defines the properties for an item in a [Buttons Menu component](../core/buttons-menu.component.md).
## Basic usage
```ts
let button = new MenuButton({
label: 'Export',
icon: 'file_download',
handler: this.exportItem.bind(this),
id: 'export-button',
isVisible: this.isItemValid.bind(this)
});
```
## Properties
| Name | Type | Description |
| ---- | ---- | ----------- |
| label | `string` | Label to display for the button. |
| icon | `string` | Icon to display for the button. |
| handler | `function` | Callback for the event handler for button clicks. |
| styles | `string` | CSS classes to apply to the button. |
| id | `string` | Id of the button. |
| isVisible | `function` | Boolean function that determines whether the button is visible (returns true) or hidden (returns false). |
## Details
An array of [`MenuButton`](../../lib/core/buttons-menu/menu-button.model.ts) instances is passed to the Button Menu component via its
`buttons` property. See the Buttons Menu component page for a code sample and
further details about setting up the menu.
## See also
- [Buttons menu component](../core/buttons-menu.component.md)

View File

@ -26,6 +26,7 @@ import { MenuButton } from './menu-button.model';
})
export class ButtonsMenuComponent implements OnChanges {
/** Array of buttons that defines the menu. */
@Input() buttons: MenuButton[];
ngOnChanges(changes: SimpleChanges) {