mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2824] Reviewed docs for core and content services (#3290)
* [ADF-2824] Reviewed card view docs * [ADF-2824] Reviewed doc for core and content services * [ADF-2824] Added class name exception to prop script
This commit is contained in:
committed by
Eugenio Romano
parent
3a3acd23ff
commit
06992196cd
@@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Active
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
---
|
---
|
||||||
|
|
||||||
# File Uploading Dialog Component
|
# File Uploading Dialog Component
|
||||||
|
@@ -1,11 +1,12 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Active
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
---
|
---
|
||||||
|
|
||||||
# Node Permission service
|
# Node Permission service
|
||||||
|
|
||||||
Manages the role permissions for the content nodes
|
Manages role permissions for content nodes.
|
||||||
|
|
||||||
## Class members
|
## Class members
|
||||||
|
|
||||||
@@ -28,12 +29,12 @@ Manages the role permissions for the content nodes
|
|||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
This service needs the support for the groups api fo content services that is available from version 5.2.1
|
This service requires the Content Services Groups API, which is available from version 5.2.1.
|
||||||
|
|
||||||
See the
|
See the
|
||||||
[Groups API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/GroupssApi.md)
|
[Groups API docs](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/GroupssApi.md)
|
||||||
in the Alfresco JS API for more information about the types returned by Tag
|
in the Alfresco JS API for more information about the types returned by
|
||||||
service methods and for the implementation of the REST API the service is
|
the methods and for the implementation of the REST API the service is
|
||||||
based on.
|
based on.
|
||||||
|
|
||||||
## See also
|
## See also
|
||||||
|
@@ -1,11 +1,12 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Experimental
|
Status: Experimental
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
---
|
---
|
||||||
|
|
||||||
# Version List component
|
# Version List component
|
||||||
|
|
||||||
Displays the version history of a node in a Version Manager component
|
Displays the version history of a node in a Version Manager component.
|
||||||
|
|
||||||
### Basic Usage
|
### Basic Usage
|
||||||
|
|
||||||
@@ -27,8 +28,8 @@ Displays the version history of a node in a Version Manager component
|
|||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
Inside the version manager component, there is the underlying VersionListComponent.
|
This component is used by the Version Manager component to
|
||||||
The VersionListComponent loads and displays the version history of a node.
|
load and displays the version history of a node.
|
||||||
|
|
||||||
## See also
|
## See also
|
||||||
|
|
||||||
|
@@ -1,7 +1,9 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Active
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
---
|
---
|
||||||
|
|
||||||
# Accordion Group component
|
# Accordion Group component
|
||||||
|
|
||||||
Adds a collapsible panel to an accordion menu.
|
Adds a collapsible panel to an accordion menu.
|
||||||
|
@@ -1,7 +1,9 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Active
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
---
|
---
|
||||||
|
|
||||||
# Accordion Component
|
# Accordion Component
|
||||||
|
|
||||||
Creates a collapsible accordion menu.
|
Creates a collapsible accordion menu.
|
||||||
|
@@ -1,7 +1,9 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Active
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
---
|
---
|
||||||
|
|
||||||
# Auth Guard Bpm service
|
# Auth Guard Bpm service
|
||||||
|
|
||||||
Adds authentication with Process Services to a route within the app.
|
Adds authentication with Process Services to a route within the app.
|
||||||
|
@@ -1,7 +1,9 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Active
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
---
|
---
|
||||||
|
|
||||||
# Auth Guard Ecm service
|
# Auth Guard Ecm service
|
||||||
|
|
||||||
Adds authentication with Content Services to a route within the app.
|
Adds authentication with Content Services to a route within the app.
|
||||||
|
@@ -1,7 +1,9 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Active
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
---
|
---
|
||||||
|
|
||||||
# Auth Guard service
|
# Auth Guard service
|
||||||
|
|
||||||
Adds authentication to a route within the app.
|
Adds authentication to a route within the app.
|
||||||
|
74
docs/core/card-item-types.service.md
Normal file
74
docs/core/card-item-types.service.md
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
---
|
||||||
|
Added: v2.0.0
|
||||||
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
|
---
|
||||||
|
|
||||||
|
# Card Item Type service
|
||||||
|
|
||||||
|
Maps type names to field component types for the Card View component.
|
||||||
|
|
||||||
|
## Class members
|
||||||
|
|
||||||
|
### Methods
|
||||||
|
|
||||||
|
- `getComponentTypeResolver(type: string = null, defaultValue: Type<__type> = this.defaultValue): DynamicComponentResolveFunction`<br/>
|
||||||
|
Gets the currently active ComponentTypeResolver function for a field type.
|
||||||
|
- `type: string = null` - The type whose resolver you want
|
||||||
|
- `defaultValue: Type<__type> = this.defaultValue` - Default type returned for types that are not yet mapped
|
||||||
|
- **Returns** `DynamicComponentResolveFunction` - Resolver function
|
||||||
|
- `resolveComponentType(model: DynamicComponentModel = null, defaultValue: Type<__type> = this.defaultValue): Type<__type>`<br/>
|
||||||
|
Finds the component type that is needed to render a form field.
|
||||||
|
- `model: DynamicComponentModel = null` - (form-field.model.md) for the field to render
|
||||||
|
- `defaultValue: Type<__type> = this.defaultValue` - Default type returned for field types that are not yet mapped.
|
||||||
|
- **Returns** `Type<__type>` - Component type
|
||||||
|
- `setComponentTypeResolver(type: string = null, resolver: DynamicComponentResolveFunction = null, override: boolean = false)`<br/>
|
||||||
|
Sets or optionally replaces a ComponentTypeResolver function for a field type.
|
||||||
|
- `type: string = null` - The type whose resolver you want to set
|
||||||
|
- `resolver: DynamicComponentResolveFunction = null` - The new resolver function
|
||||||
|
- `override: boolean = false` - The new resolver will only replace an existing one if this parameter is true
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
The [Card View component](card-view.component.md) uses this service to find the component
|
||||||
|
type that is required to display a particular field type (text, date, etc). The service
|
||||||
|
maps a type name string to a corresponding `ComponentTypeResolver` function that takes a
|
||||||
|
model object as a parameter and returns the component type needed to display that model.
|
||||||
|
|
||||||
|
The default mapping is shown below:
|
||||||
|
|
||||||
|
| Type string | Component |
|
||||||
|
| ----------- | --------- |
|
||||||
|
| 'text' | CardViewTextItemComponent |
|
||||||
|
| 'int' | CardViewTextItemComponent |
|
||||||
|
| 'float' | CardViewTextItemComponent |
|
||||||
|
| 'date' | CardViewDateItemComponent |
|
||||||
|
| 'datetime' | CardViewDateItemComponent |
|
||||||
|
| 'bool' | CardViewBoolItemComponent |
|
||||||
|
| 'map' | CardViewMapItemComponent |
|
||||||
|
|
||||||
|
### Adding new type mappings
|
||||||
|
|
||||||
|
You can define your own custom field types for the Card View (see the
|
||||||
|
[Card View Item interface](card-view-item.interface.md) page for full details of how to do this).
|
||||||
|
When you have defined the field component, you need to register it with the Card Item Type service
|
||||||
|
so that the Card View component can make use of it:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
@Component({
|
||||||
|
...
|
||||||
|
providers: [ CardItemTypeService ] /* If you don't want to pollute the main instance of the CardItemTypeService service */
|
||||||
|
...
|
||||||
|
})
|
||||||
|
export class SomeParentComponent {
|
||||||
|
|
||||||
|
constructor(private cardItemTypeService: CardItemTypeService) {
|
||||||
|
cardItemTypeService.setComponentTypeResolver('star-date', () => CardViewStarDateItemComponent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Card View component](card-view.component.md)
|
||||||
|
- [Card View Item interface](card-view-item.interface.md)
|
150
docs/core/card-view-item.interface.md
Normal file
150
docs/core/card-view-item.interface.md
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
---
|
||||||
|
Added: v2.0.0
|
||||||
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
|
---
|
||||||
|
|
||||||
|
# Card View Item interface
|
||||||
|
|
||||||
|
Defines the implementation of an item in a Card View component.
|
||||||
|
|
||||||
|
## Definition
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export interface CardViewItem {
|
||||||
|
label: string;
|
||||||
|
value: any;
|
||||||
|
key: string;
|
||||||
|
default?: any;
|
||||||
|
type: string;
|
||||||
|
displayValue: string;
|
||||||
|
editable?: boolean;
|
||||||
|
icon?: string;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Properties
|
||||||
|
|
||||||
|
| Name | Type | Default | Description |
|
||||||
|
| ---- | ---- | ------- | ----------- |
|
||||||
|
| label | string | "" | Item label |
|
||||||
|
| value | any | | The original data value for the item |
|
||||||
|
| key | string | "" | Identifying key (important when editing the item) |
|
||||||
|
| default | any | | The default value to display if the value is empty |
|
||||||
|
| displayValue | string | "" | The value to display |
|
||||||
|
| editable | boolean | false | Toggles whether the item is editable |
|
||||||
|
| clickable | boolean | false | Toggles whether the item is clickable |
|
||||||
|
| icon | string | | The material icon to show beside clickable items |
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
Card item components are loaded dynamically by the
|
||||||
|
main [Card View component](card-view.component.md). This allows you to define your own
|
||||||
|
component for a custom item type.
|
||||||
|
|
||||||
|
For example, follow the steps given below to add a **stardate** type to display Captain
|
||||||
|
Picard's birthday (47457.1):
|
||||||
|
|
||||||
|
1. Define the model for the custom type.
|
||||||
|
|
||||||
|
Your model must extend the `CardViewBaseItemModel` class and implement the `CardViewItem`
|
||||||
|
and `DynamicComponentModel` interfaces. See the
|
||||||
|
[Card View Text Item model source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts)
|
||||||
|
for an example of how to do this.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
|
||||||
|
|
||||||
|
export class CardViewStarDateItemModel extends CardViewBaseItemModel implements
|
||||||
|
CardViewItem, DynamicComponentModel {
|
||||||
|
type: string = 'star-date';
|
||||||
|
|
||||||
|
get displayValue() {
|
||||||
|
return this.convertToStarDate(this.value) || this.default;
|
||||||
|
}
|
||||||
|
|
||||||
|
private convertToStarDate(starTimeStamp: number): string {
|
||||||
|
// Do the magic
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Define the component for the custom type.
|
||||||
|
|
||||||
|
The selector is not important given that this is a dynamically loaded component.
|
||||||
|
You can choose any name for the selector, but it makes sense to follow the Angular standards.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
@Component({
|
||||||
|
selector: 'card-view-stardateitem' /* For example */
|
||||||
|
...
|
||||||
|
})
|
||||||
|
export class CardViewStarDateItemComponent {
|
||||||
|
@Input()
|
||||||
|
property: CardViewStarDateItemModel;
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
editable: boolean;
|
||||||
|
|
||||||
|
constructor(private cardViewUpdateService: CardViewUpdateService) {}
|
||||||
|
|
||||||
|
isEditable() {
|
||||||
|
return this.editable && this.property.editable;
|
||||||
|
}
|
||||||
|
|
||||||
|
showStarDatePicker() {
|
||||||
|
...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
See the
|
||||||
|
[Card View Text Item component source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts)
|
||||||
|
or the
|
||||||
|
[Card View Date Item component source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts) for examples of how to make the field
|
||||||
|
editable.
|
||||||
|
|
||||||
|
3. Add your custom component to your module's `entryComponents` list.
|
||||||
|
|
||||||
|
You must register your component in your module's `entryComponents` array
|
||||||
|
to enable Angular to load it dynamically:
|
||||||
|
|
||||||
|
```js
|
||||||
|
@NgModule({
|
||||||
|
imports: [...],
|
||||||
|
declarations: [
|
||||||
|
CardViewStarDateItemComponent
|
||||||
|
],
|
||||||
|
entryComponents: [
|
||||||
|
CardViewStarDateItemComponent
|
||||||
|
],
|
||||||
|
exports: [...]
|
||||||
|
})
|
||||||
|
export class MyModule {}
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Bind your custom component to the custom model type so that Angular's dynamic component
|
||||||
|
loader can find it.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
@Component({
|
||||||
|
...
|
||||||
|
providers: [ CardItemTypeService ] /* If you don't want to pollute the main instance of the CardItemTypeService service */
|
||||||
|
...
|
||||||
|
})
|
||||||
|
export class SomeParentComponent {
|
||||||
|
|
||||||
|
constructor(private cardItemTypeService: CardItemTypeService) {
|
||||||
|
cardItemTypeService.setComponentTypeResolver('star-date', () => CardViewStarDateItemComponent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The [Card Item Type service](card-item-types.service.md) maps each item type to the
|
||||||
|
corresponding component. See its [doc page](card-item-types.service.md) for further
|
||||||
|
details.
|
||||||
|
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Card View component](card-view.component.md)
|
||||||
|
- [Card Item Types service](card-item-types.service.md)
|
@@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Active
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-09
|
||||||
---
|
---
|
||||||
|
|
||||||
# Card View component
|
# Card View component
|
||||||
@@ -9,24 +10,10 @@ Displays a configurable property list renderer.
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Contents
|
|
||||||
|
|
||||||
- [Basic Usage](#basic-usage)
|
|
||||||
|
|
||||||
- [Class members](#class-members)
|
|
||||||
|
|
||||||
- [Properties](#properties)
|
|
||||||
|
|
||||||
- [Details](#details)
|
|
||||||
|
|
||||||
- [Editing](#editing)
|
|
||||||
- [Defining properties](#defining-properties)
|
|
||||||
- [Defining your custom card Item](#defining-your-custom-card-item)
|
|
||||||
|
|
||||||
- [See also](#see-also)
|
|
||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
|
Defining properties from HTML:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-card-view
|
<adf-card-view
|
||||||
[properties]="[{label: 'My Label', value: 'My value'}]"
|
[properties]="[{label: 'My Label', value: 'My value'}]"
|
||||||
@@ -34,63 +21,9 @@ Displays a configurable property list renderer.
|
|||||||
</adf-card-view>
|
</adf-card-view>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Class members
|
Defining properties from Typescript:
|
||||||
|
|
||||||
### Properties
|
```ts
|
||||||
|
|
||||||
| Name | Type | Default value | Description |
|
|
||||||
| -- | -- | -- | -- |
|
|
||||||
| displayEmpty | `boolean` | true | Toggles whether or not to show empty items in non-editable mode. |
|
|
||||||
| editable | `boolean` | | Toggles whether or not the items can be edited. |
|
|
||||||
| properties | `CardViewItem[]` | | (**required**) Items to show in the card view. |
|
|
||||||
|
|
||||||
## Details
|
|
||||||
|
|
||||||
You define the property list, the CardViewComponent does the rest. Each property represents a card view item (a row) in the card view component. At the time of writing three a few kind of card view item (property type) is supported out of the box (e.g: [text](#card-text-item) item and [date](#card-date-item) item) but you can define your own custom types as well.
|
|
||||||
|
|
||||||
### Editing
|
|
||||||
|
|
||||||
The card view can optionally allow its properties to be edited. You can control the editing of the properties in two level.
|
|
||||||
|
|
||||||
- **global level** - _via the editable parameter of the card-view.component_
|
|
||||||
- **property level** - _in each property via the editable attribute_
|
|
||||||
|
|
||||||
If you set the global editable parameter to false, no properties can be edited regardless of what is set inside the property.
|
|
||||||
|
|
||||||
See the [Card View Update service](card-view-update.service.md) page for details on how to use the service
|
|
||||||
to respond to clicks and edits in a card view. You can use this, for example, to save the edits within your
|
|
||||||
application or to highlight a clicked item.
|
|
||||||
|
|
||||||
### Defining properties
|
|
||||||
|
|
||||||
Properties is an array of models which one by one implements the CardViewItem interface.
|
|
||||||
|
|
||||||
```js
|
|
||||||
export interface CardViewItem {
|
|
||||||
label: string;
|
|
||||||
value: any;
|
|
||||||
key: string;
|
|
||||||
default?: any;
|
|
||||||
type: string;
|
|
||||||
displayValue: string;
|
|
||||||
editable?: boolean;
|
|
||||||
icon?: string;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
At the moment these are the models supported:
|
|
||||||
|
|
||||||
- **CardViewTextItemModel** - _for text items_
|
|
||||||
- **CardViewMapItemModel** - _for map items_
|
|
||||||
- **CardViewDateItemModel** - _for date items_
|
|
||||||
- **CardViewDatetimeItemModel** - _for datetime items_
|
|
||||||
- **CardViewBoolItemModel** - _for bool items (checkbox)_
|
|
||||||
- **CardViewIntItemModel** - _for integers items_
|
|
||||||
- **CardViewFloatItemModel** - _for float items_
|
|
||||||
|
|
||||||
Each of them extends the abstract CardViewBaseItemModel class to add some custom functionality to the basic behaviour.
|
|
||||||
|
|
||||||
```js
|
|
||||||
this.properties = [
|
this.properties = [
|
||||||
new CardViewTextItemModel({
|
new CardViewTextItemModel({
|
||||||
label: 'Name',
|
label: 'Name',
|
||||||
@@ -145,32 +78,97 @@ Each of them extends the abstract CardViewBaseItemModel class to add some custom
|
|||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Class members
|
||||||
|
|
||||||
|
### Properties
|
||||||
|
|
||||||
|
| Name | Type | Default value | Description |
|
||||||
|
| -- | -- | -- | -- |
|
||||||
|
| displayEmpty | `boolean` | true | Toggles whether or not to show empty items in non-editable mode. |
|
||||||
|
| editable | `boolean` | | Toggles whether or not the items can be edited. |
|
||||||
|
| properties | `CardViewItem[]` | | (**required**) Items to show in the card view. |
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
You define the property list, the CardViewComponent does the rest. Each property represents a card view item (a row) in the card view component. The following item types are available by default:
|
||||||
|
|
||||||
|
- [**CardViewTextItemModel**](#card-text-item) - _for text items_
|
||||||
|
- [**CardViewMapItemModel**](#card-map-item) - _for map items_
|
||||||
|
- [**CardViewDateItemModel**](#card-date-item) - _for date items_
|
||||||
|
- [**CardViewDatetimeItemModel**](#card-datetime-item) - _for datetime items_
|
||||||
|
- [**CardViewBoolItemModel**](#card-bool-item) - _for bool items (checkbox)_
|
||||||
|
- [**CardViewIntItemModel**](#card-int-item) - _for integer items_
|
||||||
|
- [**CardViewFloatItemModel**](#card-float-item) - _for float items_
|
||||||
|
|
||||||
|
Each of these types implements the [Card View Item interface](card-view-item.interface.md):
|
||||||
|
|
||||||
|
```ts
|
||||||
|
export interface CardViewItem {
|
||||||
|
label: string;
|
||||||
|
value: any;
|
||||||
|
key: string;
|
||||||
|
default?: any;
|
||||||
|
type: string;
|
||||||
|
displayValue: string;
|
||||||
|
editable?: boolean;
|
||||||
|
icon?: string;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also define your own item types. See the
|
||||||
|
[Card View Item interface](card-view-item.interface.md) page for details of how to do
|
||||||
|
this.
|
||||||
|
|
||||||
|
### Editing
|
||||||
|
|
||||||
|
You can optionally set up the card view so that its properties can be edited. You can control
|
||||||
|
the editing of properties at two levels:
|
||||||
|
|
||||||
|
- **Global level** - _via the editable parameter of the card-view.component_
|
||||||
|
- **Property level** - _in each property via the editable attribute_
|
||||||
|
|
||||||
|
If you set the global editable parameter to false, no properties can be edited regardless of their
|
||||||
|
individual `editable` settings.
|
||||||
|
|
||||||
|
See the [Card View Update service](card-view-update.service.md)
|
||||||
|
page for details of how to use the service to respond to clicks and edits in a card view.
|
||||||
|
You can use this, for example, to save the edits within your application or to highlight a
|
||||||
|
clicked item.
|
||||||
|
|
||||||
|
### Defining properties
|
||||||
|
|
||||||
|
The `properties` array contains instances of models that represent the layout of the Card View.
|
||||||
|
The ordering of the models in the array matches the ordering of items in the view. Each of the
|
||||||
|
models extends the abstract `CardViewBaseItemModel` class to add functionality for
|
||||||
|
specific data types, as described below.
|
||||||
|
|
||||||
#### Card Text Item
|
#### Card Text Item
|
||||||
|
|
||||||
CardViewTextItemModel is a property type for text properties.
|
`CardViewTextItemModel` is a property type for text properties.
|
||||||
|
|
||||||
```js
|
```ts
|
||||||
const textItemProperty = new CardViewTextItemModel(options);
|
const textItemProperty = new CardViewTextItemModel(options);
|
||||||
```
|
```
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| ---- | ---- | ------- | ----------- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| label\* | string | --- | The label to render |
|
| label\* | string | | Item label |
|
||||||
| value\* | any | --- | The original value |
|
| value\* | any | | The original data value for the item |
|
||||||
| key\* | string | --- | the key of the property. Have an important role when editing the property. |
|
| key\* | string | | Identifying key (important when editing the item) |
|
||||||
| default | any | --- | The default value to render in case the value is empty |
|
| default | any | | The default value to display if the value is empty |
|
||||||
| displayValue\* | string | --- | The value to render |
|
| displayValue\* | string | | The value to display |
|
||||||
| editable | boolean | false | Whether the property editable or not |
|
| editable | boolean | false | Toggles whether the item is editable |
|
||||||
| clickable | boolean | false | Whether the property clickable or not |
|
| clickable | boolean | false | Toggles whether the property responds to clicks |
|
||||||
| icon | string | The material icon to show against the clickable property | |
|
| icon | string | | The material icon to show beside the item if it is clickable |
|
||||||
| multiline | string | false | Single or multiline text |
|
| multiline | boolean | false | Single or multiline text |
|
||||||
| pipes | CardViewTextItemPipeProperty\[] | \[] | Pipes to be applied on the displayValue |
|
| pipes | CardViewTextItemPipeProperty\[] | \[] | Pipes to be applied to the text before display |
|
||||||
|
|
||||||
##### Using pipes in Card Text Item
|
##### Using pipes with a Card Text Item
|
||||||
|
|
||||||
You can use pipes for text items almost the same way as you would do it in your template. You can provide an array of pipes with additional pipeParameters like this:
|
You can use pipes for text items in almost the same way as you would do it in an HTML template.
|
||||||
|
You can provide an array of pipes with additional pipe parameters using the `pipes` property:
|
||||||
|
|
||||||
```js
|
```ts
|
||||||
const myWonderfulPipe1: PipeTransform = <whatever PipeTransform implmentation>;
|
const myWonderfulPipe1: PipeTransform = <whatever PipeTransform implmentation>;
|
||||||
const myWonderfulPipe2: PipeTransform = <whatever PipeTransform implmentation>;
|
const myWonderfulPipe2: PipeTransform = <whatever PipeTransform implmentation>;
|
||||||
|
|
||||||
@@ -187,205 +185,109 @@ new CardViewTextItemModel({
|
|||||||
|
|
||||||
#### Card Map Item
|
#### Card Map Item
|
||||||
|
|
||||||
CardViewMapItemModel is a property type for map properties.
|
`CardViewMapItemModel` is a property type for map properties.
|
||||||
|
|
||||||
```js
|
```ts
|
||||||
const mapItemProperty = new CardViewMapItemModel(options);
|
const mapItemProperty = new CardViewMapItemModel(options);
|
||||||
```
|
```
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| ---- | ---- | ------- | ----------- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| label\* | string | --- | The label to render |
|
| label\* | string | | Item label |
|
||||||
| value\* | Map | --- | A map that contains the key value pairs |
|
| value\* | Map | | A map that contains the key value pairs |
|
||||||
| key\* | string | --- | the key of the property. |
|
| key\* | string | | Identifying key (important when editing the item) |
|
||||||
| default | any | --- | The default value to render in case the value is empty |
|
| default | any | | The default value to display if the value is empty |
|
||||||
| displayValue\* | string | --- | The value to render |
|
| displayValue\* | string | | The value to display |
|
||||||
| clickable | boolean | false | Whether the property clickable or not |
|
| clickable | boolean | false | Toggles whether the property responds to clicks |
|
||||||
|
|
||||||
#### Card Date Item
|
#### Card Date Item
|
||||||
|
|
||||||
CardViewDateItemModel is a property type for date properties.
|
`CardViewDateItemModel` is a property type for date properties.
|
||||||
|
|
||||||
```js
|
```ts
|
||||||
const dateItemProperty = new CardViewDateItemModel(options);
|
const dateItemProperty = new CardViewDateItemModel(options);
|
||||||
```
|
```
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| ---- | ---- | ------- | ----------- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| label\* | string | --- | The label to render |
|
| label\* | string | | Item label |
|
||||||
| value\* | any | --- | The original value |
|
| value\* | any | | The original data value for the item |
|
||||||
| key\* | string | --- | the key of the property. |
|
| key\* | string | | Identifying key (important when editing the item) |
|
||||||
| default | any | --- | The default value to render in case the value is empty |
|
| default | any | | The default value to display if the value is empty |
|
||||||
| displayValue\* | any | --- | The value to render |
|
| displayValue\* | any | | The value to display |
|
||||||
| editable | boolean | false | Whether the property editable or not |
|
| editable | boolean | false | Toggles whether the item is editable |
|
||||||
| format | boolean | "MMM DD YYYY" | any format that momentjs accepts |
|
| format | boolean | "MMM DD YYYY" | Any date format that momentjs accepts |
|
||||||
|
|
||||||
#### Card Datetime Item
|
#### Card Datetime Item
|
||||||
|
|
||||||
CardViewDatetimeItemModel is a property type for datetime properties.
|
`CardViewDatetimeItemModel` is a property type for datetime properties.
|
||||||
|
|
||||||
```js
|
```ts
|
||||||
const datetimeItemProperty = new CardViewDatetimeItemModel(options);
|
const datetimeItemProperty = new CardViewDatetimeItemModel(options);
|
||||||
```
|
```
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| ---- | ---- | ------- | ----------- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| label\* | string | --- | The label to render |
|
| label\* | string | | Item label |
|
||||||
| value\* | any | --- | The original value |
|
| value\* | any | | The original data value for the item |
|
||||||
| key\* | string | --- | the key of the property. |
|
| key\* | string | | Identifying key (important when editing the item) |
|
||||||
| default | any | any | The default value to render in case the value is empty |
|
| default | any | any | The default value to display if the value is empty |
|
||||||
| displayValue\* | string | --- | The value to render |
|
| displayValue\* | string | | The value to display |
|
||||||
| editable | boolean | false | Whether the property editable or not |
|
| editable | boolean | false | Toggles whether the item is editable |
|
||||||
| format | boolean | "MMM DD YYYY HH:mm" | any format that momentjs accepts |
|
| format | boolean | "MMM DD YYYY HH:mm" | Any datetime format that momentjs accepts |
|
||||||
|
|
||||||
#### Card Bool Item
|
#### Card Bool Item
|
||||||
|
|
||||||
CardViewBoolItemModel is a property type for boolean properties.
|
`CardViewBoolItemModel` is a property type for boolean properties.
|
||||||
|
|
||||||
```js
|
```ts
|
||||||
const boolItemProperty = new CardViewBoolItemModel(options);
|
const boolItemProperty = new CardViewBoolItemModel(options);
|
||||||
```
|
```
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| ---- | ---- | ------- | ----------- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| label\* | string | --- | The label to render |
|
| label\* | string | | Item label |
|
||||||
| value\* | boolean | --- | The original value |
|
| value\* | boolean | | The original data value for the item |
|
||||||
| key\* | string | --- | the key of the property. |
|
| key\* | string | | Identifying key (important when editing the item) |
|
||||||
| default | boolean | false | The default value to render in case the value is empty |
|
| default | boolean | false | The default value to display if the value is empty |
|
||||||
| displayValue\* | boolean | --- | The value to render |
|
| displayValue\* | boolean | | The value to display |
|
||||||
| editable | boolean | false | Whether the property editable or not |
|
| editable | boolean | false | Toggles whether the item is editable |
|
||||||
|
|
||||||
#### Card Int Item
|
#### Card Int Item
|
||||||
|
|
||||||
CardViewIntItemModel is a property type for integer properties.
|
`CardViewIntItemModel` is a property type for integer properties.
|
||||||
|
|
||||||
```js
|
```ts
|
||||||
const intItemProperty = new CardViewIntItemModel(options);
|
const intItemProperty = new CardViewIntItemModel(options);
|
||||||
```
|
```
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| ---- | ---- | ------- | ----------- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| label\* | string | --- | The label to render |
|
| label\* | string | | Item label |
|
||||||
| value\* | integer | --- | The original value |
|
| value\* | integer | | The original data value for the item |
|
||||||
| key\* | string | --- | the key of the property. |
|
| key\* | string | | Identifying key (important when editing the item) |
|
||||||
| default | integer | --- | The default value to render in case the value is empty |
|
| default | integer | | The default value to display if the value is empty |
|
||||||
| displayValue\* | integer | --- | The value to render |
|
| displayValue\* | integer | | The value to display |
|
||||||
| editable | boolean | false | Whether the property editable or not |
|
| editable | boolean | false | Toggles whether the item is editable |
|
||||||
|
|
||||||
#### Card Float Item
|
#### Card Float Item
|
||||||
|
|
||||||
CardViewFloatItemModel is a property type for float properties.
|
`CardViewFloatItemModel` is a property type for float properties.
|
||||||
|
|
||||||
```js
|
```ts
|
||||||
const floatItemProperty = new CardViewFloatItemModel(options);
|
const floatItemProperty = new CardViewFloatItemModel(options);
|
||||||
```
|
```
|
||||||
|
|
||||||
| Name | Type | Default | Description |
|
| Name | Type | Default | Description |
|
||||||
| ---- | ---- | ------- | ----------- |
|
| ---- | ---- | ------- | ----------- |
|
||||||
| label\* | string | --- | The label to render |
|
| label\* | string | | Item label |
|
||||||
| value\* | float | --- | The original value |
|
| value\* | float | | The original data value for the item |
|
||||||
| key\* | string | --- | the key of the property. |
|
| key\* | string | | Identifying key (important when editing the item) |
|
||||||
| default | float | --- | The default value to render in case the value is empty |
|
| default | float | | The default value to display if the value is empty |
|
||||||
| displayValue\* | float | --- | The value to render |
|
| displayValue\* | float | | The value to display |
|
||||||
| editable | boolean | false | Whether the property editable or not |
|
| editable | boolean | false | Toggles whether the item is editable |
|
||||||
|
|
||||||
### Defining your custom card Item
|
|
||||||
|
|
||||||
Card item components are loaded dynamically, which makes you able to define your own custom component for the custom card item type.
|
|
||||||
|
|
||||||
Let's consider you want to have a **stardate** type to display Captain Picard's birthday (47457.1). For this, you need to do the following steps.
|
|
||||||
|
|
||||||
#### 1. Define the Model for the custom type
|
|
||||||
|
|
||||||
Your model has to extend the **CardViewBaseItemModel** and implement the **CardViewItem** and **DynamicComponentModel** interface.
|
|
||||||
_(You can check how the CardViewTextItemModel is implemented for further guidance.)_
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
|
|
||||||
|
|
||||||
export class CardViewStarDateItemModel extends CardViewBaseItemModel implements
|
|
||||||
CardViewItem, DynamicComponentModel {
|
|
||||||
type: string = 'star-date';
|
|
||||||
|
|
||||||
get displayValue() {
|
|
||||||
return this.convertToStarDate(this.value) || this.default;
|
|
||||||
}
|
|
||||||
|
|
||||||
private convertToStarDate(starTimeStamp: number): string {
|
|
||||||
// Do the magic
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 2. Define the Component for the custom type
|
|
||||||
|
|
||||||
Create your custom card view item component. Defining the selector is not important, being it a dinamically loaded component, so you can give any selector name to it, but it makes sense to follow the angular standards.
|
|
||||||
|
|
||||||
```js
|
|
||||||
@Component({
|
|
||||||
selector: 'card-view-stardateitem' // For example
|
|
||||||
...
|
|
||||||
})
|
|
||||||
export class CardViewStarDateItemComponent {
|
|
||||||
@Input()
|
|
||||||
property: CardViewStarDateItemModel;
|
|
||||||
|
|
||||||
@Input()
|
|
||||||
editable: boolean;
|
|
||||||
|
|
||||||
constructor(private cardViewUpdateService: CardViewUpdateService) {}
|
|
||||||
|
|
||||||
isEditable() {
|
|
||||||
return this.editable && this.property.editable;
|
|
||||||
}
|
|
||||||
|
|
||||||
showStarDatePicker() {
|
|
||||||
...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
To make your component editable, you can have a look on either the CardViewTextItemComponent' or on the CardViewDateItemComponent's source.
|
|
||||||
|
|
||||||
#### 3. Add you custom component to your module's entryComponents list
|
|
||||||
|
|
||||||
For Angular to be able to load your custom component dynamically, you have to register your component in your modules entryComponents.
|
|
||||||
|
|
||||||
```js
|
|
||||||
@NgModule({
|
|
||||||
imports: [...],
|
|
||||||
declarations: [
|
|
||||||
CardViewStarDateItemComponent
|
|
||||||
],
|
|
||||||
entryComponents: [
|
|
||||||
CardViewStarDateItemComponent
|
|
||||||
],
|
|
||||||
exports: [...]
|
|
||||||
})
|
|
||||||
export class MyModule {}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 4. Bind your custom component to the custom model type, enabling Angular's dynamic component loader to find it.
|
|
||||||
|
|
||||||
For mapping each type to their Component, there is the **CardItemTypeService**. This service extends the **DynamicComponentMapper** abstract class.
|
|
||||||
This CardItemTypeService is responible for the type resolution, it contains all the default components (e.g.: text, date, etc...) also. In order to make your component available, you need to extend the list of possible components.
|
|
||||||
|
|
||||||
You can extend this list the following way:
|
|
||||||
|
|
||||||
```js
|
|
||||||
@Component({
|
|
||||||
...
|
|
||||||
providers: [ CardItemTypeService ] // If you don't want to pollute the main instance of the CardItemTypeService service
|
|
||||||
...
|
|
||||||
})
|
|
||||||
export class SomeParentComponent {
|
|
||||||
|
|
||||||
constructor(private cardItemTypeService: CardItemTypeService) {
|
|
||||||
cardItemTypeService.setComponentTypeResolver('star-date', () => CardViewStarDateItemComponent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## See also
|
## See also
|
||||||
|
|
||||||
- [Card view update service](card-view-update.service.md)
|
- [Card View Update service](card-view-update.service.md)
|
||||||
|
- [Card View Item interface](card-view-item.interface.md)
|
||||||
|
@@ -1,7 +1,9 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Active
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
---
|
---
|
||||||
|
|
||||||
# Form field component
|
# Form field component
|
||||||
|
|
||||||
A form field in an APS form.
|
A form field in an APS form.
|
||||||
@@ -29,8 +31,7 @@ based on the field type or the metadata information.
|
|||||||
## Details
|
## Details
|
||||||
|
|
||||||
You would typically not use this component directly but instead use the `<adf-form>` component, which under the hood
|
You would typically not use this component directly but instead use the `<adf-form>` component, which under the hood
|
||||||
uses `<adf-form-field>` components to render the form fields. See next section for how each field in a form definition
|
uses `<adf-form-field>` components to render the form fields.
|
||||||
is mapped to a form field component (i.e. UI widget) implementation.
|
|
||||||
|
|
||||||
### Field Type -> Form Field Component mappings
|
### Field Type -> Form Field Component mappings
|
||||||
|
|
||||||
|
@@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
Added: v2.0.0
|
Added: v2.0.0
|
||||||
Status: Active
|
Status: Active
|
||||||
|
Last reviewed: 2018-05-08
|
||||||
---
|
---
|
||||||
|
|
||||||
# Form Rendering service
|
# Form Rendering service
|
||||||
|
@@ -14,7 +14,8 @@ var excludePatterns = [
|
|||||||
var nameExceptions = {
|
var nameExceptions = {
|
||||||
"datatable.component": "DataTableComponent",
|
"datatable.component": "DataTableComponent",
|
||||||
"tasklist.service": "TaskListService",
|
"tasklist.service": "TaskListService",
|
||||||
"text-mask.component": "InputMaskDirective"
|
"text-mask.component": "InputMaskDirective",
|
||||||
|
"card-item-types.service": "CardItemTypeService"
|
||||||
};
|
};
|
||||||
var undocMethodNames = {
|
var undocMethodNames = {
|
||||||
"ngOnChanges": 1
|
"ngOnChanges": 1
|
||||||
|
@@ -33,7 +33,8 @@ let excludePatterns = [
|
|||||||
let nameExceptions = {
|
let nameExceptions = {
|
||||||
"datatable.component": "DataTableComponent",
|
"datatable.component": "DataTableComponent",
|
||||||
"tasklist.service": "TaskListService",
|
"tasklist.service": "TaskListService",
|
||||||
"text-mask.component": "InputMaskDirective"
|
"text-mask.component": "InputMaskDirective",
|
||||||
|
"card-item-types.service": "CardItemTypeService"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user