Tile

Klickbare Kachel im Fiori-Stil zur Anzeige eines Kennwerts (KPI, Status, Aufgabenanzahl). Tiles werden meist in einer DynamicFlexBox angeordnet und können statisch im Designer oder dynamisch über die ABAP-API erzeugt werden.

Designer-Attribute

Attribut	Beschreibung	Default
`controlId`	Eindeutige ID	automatisch generiert
`width`	Breite der Kachel (CSS-Wert)	–
`header`	Hauptzeile (KPI-Titel)	–
`subheader`	Unterzeile	–
`backgroundImage`	Hintergrundbild-URL	–
`sizeBehavior`	Größenverhalten der Kachel. Werte: `Responsive`, `Small`	`Responsive`
`mode`	Darstellungsmodus. Werte: `ContentMode`, `HeaderMode`, `LineMode`	`ContentMode`
`frameType`	Rahmenformat. Werte: `OneByOne`, `TwoByOne`, `TwoThirds`, `Auto`, `TwoByHalf`, `OneByHalf`, `Stretch`	`OneByOne`
`visible`	Sichtbar	`true`
`footer`	Fußzeile	–
`footerColor`	Indikationsfarbe für den Footer. Werte: `Neutral`, `Good`, `Critical`, `Error`, `None`	`Neutral`
`unit`	Einheit (z.B. `€`, `%`)	–
`spanS` / `spanM` / `spanL` / `spanXL`	Breite im Grid-Layout	`12`

GenericTileNumericContent

Attribut	Beschreibung	Default
`controlId`	Eindeutige ID der Komponente	automatisch generiert
`width`	Breite (CSS-Wert)	–
`header`	Hauptzeile (KPI-Titel)	–
`subheader`	Unterzeile	–
`backgroundImage`	Hintergrundbild-URL	–
`sizeBehavior`	Größenverhalten der Kachel. Werte: `Responsive`, `Small`	`Responsive`
`mode`	Darstellungsmodus. Werte: `ContentMode`, `HeaderMode`, `LineMode`	`ContentMode`
`frameType`	Rahmenformat. Werte: `OneByOne`, `TwoByOne`, `TwoThirds`, `Auto`, `TwoByHalf`, `OneByHalf`, `Stretch`	`OneByOne`
`visible`	Komponente sichtbar	`true`
`footer`	Fußzeile	–
`footerColor`	Indikationsfarbe für den Footer. Werte: `Neutral`, `Good`, `Critical`, `Error`, `None`	`Neutral`
`unit`	Einheit (z.B. `€`, `%`)	–
`spanS` / `spanM` / `spanL` / `spanXL`	Breite im Grid-Layout	`12`
`formatterValue`	Wert nicht formatieren, sondern wie geliefert anzeigen	`false`
`icon`	SAP-Icon-URL (z.B. `sap-icon://home`)	–
`iconDescription`	Beschreibung des Icons	–
`indicator`	Trendpfeil. Werte: `Up`, `Down`, `None`	`None`
`nullifyValue`	Leeren Wert als 0 anzeigen	`true`
`scale`	Skalierungszusatz (z.B. `k`, `%`)	–
`truncateValueTo`	Wert auf diese Zeichenanzahl kürzen	`4`
`value`	Aktueller Wert	–
`valueColor`	Farbe des Werts. Werte: `Neutral`, `Good`, `Critical`, `Error`, `None`	`Neutral`
`visible`	Komponente sichtbar	`true`

Events des GenericTileNumericContent:

Event	Auslöser
`onPress`	Klick / Tap

GenericTileImage

Attribut	Beschreibung	Default
`controlId`	Eindeutige ID der Komponente	automatisch generiert
`width`	Breite (CSS-Wert)	–
`header`	Hauptzeile (KPI-Titel)	–
`subheader`	Unterzeile	–
`backgroundImage`	Hintergrundbild-URL	–
`sizeBehavior`	Größenverhalten der Kachel. Werte: `Responsive`, `Small`	`Responsive`
`mode`	Darstellungsmodus. Werte: `ContentMode`, `HeaderMode`, `LineMode`	`ContentMode`
`frameType`	Rahmenformat. Werte: `OneByOne`, `TwoByOne`, `TwoThirds`, `Auto`, `TwoByHalf`, `OneByHalf`, `Stretch`	`OneByOne`
`visible`	Komponente sichtbar	`true`
`footer`	Fußzeile	–
`footerColor`	Indikationsfarbe für den Footer. Werte: `Neutral`, `Good`, `Critical`, `Error`, `None`	`Neutral`
`unit`	Einheit (z.B. `€`, `%`)	–
`spanS` / `spanM` / `spanL` / `spanXL`	Breite im Grid-Layout	`12`
`src`	Bild-URL	–

Events des GenericTileImage:

Event	Auslöser
`onPress`	Klick / Tap

GenericTileFeedContent

Attribut	Beschreibung	Default
`controlId`	Eindeutige ID der Komponente	automatisch generiert
`width`	Breite (CSS-Wert)	–
`header`	Hauptzeile (KPI-Titel)	–
`subheader`	Unterzeile	–
`backgroundImage`	Hintergrundbild-URL	–
`sizeBehavior`	Größenverhalten der Kachel. Werte: `Responsive`, `Small`	`Responsive`
`mode`	Darstellungsmodus. Werte: `ContentMode`, `HeaderMode`, `LineMode`	`ContentMode`
`frameType`	Rahmenformat. Werte: `OneByOne`, `TwoByOne`, `TwoThirds`, `Auto`, `TwoByHalf`, `OneByHalf`, `Stretch`	`OneByOne`
`visible`	Komponente sichtbar	`true`
`footer`	Fußzeile	–
`footerColor`	Indikationsfarbe für den Footer. Werte: `Neutral`, `Good`, `Critical`, `Error`, `None`	`Neutral`
`unit`	Einheit (z.B. `€`, `%`)	–
`spanS` / `spanM` / `spanL` / `spanXL`	Breite im Grid-Layout	`12`
`contentText`	Inhaltstext	–
`subContentText`	Unterzeile des Inhalts	–
`truncateValueTo`	Wert auf diese Zeichenanzahl kürzen	`4`
`value`	Aktueller Wert	–
`valueColor`	Farbe des Werts. Werte: `Neutral`, `Good`, `Critical`, `Error`, `None`	`Neutral`

Events des GenericTileFeedContent:

Event	Auslöser
`onPress`	Klick / Tap

ABAP-API

Zugriff über me->get_tile( '<controlId>' ).

Methode	Zweck
`GET_HEADER` / `SET_HEADER`	Hauptzeile
`GET_SUBHEADER` / `SET_SUBHEADER`	Unterzeile
`GET_FOOTER` / `SET_FOOTER`	Fußzeile
`SET_FOOTERCOLOR`	Indikationsfarbe
`GET_UNIT` / `SET_UNIT`	Einheit
`SET_FRAMETYPE`	Rahmenformat
`GET_BACKGROUND` / `SET_BACKGROUND`	Hintergrundbild-URL
`GET_FOOTERCOLOR`	Indikationsfarbe des Footers
`GET_FRAMETYPE`	Rahmenformat
`GET_MODE` / `SET_MODE`	Auswahlmodus bzw. Darstellungsmodus
`GET_SIZEBEHAVIOR` / `SET_SIZEBEHAVIOR`	Größenverhalten
`GET_WIDTH` / `SET_WIDTH`	Breite

Konstruktor für dynamische Tiles: /mobbuild/cl_tile=>create( ).

Die set_*-Methoden der Basis-Attribute geben die Basisreferenz (cl_tile_base) zurück und lassen sich untereinander verketten (Fluent-API).

Geerbte Methoden: siehe Control.

Tile-Varianten mit Inhalt

GenericTile ist die schlichte Kachel. Für eine Kachel mit typisiertem Inhalt gibt es drei Varianten — je ein eigener Getter und eine eigene Klasse, alle mit denselben Basis-Attributen (Header, Footer, …):

Variante	Getter	Klasse	Zusätzliche Methoden
Kennzahl	`me->get_tile_numeric( '…' )`	`cl_tile_numeric`	`set_value`, `set_value_color`, `set_indicator`, `set_scale`, `set_icon`, …
Bild	`me->get_tile_image( '…' )`	`cl_tile_image`	`set_src`, `set_description`
Feed/Text	`me->get_tile_feed( '…' )`	`cl_tile_feed`	`set_content_text`, `set_sub_content_text`, `set_value`, `set_value_color`

Basis- und Varianten-Setter lassen sich nicht in einer Kette mischen (die Basis-Setter geben cl_tile_base zurück) — je Ebene ein Aufruf:

abap

DATA(lo_tile) = me->get_tile_numeric( 'tileNumeric1' ).
lo_tile->set_header( 'Umsatz' )->set_subheader( 'Q3' ).          " Basis
lo_tile->set_value( '1847' )->set_value_color( 'Good' )->set_indicator( 'Up' ).  " Variante

Beispiel: `/mobbuild/cl_ex_tile` (Auszug)

Das Beispiel erzeugt bei jedem Klick auf btnAdd eine neue Tile mit zufälliger Footer-Farbe und hängt sie in eine DynamicFlexBox. Über btnClear werden alle Tiles wieder entfernt.

abap

METHOD on_pai.

  DATA(lv_event_key) = me->get_event( )->get_event_key( ).

  IF lv_event_key EQ 'Add'.

    DATA(lo_container) = me->get_dynamic_flex_box( 'dynamicFlexBox' ).

    DATA(lv_index)       = lines( lo_container->get_items( ) ).
    DATA(lv_control_id)  = |tileDynamic{ lv_index }|.
    DATA(lv_header)      = |Tile { lv_index }|.
    DATA(lv_subheader)   = |Subtext { lv_index }|.
    DATA(lv_footer)      = |Footer { lv_index }|.
    DATA(lv_unit)        = |€|.

    DATA lt_colors TYPE STANDARD TABLE OF string WITH DEFAULT KEY.
    lt_colors = VALUE #(
      ( |Neutral| ) ( |Good| ) ( |Error| )
      ( |Critical| ) ( |None| ) ).

    DATA(lv_color_index) = cl_abap_random_int=>create(
      seed = CONV i( sy-uzeit ) min = 1 max = 5 )->get_next( ).

    READ TABLE lt_colors INDEX lv_color_index INTO DATA(lv_color).

    DATA(lo_tile) = /mobbuild/cl_tile=>create( ).

    lo_tile->set_control_id( lv_control_id ).
    lo_tile->set_header( lv_header
      )->set_subheader( lv_subheader
      )->set_footer( lv_footer
      )->set_footercolor( lv_color
      )->set_unit( lv_unit
      )->set_frametype( 'OneByOne' ).

    " Event-Key auf den Komponenten-Namen setzen
    lo_tile->set_property_value(
      iv_key   = 'onPress'
      iv_value = lv_control_id ).

    lo_container->add_item( lo_tile ).

  ELSEIF lv_event_key EQ 'Clear'.

    me->get_dynamic_flex_box( 'dynamicFlexBox' )->remove_items( ).

  ENDIF.

ENDMETHOD.

Footer-Farben

Die Footer-Farbe folgt der Fiori-Indikationspalette: Neutral (grau), Good (grün), Critical (orange), Error (rot).

Events im Designer

Event	Auslöser
`onPress`	Klick auf die Kachel

Nächste Schritte

DynamicFlexBox – Container für dynamisch erzeugte Tiles
Button – einfache Aktion ohne KPI-Charakter

Tile ​

Designer-Attribute ​

GenericTileNumericContent ​

GenericTileImage ​

GenericTileFeedContent ​

ABAP-API ​

Tile-Varianten mit Inhalt ​

Beispiel: /mobbuild/cl_ex_tile (Auszug) ​

Events im Designer ​

Nächste Schritte ​