How-To: Wie Sie Dateien aus dem Backend in einer Fiori-App darstellen
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
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.
SAP Fiori HCM - Quickstart
Innerhalb von nur 2 Wochen können Sie mit uns in die mobile Welt starten. Wir setzen in 5 Schritten Ihre erste HCM-App produktiv.
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!
