Platform: Object List Item Component V1.0 Technical Design - SAP/fundamental-ngx GitHub Wiki

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}}"
                        [icon]="{{item?.icon}}"
                        [number]="{{item?.number}}"
                        [numberStatus]="{{item?.(error| information| none| success| warning)}}"
                        [numberUnit]="{{item?.unit}}"
                        [introductionText]=="{{item?.introduction}}"
			[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

#### `[number]="{{item.number}}:string"` 
Attribute used to hold item number. displayed on screen unlike id.

#### ` [numberStatus]:Status` 
Defines number and number unit value status.
```ts
export type Status = 'error| information| none| success| warning';

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

 Defines units for the item number.

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

 consists of introductory text for the item.

[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. Object Attribute
  2. Object Number
  3. Object Identifier
  4. Object Status
  5. Object Marker
  6. List signature

Additional Notes

  1. List signature
  2. ObjectAttribute
  3. ObjectStatus
  4. Object Number
  5. ObjectMarker
  6. ObjectIdentifier

Are used along with this component.

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

  • fdp-object-list-item can be supported as:
<fdp-object-list-item *ngFor="let item of listItems"
                        [id]="{{item?.id}}"
			i18n-title="@@title"
			title="{{item?.name}}"
                        [icon]="{{item?.icon}}"
                        [number]="{{item?.number}}"
                        [numberStatus]="{{item?.(error| information| none| success| warning)}}"
                        i18n-numberUnit="@@numberUnit"
			numberUnit="{{item?.unit}}"
                        i18n-introductionText="@@introductionText"
			introductionText=="{{item?.introduction}}"
			[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>

The content components will follow the i18n guidelines defined for them.

  • The number attribute can be supported by using DecimalPipe which can automatically translate numbers depending on the locale.

Redesign Required: No

Questions:

Kevin:

  • Remove titleDirection, numberTextDirection, and introTextDirection, 'RTL' should be handled internally by the component, ideally by CSS rules or alternatively using the RtlService-Done
⚠️ **GitHub.com Fallback** ⚠️