mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
06992196cd
* [ADF-2824] Reviewed card view docs * [ADF-2824] Reviewed doc for core and content services * [ADF-2824] Added class name exception to prop script
150 lines
4.6 KiB
Markdown
150 lines
4.6 KiB
Markdown
---
|
|
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) |