1. Dez. 20232 Min. Lesezeit

PDF-Vorschau in einer Freestyle-App mithilfe eines RAP-Services

Bereits der SAP Gateway (SEGW) ermöglichte Medien wie PDFs und Bilder über einen Media-Steam ins Fiori-Frontend zu laden, um diese als Vorschau darzustellen oder herunterzuladen.

Auch mit dem RESTful ABAP Programming Model (RAP) haben wir die Möglichkeit „Large Objects (LOBs)“ per Media-Steam zu laden.

Konkret widmen wir uns in diesem Blogbeitrag der Darstellung eines Adobe-Forms Formulars (PDF) als Vorschau in einer Freestyle UI5-App mithilfe eines RAP-Services.

Dafür verwenden wir eine „Custom Entity“, welche wir mit LOB-Annotations anreichern um einen Media-Stream zu implementieren. Zur Darstellung im Frontend verwenden wir das PDFViewer-Control.

CDS-View (Custom Entity)

Wir beginnen mit der Erstellung einer Custom Entity welche folgende drei Felder benötigt:

- Attachment (Type rawstring)

- Mimetype (Type char128)

- Filename (Type char128)

Anschließend reichern wir die CDS-View noch mit den Annotations @Semantics.largeObject und @Semantics.mimeType an.

@EndUserText.label: 'Prüfbericht PDF'
@ObjectModel: {
    query: {
        implementedBy: 'ABAP:ZTEST_CL_CE_PRUEFBERICHT_PDF'
    }
}
define root custom entity ZTEST_CE_PRUEFBERICHT_PDF
{
  key partner    : ztest_partner;
      @Semantics.largeObject:
      { 
          mimeType : 'MimeType',
          fileName   : 'Filename',
          contentDispositionPreference: #INLINE 
      }
      Attachment : abap.rawstring;
      @Semantics.mimeType: true
      Mimetype   : char128;
      Filename   : char128;
 
}

Nun generieren wir in der "if_rap_query_provider~select"-Methode unserer Custom Entity Klasse das AdobeForms-Formular und befüllen das Feld „Attachment“ mit dem PDF-String.

Wichtig ist hierbei ist folgende Parameter der Outputparameter-Struktur mit TRUE zu befüllen:

- getpdf

- nodialog

CLASS ztest_cl_ce_pruefbericht_pdf IMPLEMENTATION.
  METHOD if_rap_query_provider~select.
    DATA(lt_filter_condition) = io_request->get_filter( )->get_as_ranges( ).
    DATA(lv_is_data_requested)  = io_request->is_data_requested( ).
    DATA(lv_is_count_requested) = io_request->is_total_numb_of_rec_requested( ).
    DATA(lv_top) = io_request->get_paging( )->get_page_size( ) + 1.
    DATA(lv_skip) = io_request->get_paging( )->get_offset( ).
    DATA(lt_sort_elements) = io_request->get_sort_elements( ).
 
*    DATA(lr_partner) = VALUE #( lt_filter_condition[ name = 'PARTNER' ]-range OPTIONAL ).
 
    APPEND INITIAL LINE TO mt_result ASSIGNING FIELD-SYMBOL(<ls_result>).
    <ls_result>-mimetype = 'APPLICATION/PDF'.
    <ls_result>-filename = 'TEST.PDF'.
 
 
    DATA lv_form TYPE funcname.
    DATA ls_docparams TYPE sfpdocparams.
    DATA ls_formoutput TYPE fpformoutput.
    DATA ls_outputparams TYPE sfpoutputparams.
 
    CALL FUNCTION 'FP_FUNCTION_MODULE_NAME'
      EXPORTING
        i_name     = '/ISDFPS/PE_ISSUING_DOCUMENT'
      IMPORTING
        e_funcname = lv_form.
 
    ls_outputparams-getpdf = abap_true.
    ls_outputparams-nodialog = abap_true.
 
    CALL FUNCTION 'FP_JOB_OPEN'
      CHANGING
        ie_outputparams = ls_outputparams.
 
    CALL FUNCTION lv_form
      EXPORTING
        /1bcdwb/docparams  = ls_docparams
      IMPORTING
        /1bcdwb/formoutput = ls_formoutput
      EXCEPTIONS
        usage_error        = 1
        system_error       = 2
        internal_error     = 3
        OTHERS             = 4.
 
    CALL FUNCTION 'FP_JOB_CLOSE'.
 
    <ls_result>-attachment = ls_formoutput-pdf.
 
    IF io_request->is_total_numb_of_rec_requested(  ).
      io_response->set_total_number_of_records( lines( mt_result ) ).
    ENDIF.
 
    IF io_request->is_data_requested(  ).
      io_response->set_data( mt_result ).
    ENDIF.
  ENDMETHOD.

Öffnet man die RAP-Preview für die zuvor angelegte Entität und Startet die Suche, findet man mithilfe der DevTools in der Response des abgesetzten Requests schnell die Media-Source unseres Streams.

Response mit "media_src":

{"d":{"__count":"1","results":[{"__metadata":{"id":"https://XXX/sap/opu/odata/sap/SERVICEv=0001/Pruefbericht('')","uri":"https://XXX/sap/opu/odata/sap/SERVICE;v=0001/Pruefbericht('')","type":"XXX_PruefberichtType","content_type":"APPLICATION/PDF","media_src":"https://XXX/sap/opu/odata/sap/SERVICE;v=0001/Pruefbericht('')/$value"},"partner":""}]}}

Öffnen des PDFViewers in der UI5-App

Zuletzt setzen wir die Media-Source sowie den Titel unseres PDFViewers und öffnen diesen.

var oPDFViewer = new PDFViewer();
this.getView().addDependent(oPDFViewer);
 
var sServiceURL = this.getView().getModel().sServiceUrl;
var sSource = sServiceURL + "/Pruefbericht('')/$value";
 
oPDFViewer.setSource(sSource);
oPDFViewer.setTitle("Prüfbericht");
oPDFViewer.open();

PDF-Vorschau in einer Freestyle-App mithilfe eines RAP-Services

CDS-View (Custom Entity)

Öffnen des PDFViewers in der UI5-App

Nützliches

Aktuelle Beiträge

Comments