Welcome to the Alfresco Builder Network

Displays a configurable property list renderer.

adf-custom-view

Basic Usage

Defining properties from HTML:

<adf-card-view
    [properties]="[{label: 'My Label', value: 'My value'}]"
    [editable]="false">
</adf-card-view>

Defining properties from Typescript:

 this.properties = [
    new CardViewTextItemModel({
        label: 'Name',
        value: 'Spock',
        key: 'name',
        default: 'default bar' ,
        multiline: false,
        icon: 'icon';
    }),
    new CardViewMapItemModel({
        label: 'My map',
        value: new Map([['999', 'My Value']]),
        key: 'map',
        default: 'default map value' ,
        clickable: true
    }),
    new CardViewDateItemModel({
        label: 'Date of birth',
        value: someDate,
        key: 'date-of-birth',
        default: new Date(),
        format: '<any format that momentjs accepts>',
        editable: true
    }),
    new CardViewDatetimeItemModel({
        label: 'Datetime of birth',
        value: someDatetime,
        key: 'datetime-of-birth',
        default: new Date(),
        format: '<any format that momentjs accepts>',
        editable: true
    }),
    new CardViewBoolItemModel({
        label: 'Vulcanian',
        value: true,
        key: 'vulcanian',
        default: false
    }),
    new CardViewIntItemModel({
        label: 'Intelligence',
        value: 213,
        key: 'intelligence',
        default: 1
    }),
    new CardViewFloatItemModel({
        label: 'Mental stability',
        value: 9.9,
        key: 'mental-stability',
        default: 0.0
    }),
    new CardViewKeyValuePairsItemModel({
        label: 'Variables',
        value: [],
        key: 'key-value-pairs'
    }),
    new CardViewSelectItemModel({
        label: 'Select box',
        value: 'one',
        options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
        key: 'select'
    }),
    ...
]

Class members

Properties

NameTypeDefault valueDescription
displayEmptybooleantrueToggles whether or not to show empty items in non-editable mode.
editablebooleanToggles whether or not the items can be edited.
propertiesCardViewItem[](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:

Each of these types implements the Card View Item interface:

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 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 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

CardViewTextItemModel is a property type for text properties.

const textItemProperty = new CardViewTextItemModel(options);
NameTypeDefaultDescription
label*stringItem label
value*anyThe original data value for the item
key*stringIdentifying key (important when editing the item)
defaultanyThe default value to display if the value is empty
displayValue*stringThe value to display
editablebooleanfalseToggles whether the item is editable
clickablebooleanfalseToggles whether the property responds to clicks
iconstringThe material icon to show beside the item if it is clickable
multilinebooleanfalseSingle or multiline text
pipesCardViewTextItemPipeProperty[][]Pipes to be applied to the text before display
Using pipes with a Card Text Item

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:

const myWonderfulPipe1: PipeTransform = <whatever PipeTransform implmentation>;
const myWonderfulPipe2: PipeTransform = <whatever PipeTransform implmentation>;

new CardViewTextItemModel({
    label: 'some label',
    value: someValue,
    key: 'some-key',
    pipes: [
    { pipe: myWonderfulPipe1, params: ['first-param', 'second-param'] },
    { pipe: myWonderfulPipe2, params: ['first-param', 'second-param'] }
    ]
});

Card Map Item

CardViewMapItemModel is a property type for map properties.

const mapItemProperty = new CardViewMapItemModel(options);
NameTypeDefaultDescription
label*stringItem label
value*MapA map that contains the key value pairs
key*stringIdentifying key (important when editing the item)
defaultanyThe default value to display if the value is empty
displayValue*stringThe value to display
clickablebooleanfalseToggles whether the property responds to clicks

Card Date Item

CardViewDateItemModel is a property type for date properties.

const dateItemProperty = new CardViewDateItemModel(options);
NameTypeDefaultDescription
label*stringItem label
value*anyThe original data value for the item
key*stringIdentifying key (important when editing the item)
defaultanyThe default value to display if the value is empty
displayValue*anyThe value to display
editablebooleanfalseToggles whether the item is editable
formatboolean"MMM DD YYYY"Any date format that momentjs accepts

Card Datetime Item

CardViewDatetimeItemModel is a property type for datetime properties.

const datetimeItemProperty = new CardViewDatetimeItemModel(options);
NameTypeDefaultDescription
label*stringItem label
value*anyThe original data value for the item
key*stringIdentifying key (important when editing the item)
defaultanyanyThe default value to display if the value is empty
displayValue*stringThe value to display
editablebooleanfalseToggles whether the item is editable
formatboolean"MMM DD YYYY HH:mm"Any datetime format that momentjs accepts

Card Bool Item

CardViewBoolItemModel is a property type for boolean properties.

const boolItemProperty = new CardViewBoolItemModel(options);
NameTypeDefaultDescription
label*stringItem label
value*booleanThe original data value for the item
key*stringIdentifying key (important when editing the item)
defaultbooleanfalseThe default value to display if the value is empty
displayValue*booleanThe value to display
editablebooleanfalseToggles whether the item is editable

Card Int Item

CardViewIntItemModel is a property type for integer properties.

const intItemProperty = new CardViewIntItemModel(options);
NameTypeDefaultDescription
label*stringItem label
value*integerThe original data value for the item
key*stringIdentifying key (important when editing the item)
defaultintegerThe default value to display if the value is empty
displayValue*integerThe value to display
editablebooleanfalseToggles whether the item is editable

Card Float Item

CardViewFloatItemModel is a property type for float properties.

const floatItemProperty = new CardViewFloatItemModel(options);
NameTypeDefaultDescription
label*stringItem label
value*floatThe original data value for the item
key*stringIdentifying key (important when editing the item)
defaultfloatThe default value to display if the value is empty
displayValue*floatThe value to display
editablebooleanfalseToggles whether the item is editable

Card Key Value Pairs Item

CardViewKeyValuePairsItemModel is a property type for key-value properties.

const keyValuePairsItemProperty = new CardViewKeyValuePairsItemModel(options);
NameTypeDefaultDescription
label*stringItem label
key*stringIdentifying key (important when editing the item)
editablebooleanfalseToggles whether the item is editable
value*[{ name: '', value: '' }, ...]The original data value for the item

Card Select Item

CardViewSelectItemModel is a property type for select properties.

const selectItemProperty = new CardViewSelectItemModel(options);
NameTypeDefaultDescription
label*stringItem label
key*stringIdentifying key (important when editing the item)
editablebooleanfalseToggles whether the item is editable
valuestringThe original data value for the item
options$*Observable<CardViewSelectItemOption[]>The original data value for the item

See also

Interested in trying Alfresco?

Try Now