Platform: Object List Item Component V1.0 Technical Design

Object List Item Component

Summary

The object list item is mainly used in the master list of apps, where it primarily offers a quick overview of an object within a list. The text sizes are limited (before the text truncates) and object list items usually allow the user to navigate to the details of an object. Therefore, the object list item should only contain essential information that is necessary for the user to identify which object to work on first. Long descriptive texts should be avoided.

Design

<fdp-list
    [id]="list Id"
    [headerTitle]="header title"
    [footerText]="footer text"
     --------
    >
    <fdp-object-list-item *ngFor="let item of listItems"
                        [id]="{{item.id}}"
			[title]="{{item.name}}"
                        [titleDirection]="{{item.(ltr|rtl|default)}}"
                        [icon]="{{item.icon}}"
                        [number]="{{item.number}}"
                        [numberStatus]="{{item.(error| information| none| success| warning)}}"
                        [numberTextDirection]="{{item.(ltr|rtl|default)}}"
                        [numberUnit]="{{item.unit}}"
                        [introductionText]=="{{item.introduction}}"
                        [introTextDirection]="{{item.(ltr|rtl|default)}}"
			[type]="{{item.active}}"
			(click)="onitemPress">
                         <fdp-object-attribute [textActive]="{{item.(true|false)}}"....../>
                         <fd-object-status [objectStatus]=“{{item.(critical..)}}” [message]=“{{item.(critical..)}}”>{{item.text}}</fd-object-status> 
                        <fdp-object-marker [marker]="{{item.Flagged}}" [visibleItem]=“{{item.(icons)}}”..../>

                         <ng-content></ng-content>
		</fdp-object-list-item>
</fdp-list>

Property Bindings

id: string

id of the object list item it is optional.

title: string

title of the of item

[titleDirection]="ltr|rtl|default"

Position text of the item title in below positions.

1. LTR (left-to-right): left-to-right text direction
2. RTL (right-to-left): right-to-left text direction
3. default: the item title inherits the text direction from its parent controller.

export type directions = 'ltr'|'rtl'|'default';

[number]="{{item.number}}:string"

Attribute used to hold item number. displayed on screen unlike id.

[numberStatus]="error| information| none| success| warning"

Defines number and number unit value status.

export type status = 'error| information| none| success| warning';

[numberTextDirection]="ltr|rtl|default"

Position text of the item number in below directions.

1. LTR (left-to-right): left-to-right text direction
2. RTL (right-to-left): right-to-left text direction
3. default: the item title inherits the text direction from its parent controller.

export type directions = 'ltr'|'rtl'|'default';

[numberUnit]="{{item.unit}}"

 Defines units for the item number.

[introductionText]=="{{item.introduction}}"

 consists of introductory text for the item.

[introTextDirection]="ltr|rtl|default"

Position text of the item introduction in below directions.

1. LTR (left-to-right): left-to-right text direction
2. RTL (right-to-left): right-to-left text direction
3. default: the item title inherits the text direction from its parent controller.

export type directions = 'ltr'|'rtl'|'default';

[icon]="{{item.icon}}"

Icon that identifies the item 

Event Bindings

(click)="onitemPress"

Fires when item is clicked.

Template:

<li fd-list-item id="listitem”………………….>
 <ng-content></ng-content>
</li>

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

1. ObjectAttribute
2. Object Status
3. ObjectMarker
4. List signature

Additional Notes

1. List signature
2. ObjectAttribute
3. ObjectStatus
4. ObjectMarker

Are used along with this component.

Questions: