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]="ltr|rtl|default"
                        [number]="{{item.number}}"
                        [numberStatus]="error| information| none| success| warning"
                        [numberTextDirection]="ltr|rtl|default"
                        [numberUnit]="{{item.unit}}"
                        [introductionText]=="{{item.introduction}}"
                        [introTextDirection]="ltr|rtl|default"
			[type]="{{item.active}}"
			(press)="onListItemPress"
			[number]="{{
				parts:[{path:'Price'},{path:'CurrencyCode'}],
				type: 'type.Currency',
				formatOptions: {showMeasure: false}
			}}"
			[numberUnit]="{{item.currencyCode}}">
			<fdp-first-status>
				<fd-object-status
					[text]="{{item.status}}"
					[state]="{
						path: '{{item.status}}',
						formatter: 'ObjectListItem.Formatter.status'
					}" />
			</fdp-first-status>
			<fdp-object-attribute [text]="{{item.weightMeasure}} {{item.weightUnit}}" />
			<fdp-object-attribute [text]="{{item.width} x {{item.depth}} x {{item.Height}} {{item.dimUnit}" />
		</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.

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

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

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

[background]="solid|translucent|transparent"

  Sets the background style for the controller. 
  Depending on the theme, we can change the state of the background from Solid/ to Translucent/ to Transparent.

Event Bindings

(delete)="handleDelete"

Fires when item is deleted by user interaction inside the List.

(selectionChange)="onSelectionChange"

Fires when selection is changed by user interaction inside the List.

Template:

<div id=“header”……../>
<div id=“body”>
<ul fd-list id="list”………………….>
 <ng-content></ng-content>
</ul>
</div>
<div id=“footer” …../>

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

Additional Notes

*ngFor="let item of listItems"

To loop the list of items contained within this control.

Questions:

Frank

• I am confused with the ngFor thign in there. Usually you have a list as container and list-items. so ngFor here is not the right thing what do you think? -

Yes you are right, sorry I misplaced, did that change now.

• Is this headerText or Title / label? Let's be more specific

      _Changes Done_

• isBorder is more like a boolean hasboarder yes no, but when you have more options it does not fit in. more like borderType _

       -Changes Done_
  

• You should think of to support both imperative as well as declarative way so most of the bindings here first more to list item and some to its parent container.

  Yes Frank, I am considering it by exploring fiori docs, angular material and primeNg to achieve the same,

As of now the properties which are declared in list container as per understanding has to be set on the container level. whereas iterating a list and getting items should be in list-item. I will try to submit at least 1 list item in a couple of days with separation.

• I am not sure if I am clear about this <fd-object/// - Can you give some examples how it is going to be used ?

_ -_Added above _ _

1. _ As per fiori list contains 6 list items. These items can be of various types depending on the use case and on the content they have.. _ _ for example:_ _ The standard list item: it is used for less complex entries, such as when the user selects an item in a dialog._ _ The object list item: it consists of a title, key figure, attributes, and a status, it contains the most important information about an object.etc_

• is mode more selectionMode-

   _Changes Done_

• could this be also part of Form? Like showing some list of items?

• As per Fiori3 Lists are mostly used in the master list for a master-detail scenario using the flexible column layout, as well as in popovers or dialogs. For certain use cases, lists can also be used in the dynamic page layout.

And as per my understanding in general, form does not shows huge list of data. We can use select, combobox,menu etc for it. Please let me know in case my understanding is correct. I will get it confimed with Manju as well.