|
|
@@ -9,17 +9,17 @@ Displays a configurable property list renderer.
|
|
|
|
<!-- toc -->
|
|
|
|
<!-- toc -->
|
|
|
|
|
|
|
|
|
|
|
|
- [Basic Usage](#basic-usage)
|
|
|
|
- [Basic Usage](#basic-usage)
|
|
|
|
* [Properties](#properties)
|
|
|
|
- [Properties](#properties)
|
|
|
|
- [Details](#details)
|
|
|
|
- [Details](#details)
|
|
|
|
* [Editing](#editing)
|
|
|
|
- [Editing](#editing)
|
|
|
|
* [Defining properties](#defining-properties)
|
|
|
|
- [Defining properties](#defining-properties)
|
|
|
|
+ [Card Text Item](#card-text-item)
|
|
|
|
- [Card Text Item](#card-text-item)
|
|
|
|
+ [Card Map Item](#card-map-item)
|
|
|
|
- [Card Map Item](#card-map-item)
|
|
|
|
+ [Card Date Item](#card-date-item)
|
|
|
|
- [Card Date Item](#card-date-item)
|
|
|
|
* [Defining your custom card Item](#defining-your-custom-card-item)
|
|
|
|
- [Defining your custom card Item](#defining-your-custom-card-item)
|
|
|
|
+ [1. Define the model for the custom type](#1-define-the-model-for-the-custom-type)
|
|
|
|
- [1. Define the model for the custom type](#1-define-the-model-for-the-custom-type)
|
|
|
|
+ [2. Define the component for the custom type](#2-define-the-component-for-the-custom-type)
|
|
|
|
- [2. Define the component for the custom type](#2-define-the-component-for-the-custom-type)
|
|
|
|
+ [3. Add you custom component to your module's entryComponents list](#3-add-you-custom-component-to-your-modules-entrycomponents-list)
|
|
|
|
- [3. Add you custom component to your module's entryComponents list](#3-add-you-custom-component-to-your-modules-entrycomponents-list)
|
|
|
|
- [See also](#see-also)
|
|
|
|
- [See also](#see-also)
|
|
|
|
|
|
|
|
|
|
|
|
<!-- tocstop -->
|
|
|
|
<!-- tocstop -->
|
|
|
@@ -33,14 +33,13 @@ Displays a configurable property list renderer.
|
|
|
|
[properties]="[{label: 'My Label', value: 'My value'}]"
|
|
|
|
[properties]="[{label: 'My Label', value: 'My value'}]"
|
|
|
|
[editable]="false">
|
|
|
|
[editable]="false">
|
|
|
|
</adf-card-view>
|
|
|
|
</adf-card-view>
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Properties
|
|
|
|
### Properties
|
|
|
|
|
|
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| ---- | ---- | ------- | ----------- |
|
|
|
|
| properties | [CardViewItem](#cardviewitem)[] | - | (**required**) The custom view to render |
|
|
|
|
| properties | [CardViewItem](#defining-properties)\[] | - | (**required**) The custom view to render |
|
|
|
|
| editable | boolean | - | If the component editable or not |
|
|
|
|
| editable | boolean | - | If the component editable or not |
|
|
|
|
| displayEmpty | boolean | true | Whether to show empty properties in non-editable mode |
|
|
|
|
| displayEmpty | boolean | true | Whether to show empty properties in non-editable mode |
|
|
|
|
|
|
|
|
|
|
|
@@ -51,8 +50,9 @@ You define the property list, the CardViewComponent does the rest. Each property
|
|
|
|
### Editing
|
|
|
|
### Editing
|
|
|
|
|
|
|
|
|
|
|
|
The card view can optionally allow its properties to be edited. You can control the editing of the properties in two level.
|
|
|
|
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*
|
|
|
|
- **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.
|
|
|
|
If you set the global editable parameter to false, no properties can be edited regardless of what is set inside the property.
|
|
|
|
|
|
|
|
|
|
|
@@ -78,13 +78,13 @@ export interface CardViewItem {
|
|
|
|
|
|
|
|
|
|
|
|
At the moment these are the models supported:
|
|
|
|
At the moment these are the models supported:
|
|
|
|
|
|
|
|
|
|
|
|
- **CardViewTextItemModel** - *for text items*
|
|
|
|
- **CardViewTextItemModel** - _for text items_
|
|
|
|
- **CardViewMapItemModel** - *for map items*
|
|
|
|
- **CardViewMapItemModel** - _for map items_
|
|
|
|
- **CardViewDateItemModel** - *for date items*
|
|
|
|
- **CardViewDateItemModel** - _for date items_
|
|
|
|
- **CardViewDatetimeItemModel** - *for datetime items*
|
|
|
|
- **CardViewDatetimeItemModel** - _for datetime items_
|
|
|
|
- **CardViewBoolItemModel** - *for bool items (checkbox)*
|
|
|
|
- **CardViewBoolItemModel** - _for bool items (checkbox)_
|
|
|
|
- **CardViewIntItemModel** - *for integers items*
|
|
|
|
- **CardViewIntItemModel** - _for integers items_
|
|
|
|
- **CardViewFloatItemModel** - *for float items*
|
|
|
|
- **CardViewFloatItemModel** - _for float items_
|
|
|
|
|
|
|
|
|
|
|
|
Each of them extends the abstract CardViewBaseItemModel class to add some custom functionality to the basic behaviour.
|
|
|
|
Each of them extends the abstract CardViewBaseItemModel class to add some custom functionality to the basic behaviour.
|
|
|
|
|
|
|
|
|
|
|
@@ -151,16 +151,16 @@ const textItemProperty = new CardViewTextItemModel(options);
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| ---- | ---- | ------- | ----------- |
|
|
|
|
| label* | string | --- | The label to render |
|
|
|
|
| label\* | string | --- | The label to render |
|
|
|
|
| value* | any | --- | The original value |
|
|
|
|
| value\* | any | --- | The original value |
|
|
|
|
| key* | string | --- | the key of the property. Have an important role when editing the property. |
|
|
|
|
| key\* | string | --- | the key of the property. Have an important role when editing the property. |
|
|
|
|
| default | any | --- | The default value to render in case the value is empty |
|
|
|
|
| default | any | --- | The default value to render in case the value is empty |
|
|
|
|
| displayValue* | string | --- | The value to render |
|
|
|
|
| displayValue\* | string | --- | The value to render |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
| clickable | boolean | false | Whether the property clickable or not |
|
|
|
|
| clickable | boolean | false | Whether the property clickable or not |
|
|
|
|
| multiline | string | false | Single or multiline text |
|
|
|
|
| multiline | string | false | Single or multiline text |
|
|
|
|
| pipes | CardViewTextItemPipeProperty[] | [] | Pipes to be applied on the displayValue |
|
|
|
|
| pipes | CardViewTextItemPipeProperty\[] | \[] | Pipes to be applied on the displayValue |
|
|
|
|
|
|
|
|
|
|
|
|
##### Using pipes in Card Text Item
|
|
|
|
##### Using pipes in Card Text Item
|
|
|
|
|
|
|
|
|
|
|
@@ -190,12 +190,12 @@ const mapItemProperty = new CardViewMapItemModel(options);
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| ---- | ---- | ------- | ----------- |
|
|
|
|
| label* | string | --- | The label to render |
|
|
|
|
| label\* | string | --- | The label to render |
|
|
|
|
| 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 | --- | the key of the property. |
|
|
|
|
| default | any | --- | The default value to render in case the value is empty |
|
|
|
|
| default | any | --- | The default value to render in case the value is empty |
|
|
|
|
| displayValue* | string | --- | The value to render |
|
|
|
|
| displayValue\* | string | --- | The value to render |
|
|
|
|
| clickable | boolean | false | Whether the property clickable or not |
|
|
|
|
| clickable | boolean | false | Whether the property clickable or not |
|
|
|
|
|
|
|
|
|
|
|
|
#### Card Date Item
|
|
|
|
#### Card Date Item
|
|
|
@@ -207,12 +207,12 @@ const dateItemProperty = new CardViewDateItemModel(options);
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| ---- | ---- | ------- | ----------- |
|
|
|
|
| label* | string | --- | The label to render |
|
|
|
|
| label\* | string | --- | The label to render |
|
|
|
|
| value* | any | --- | The original value |
|
|
|
|
| value\* | any | --- | The original value |
|
|
|
|
| key* | string | --- | the key of the property. |
|
|
|
|
| key\* | string | --- | the key of the property. |
|
|
|
|
| default | any | --- | The default value to render in case the value is empty |
|
|
|
|
| default | any | --- | The default value to render in case the value is empty |
|
|
|
|
| displayValue* | any | --- | The value to render |
|
|
|
|
| displayValue\* | any | --- | The value to render |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
| format | boolean | "MMM DD YYYY" | any format that momentjs accepts |
|
|
|
|
| format | boolean | "MMM DD YYYY" | any format that momentjs accepts |
|
|
|
|
|
|
|
|
|
|
|
@@ -225,12 +225,12 @@ const datetimeItemProperty = new CardViewDatetimeItemModel(options);
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| ---- | ---- | ------- | ----------- |
|
|
|
|
| label* | string | --- | The label to render |
|
|
|
|
| label\* | string | --- | The label to render |
|
|
|
|
| value* | any | --- | The original value |
|
|
|
|
| value\* | any | --- | The original value |
|
|
|
|
| key* | string | --- | the key of the property. |
|
|
|
|
| key\* | string | --- | the key of the property. |
|
|
|
|
| default | any | any | The default value to render in case the value is empty |
|
|
|
|
| default | any | any | The default value to render in case the value is empty |
|
|
|
|
| displayValue* | string | --- | The value to render |
|
|
|
|
| displayValue\* | string | --- | The value to render |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
| format | boolean | "MMM DD YYYY HH:mm" | any format that momentjs accepts |
|
|
|
|
| format | boolean | "MMM DD YYYY HH:mm" | any format that momentjs accepts |
|
|
|
|
|
|
|
|
|
|
|
@@ -243,12 +243,12 @@ const boolItemProperty = new CardViewBoolItemModel(options);
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| ---- | ---- | ------- | ----------- |
|
|
|
|
| label* | string | --- | The label to render |
|
|
|
|
| label\* | string | --- | The label to render |
|
|
|
|
| value* | boolean | --- | The original value |
|
|
|
|
| value\* | boolean | --- | The original value |
|
|
|
|
| key* | string | --- | the key of the property. |
|
|
|
|
| key\* | string | --- | the key of the property. |
|
|
|
|
| default | boolean | false | The default value to render in case the value is empty |
|
|
|
|
| default | boolean | false | The default value to render in case the value is empty |
|
|
|
|
| displayValue* | boolean | --- | The value to render |
|
|
|
|
| displayValue\* | boolean | --- | The value to render |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
|
|
|
|
|
|
|
|
#### Card Int Item
|
|
|
|
#### Card Int Item
|
|
|
@@ -260,12 +260,12 @@ const intItemProperty = new CardViewIntItemModel(options);
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| ---- | ---- | ------- | ----------- |
|
|
|
|
| label* | string | --- | The label to render |
|
|
|
|
| label\* | string | --- | The label to render |
|
|
|
|
| value* | integer | --- | The original value |
|
|
|
|
| value\* | integer | --- | The original value |
|
|
|
|
| key* | string | --- | the key of the property. |
|
|
|
|
| key\* | string | --- | the key of the property. |
|
|
|
|
| default | integer | --- | The default value to render in case the value is empty |
|
|
|
|
| default | integer | --- | The default value to render in case the value is empty |
|
|
|
|
| displayValue* | integer | --- | The value to render |
|
|
|
|
| displayValue\* | integer | --- | The value to render |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
|
|
|
|
|
|
|
|
#### Card Float Item
|
|
|
|
#### Card Float Item
|
|
|
@@ -277,12 +277,12 @@ const floatItemProperty = new CardViewFloatItemModel(options);
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
| ---- | ---- | ------- | ----------- |
|
|
|
|
| label* | string | --- | The label to render |
|
|
|
|
| label\* | string | --- | The label to render |
|
|
|
|
| value* | float | --- | The original value |
|
|
|
|
| value\* | float | --- | The original value |
|
|
|
|
| key* | string | --- | the key of the property. |
|
|
|
|
| key\* | string | --- | the key of the property. |
|
|
|
|
| default | float | --- | The default value to render in case the value is empty |
|
|
|
|
| default | float | --- | The default value to render in case the value is empty |
|
|
|
|
| displayValue* | float | --- | The value to render |
|
|
|
|
| displayValue\* | float | --- | The value to render |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
| editable | boolean | false | Whether the property editable or not |
|
|
|
|
|
|
|
|
|
|
|
|
### Defining your custom card Item
|
|
|
|
### Defining your custom card Item
|
|
|
@@ -294,7 +294,7 @@ Let's consider you want to have a **stardate** type to display Captain Picard's
|
|
|
|
#### 1. Define the Model for the custom type
|
|
|
|
#### 1. Define the Model for the custom type
|
|
|
|
|
|
|
|
|
|
|
|
Your model has to extend the **CardViewBaseItemModel** and implement the **CardViewItem** and **DynamicComponentModel** interface.
|
|
|
|
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.)*
|
|
|
|
_(You can check how the CardViewTextItemModel is implemented for further guidance.)_
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
```js
|
|
|
|
import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
|
|
|
|
import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
|
|
|
@@ -339,8 +339,8 @@ export class CardViewStarDateItemComponent {
|
|
|
|
...
|
|
|
|
...
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
To make your component editable, you can have a look on either the CardViewTextItemComponent' or on the CardViewDateItemComponent's source.
|
|
|
|
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
|
|
|
|
#### 3. Add you custom component to your module's entryComponents list
|
|
|
@@ -383,7 +383,9 @@ export class SomeParentComponent {
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
|
|
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- seealso start -->
|
|
|
|
<!-- seealso start -->
|
|
|
|
|
|
|
|
|
|
|
|
## See also
|
|
|
|
## See also
|
|
|
|
|
|
|
|
|
|
|
|
- [Card view update service](card-view-update.service.md)
|
|
|
|
- [Card view update service](card-view-update.service.md)
|
|
|
|