Benjamin Salmen
6. Oktober 2020

How-To: Wie Sie Dateien aus dem Backend in einer Fiori-App darstellen

SAP Fiori Mobile

Sie fragen sich, wie Sie eine Datei aus Ihrem Backend in einer Fiori-App dargestellt bekommen? Sie haben vielleicht schon mal etwas von der GET_STREAM Methode gehört, wissen aber nicht, wie Sie diese implementieren müssen? Dann haben wir für Sie hier die passende Anleitung parat!

Implementierung im Backend

Entitätstyp anlegen

Zunächst müssen Sie im OData-Service einen Entitätstypen anlegen, der später die Datei abbilden soll. Hierzu wählen Sie in der SEGW den entsprechenden OData-Service aus und legen einen Entitätstypen an. Diesen können Sie beliebig nennen. Anschließend müssen Sie das Häkchen bei der Spalte “Medium” aktivieren. Dies markiert die Entität als eine, die Medien überträgt. Erst so kann das System wissen, dass bei einem passenden Request die Get_Stream aufgerufen werden muss. Das Ganze sieht dann folgendermaßen aus:

Das Häkchen Medium muss aktiviert sein

Anschließend müssen noch die Eigenschaften des Entitätstypen definiert werden. Hier sollten zum einen Schlüsselfelder definiert werden, die gebraucht werden, um die Datei aus dem Backend auszulesen. Diese Felder (gelb markiert) können Sie individuell an Ihre Anforderungen anpassen, je nachdem, wo und wie Sie die Datei auslesen. Zum Anderen sollte es ein Feld für die Beschriftung bzw. den Namen des Bildes geben. So können Sie die Dateien beispielsweise in einer Liste darstellen und sie per Klick auf den Namen herunterladen. Außerdem sollte ein Feld für den Datentyp bzw. den “Mimetype” vorhanden sein. So könnte also Ihre Struktur aussehen:

Mögliche OData-Struktur für den Dokumenten-Download

ODATA Grundlagen

ODATA bildet die Schnittstelle zwischen dem UI5 Frontend und dem SAP Backend. Lesen Sie hier wichtigsten Learnings im Bereich ODATA.

Redefinieren der Methoden

Zunächst müssen wir die DEFINE-Methode in der *MPC_EXT Klasse redefinieren. Hier wollen wir festlegen, welches Feld den Datentyp zurückliefert. Die Methode können wir mit folgenden Klicks im Bearbeitungsmodus redefinieren:

“Define Methode” redefinieren

Nun müssen wir folgenden Code zur Methode hinzufügen:

 DATA : lo_entity_type TYPE REF TO /iwbep/if_mgw_odata_entity_typ,
           lo_property    TYPE REF TO /iwbep/if_mgw_odata_property.

    super->define( ).
    model->set_soft_state_enabled( abap_true ).
    lo_entity_type = model->get_entity_type( 'Document' ).

    IF lo_entity_type IS BOUND . 
       lo_property = lo_entity_type->get_property( 'Mimetype' ).
       lo_property->set_as_content_type( ).
    ENDIF.

Hier holen wir uns zunächst den von uns definierten Entitätstyp. Anschließend setzten wir das Feld “Mimetyp” als Datentyp der Struktur.

Wenn wir dies aktiviert haben, können wir zur Redefinition der GET_STREAM-Methode voranschreiten. Die GET_STREAM-Methode befindet sich in der *DPC_EXT-Klasse des OData-Services. So können wir sie redefinieren:

Redefinition der GET_STREAM Methode

Anschließend müssen wir nur noch die Implementierung der GET_STREAM-Methode hinzufügen. Hier wollen wir das Bild auslesen und es zurückgeben. Das Ganze kann dann beispielsweise so aussehen:

  METHOD /iwbep/if_mgw_appl_srv_runtime~get_stream.
    DATA : ls_stream   TYPE ty_s_media_resource,
           ls_entity   TYPE *entsprechender Rückgabe Typ ihrer Methode*,
           lv_filename TYPE char30,
           lv_dokar   TYPE dokar,
           lv_doknr    TYPE doknr,
           lv_doktl    TYPE doktl_d,
           lv_dokver   TYPE dokvr.
    DATA ls_lheader TYPE ihttpnvp.
    DATA lv_description TYPE string.

    LOOP AT it_key_tab ASSIGNING FIELD-SYMBOL(<fs_key>).
      IF <fs_key>-name EQ 'Dokar'.
        lv_dokar = <fs_key>-value.
      ELSEIF <fs_key>-name EQ 'Doknr'.
        lv_doknr = <fs_key>-value.
      ELSEIF <fs_key>-name EQ 'Dotl'.
        lv_doktl = <fs_key>-value.
      ELSEIF <fs_key>-name EQ 'Dokvr'.
        lv_dokver = <fs_key>-value.
      ENDIF.
    ENDLOOP.

    mo_db_service->read_document(
      EXPORTING
        iv_dokart = lv_dokar                 " Dokumentart
        iv_doknr  = lv_doknr                " Dokumentnummer
        iv_dokver = lv_dokver                 " Dokumentversion
        iv_doktl  = lv_doktl                " Dokumentation - Textzeilen
      RECEIVING
        es_entity = ls_entity                " Dokumente zu Prüfmethoden
    ).
    IF ls_entity IS NOT INITIAL.
      lv_description = ls_entity-description.
      lv_description = escape( val = lv_description format = cl_abap_format=>e_url ).
      ls_lheader-name = 'Content-Disposition'.
      CONCATENATE 'outline; filename="' lv_description '";' INTO ls_lheader-value.
      set_header( is_header = ls_lheader ).
      ls_stream-value = ls_entity-data.
      ls_stream-mime_type = ls_entity-mimetype.
      copy_data_to_ref( EXPORTING is_data = ls_stream   CHANGING  cr_data = er_stream ).
    ENDIF.
  ENDMETHOD.

Nach der Datendeklaration lesen wir hier die vorher definierten Schlüssel aus. Mit diesen Schlüsseln können wir dann unsere Methode aufrufen, welche für uns die gewünschte Datei ausliest. In der Rückgabestruktur dieser Methode sollte in einem Feld das Bild als XSTRING vorliegen. Nach dem Auslesen können wir nun mit der GET_STREAM-Magie beginnen.

Zunächst erstellen wir einen Header, der dazu dient, den Dateinamen mit zu übergeben. Im zweiten Schritt schreiben wir die Datei (in Form des XSTRINGs) selbst in das Feld “value” unserer lokalen Rückgabestruktur und den Datentyp in das Feld “mime_type”. Anschließend kopieren wir diese lokale Struktur in die Rückgabestruktur. Und zack, fertig! Unser OData-Service kann nun Dateien mittels der GET_STREAM-Methode zurückliefern!

Abrufen der Datei im Frontend

Um die Datei nun im Frontend abrufen zu können, müssen wir nun noch die SAPUI5 App anpassen. Je nachdem, wie und wo Sie die Datei abrufen wollen, müssen Sie entsprechende Anpassungen vornehmen. Den Code, der die Datei letzten Endes abruft, habe ich hier für Sie vorbereitet. Sie können ihn beispielsweise nach einem “press”-Event auf einen Listeneintrag ausführen.

var oModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/sap/ZPM_CHECKLIST_SRV");
oModel.getData("/Data");
oModel.read("/*EntitySetName*(Schlüsselkomponente1='Wert1',Schlüsselkomponente2='Wert2',...)/$value", {
      success: function (oData, response) {
               var file = response.requestUri;
               window.open(file);
      },
     error: function () {
              *Error Behandlung*
     }
});

Wird dieser Code ausgeführt, wird die Datei aus dem Backend geladen und anschließend heruntergeladen. Sollte die Anwendung auf einem Mobilgerät ausgeführt werden, wird ein Fenster mit der Datei geöffnet.

ODATA Grundlagen

ODATA bildet die Schnittstelle zwischen dem UI5 Frontend und dem SAP Backend. Lesen Sie hier wichtigsten Learnings im Bereich ODATA.

Konnte ich damit ihr Problem lösen? Haben Sie noch Fragen zu dieser Anleitung? Oder haben Sie ein anderes Problem bei der Entwicklung von Fiori-Applikationen? Ich freue mich auf Ihre Fragen!



Das könnte Sie auch interessieren

Es gibt alleine im SCN gewiss um die 50 guten Beiträge die sich mit der CATS Freigabe/Release Thematik beschäftigen. Sie befassen sich allerdings hauptsächlich mit den Erfassungsprofilen(CAC1) und z.b. CATS Classic in der Freigabesicht.

weiterlesen

Seit Jahresbeginn hat die SAP einige der Standard Fiori ESS/MSS Apps mit einem Update versehen. So wurden Abwesenheitsantrag, Teamkalender und die MyInbox maßgeblich überarbeitet. Ob sich ein update lohnt und wann es sinnvoll ist, möchte ich mit diesem Beitrag beantworten.

weiterlesen

Ein Umstieg auf S/4HANA oder eine Weiternutzung Ihrer SAP HCM On-Premise Lösung mit dem SAP Sidecar-Ansatz erfordert die Migration auf eine HANA Datenbank. Dementsprechend führt an einer HANA DB kein Weg mehr vorbei, wenn Sie zukünftig weiter auf SAP setzen […]

weiterlesen

Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Kontaktieren Sie uns!
Nadja Messer
Nadja Messer Kundenservice