Card View component

Displays a configurable property list renderer.

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',
        clickCallBack : ()=>{ myClickImplementation()} 
    }),
    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'
    }),
    new CardViewArrayItemModel({
        label: 'Array of items',
        value: '',
        items$: of([
            { icon: 'person', value: 'One' }, { icon: 'person', value: 'Two' },
            { icon: 'person', value: 'Three' }, { icon: 'person', value: 'Four' }
            ]),
        key: 'array',
        default: 'Empty',
        noOfItemsToDisplay: 2
    })
    ...
]

Class members

Properties

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 - for text items
• CardViewMapItemModel - for map items
• CardViewDateItemModel - for date items
• CardViewDatetimeItemModel - for datetime items
• CardViewBoolItemModel - for bool items (checkbox)
• CardViewIntItemModel - for integer items
• CardViewFloatItemModel - for float items
• CardViewKeyValuePairsItemModel - for key-value-pairs items
• CardViewSelectItemModel - for select items
• CardViewArrayItemModel - for array items

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

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

Card Date Item

CardViewDateItemModel is a property type for date properties.

const dateItemProperty = new CardViewDateItemModel(options);

Card Datetime Item

CardViewDatetimeItemModel is a property type for datetime properties.

const datetimeItemProperty = new CardViewDatetimeItemModel(options);

Card Bool Item

CardViewBoolItemModel is a property type for boolean properties.

const boolItemProperty = new CardViewBoolItemModel(options);

Card Int Item

CardViewIntItemModel is a property type for integer properties.

const intItemProperty = new CardViewIntItemModel(options);

Card Float Item

CardViewFloatItemModel is a property type for float properties.

const floatItemProperty = new CardViewFloatItemModel(options);

Card Key Value Pairs Item

CardViewKeyValuePairsItemModel is a property type for key-value properties.

const keyValuePairsItemProperty = new CardViewKeyValuePairsItemModel(options);

Card Select Item

CardViewSelectItemModel is a property type for select properties.

const selectItemProperty = new CardViewSelectItemModel(options);

Card Array Item

CardViewArrayItemModel is a property type for array properties.

const arrayItemProperty = new CardViewArrayItemModel(items);

See also

• Card View Update service
• Card View Item interface