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

Object Marker

Summary

  • This indicates the technical status of an object.
  • It is enabled for the dynamic page layout, snapping header, object page header, upload collection, and object list item.
  • The technical status can be represented as and icon, with an icon and text, or as text only, depending on the screen size.
  • Currently, the following technical statuses can be visualized by the object marker:
    1. Flag
    2. Favorite
    3. Editing Status (Draft, Locked, Unsaved Changes)
    4. The editing status is part of the draft handling concept.

Platform vs. Core Implementation

No Core technical design available currently.

Example

<fdp-object-marker    
                      [id]="id of the element'"
                      [type]="markerType"
                      [show]="iconOnly|textOnly|iconAndText"
                      (click)="onpress()">
                       {{marker text}}</fdp-object-marker>

Design

Property Bindings

[type]: MarkerType

Type of markers.

export type MarkerType = 'favorite'|'flagged'|'locked'|'lockedBy'|'unsaved'|'unsavedBy'|'draft';

[show]: ShowInMarker

what to be visible in marker

export type ShowInMarker = iconOnly|textOnly|iconAndText;

Eventbinding

[click]="onMarkerclick()'"

Event fired on click of Marker.


i18n

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

Special Usecase: No

  • fdp-object-marker can be supported as:
<fdp-object-marker    
                      [id]="id of the element'"
                      i18n="@@content"
                      [type]="markerType"
                      [show]="iconOnly|textOnly|iconAndText"
                      (click)="onpress()">
                       {{marker text}}
</fdp-object-marker>

Redesign Required: No