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
`header`	Hauptzeile (KPI-Titel)	–
`subheader`	Unterzeile	–
`footer`	Fußzeile	–
`footerColor`	Indikationsfarbe für den Footer (`Neutral`, `Good`, `Error`, `Critical`, `Negative`)	`Neutral`
`unit`	Einheit (z.B. `€`, `%`)	–
`frameType`	Rahmenformat (`OneByOne`, `TwoByOne`, `OneByHalf`, `TwoByHalf`, `Auto`)	`OneByOne`
`backgroundImage`	Hintergrundbild-URL	–
`onPress`	Event-Methodenname	–
`enabled`	Klickbar	`true`
`visible`	Sichtbar	`true`

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
`SET_BACKGROUND_IMAGE`	Hintergrundbild

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

Die set_*-Methoden geben das Tile-Objekt zurück und lassen sich verketten (Fluent-API).

Geerbte Methoden: siehe Control.

Beispiel: `/mobbuild/cl_ex_tile`

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| ) ( |Negative| ) ).

    DATA(lv_color_index) = cl_abap_random_int=>create(
      seed = CONV i( sy-uzeit ) min = 1 max = 4 )->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 Control-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), Error (rot), Critical (orange), Negative (rot). Sie können dieselben Werte auch über /mobbuild/cl_indication_color=>co_* als Konstanten setzen.

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 ​

ABAP-API ​

Beispiel: /mobbuild/cl_ex_tile ​