Display Smartform (PDF) in SAPUI5

Introduction –

Many times I saw questions on requirement to display smartform in SAPUI5.

Below are few threads on same requirement,

How to call smart from in sapui5?

Print Forms in SAP UI5

Open PDF retrieved via odata service in SAPUI5

Adobe form and SAPUI5

Showing pdf in sapui5 using a string.

Hence I thought to write blog on this subject and put focus on step-by-step procedure to display smartform in SAPUI5. I assume that many of us will be interested to know how to get the smartform (pdf) content on SAPUI5 by exposing the backend data in the form of Gateway (OData) service.

Let me explain all these details by taking simple example of standard smartform SF_EXAMPLE_03 (Smart Forms Training Example 3). Our objective will be to display the output of smartform SF_EXAMPLE_03 in SAPUI5 application in the form of PDF. We will have customer number as the input field and will get the flight details invoice as an PDF output. We will use iframe as container to display the PDF.

Procedure –

Very first, we will develop function module Z_TEST_PDF_DISPLAY which will take customer  number as input and will export URL pointing to PDF. You can get the logic of function module at sapui5-display_smartform_pdf/Z_TEST_PDF_DISPLAY at master · CmIm/sapui5-display_smartform_pdf · GitHub

P.S. Inside FM, I used the logic from thread Mime logo not displaying to build temporary URL for PDF.

Now we will develop GW service which will help us to expose this data. Let’s create simple GW service ZTESTPDF as displayed below.

We will have entity as pdf and entity set as pdfset. generate runtime artifacts and then go to generated class ZCL_ZTESTPDF_DPC_EXT. Now Redefine method PDFSET_GET_ENTITY and put below code. You can also get below code at sapui5-display_smartform_pdf/PDFSET_GET_ENTITY at master · CmIm/sapui5-display_smartform_pdf · GitHub

DATA:
   lt_keys     TYPE /iwbep/t_mgw_tech_pairs,
   ls_key      TYPE /iwbep/s_mgw_tech_pair,
   lv_customer TYPE s_customer,
   lv_url      TYPE string.
   lt_keys = io_tech_request_context->get_keys( ).
   READ TABLE lt_keys WITH KEY name = 'CUSTOMER' INTO ls_key.
   lv_customer = ls_key-value.
   CALL FUNCTION 'Z_TEST_PDF_DISPLAY'
     EXPORTING
       i_customer = lv_customer
     IMPORTING
       e_url      = lv_url.
   er_entity-customer = lv_customer.
   er_entity-url = lv_url.

Now register your GW service and That’s it! We are now ready to test our GW service. Just query with customer number and you should be able to get the output as highlighted below.

At this point, we are done with backend logic and GW service development. Now we will develop SAPUI5 application which will consume this service.

Create SAPUI5 project and put code in index.html.(follow MVC pattern as best practice!). You will get source code of index.html at sapui5-display_smartform_pdf/index.html at master · CmIm/sapui5-display_smartform_pdf · GitHub

End Result –

Now deploy your application to SAP ABAP server and run the application. provide any customer number (check if data is available in table SCUSTOM) and click on Display PDF button. You will see below result on screen. Here, we are displaying invoice details of customer number 3 in the form of smartform pdf.

Closing Remarks –

With the simple technique of creating temporary URL for the PDF and then exposing that URL through GW service, we are building SAPUI5 application to consume GW service. We are then setting src property of an iframe with this URL and setting this content to HTML UI element.

I hope with this simple way, you can display any backend smartform in SAPUI5 application !

I will request you to put the comment on this blog. Please feel free to put your comments/suggestions and any other way to display smartform in sapui5!

Happy Learning and Coding 🙂 🙂 🙂

Improved and Recommended approach to Display PDF –

[Added on 30th June 2014]

Using OData Media indicator, we can easily download any files in SAP Gateway. This is very well explained in this blog How To Upload and Download Files Using SAP NW Gateway SP06 by Jan Thomas Nygaard

I will use similar approach for our current functionality and below are the steps involved into it. You need to mark the entity type pdf as Media enabled as displayed in below snap. also Need to take property MimeType of type string. This will be used to set the mime type of the file to be downloaded. You can refer Supported MIME Types –  ABAP Workbench Tools – SAP Library for more information.

Now we need to redefine DEFINE Method of class ZCL_ZTESTPDF_MPC_EXT as below,

METHOD define.

  DATA:

    lo_entity   TYPE REF TO /iwbep/if_mgw_odata_entity_typ,

    lo_property TYPE REF TO /iwbep/if_mgw_odata_property.

  super->define( ).

  lo_entity = model->get_entity_type( iv_entity_name = ‘pdf’ ).

  IF lo_entity IS BOUND.

    lo_property = lo_entity->get_property( iv_property_name = ‘MimeType’ ).

    lo_property->set_as_content_type( ).

  ENDIF.

ENDMETHOD.

GET_STREAM method of class ZCL_ZTESTPDF_DPC_EXT as below,

METHOD /iwbep/if_mgw_appl_srv_runtime~get_stream.

  DATA:

  lt_keys     TYPE /iwbep/t_mgw_tech_pairs,

  ls_key      TYPE /iwbep/s_mgw_tech_pair,

  lv_customer TYPE s_customer,

  lv_xstring  TYPE xstring,

  ls_stream   TYPE ty_s_media_resource.

  lt_keys = io_tech_request_context->get_keys( ).

  READ TABLE lt_keys WITH KEY name = ‘CUSTOMER’ INTO ls_key.

  lv_customer = ls_key-value.

  CALL FUNCTION ‘Z_TEST_PDF_DISPLAY’

    EXPORTING

      i_customer = lv_customer

    IMPORTING

      e_xstring = lv_xstring.

  ls_stream-value = lv_xstring.

  ls_stream-mime_type = ‘application/pdf’.

  copy_data_to_ref( EXPORTING is_data = ls_stream

                    CHANGING  cr_data = er_stream ).

ENDMETHOD.

As SAP Gateway performs changing the XSTRING content to proper media format, we need not to write extra logic of generating url etc as explained in FM logic sapui5-display_smartform_pdf/Z_TEST_PDF_DISPLAY at master · CmIm/sapui5-display_smartform_pdf · GitHub

Instead of that, we just need to export the XSTRING content from FM. Improved version of FM logic is as below,

FUNCTION z_test_pdf_display.

*”———————————————————————-

*”*”Local Interface:

*”  IMPORTING

*”     REFERENCE(I_CUSTOMER) TYPE  S_CUSTOMER

*”  EXPORTING

*”     REFERENCE(E_XSTRING) TYPE  XSTRING

*”———————————————————————-

* Data Declaration

  DATA :

  lv_fm_name             TYPE rs38l_fnam,

  ls_output_options      TYPE ssfcompop,

  lv_language            TYPE tdspras,

  ls_control_parameters  TYPE ssfctrlop,

  ls_output_data         TYPE ssfcrescl,

  lv_pdf_len             TYPE i,

  lv_pdf_xstring         TYPE xstring,

  lt_lines               TYPE TABLE OF tline,

  lv_devtype             TYPE rspoptype,

  lv_app_type            TYPE string,

  lv_guid                TYPE guid_32,

  lo_cached_response     TYPE REF TO if_http_response,

  ls_customer            TYPE  scustom,

  lt_bookings            TYPE  ty_bookings,

  lt_connections         TYPE  ty_connections,

  lt_tstotf              TYPE tsfotf.

* language

  lv_language = sy-langu.

  TRANSLATE lv_language TO UPPER CASE.

  ls_control_parameters-langu = lv_language.

* set control parameters to get the output text format (OTF) from Smart Forms

  ls_control_parameters-no_dialog = ‘X’.

  ls_control_parameters-getotf   = ‘X’.

  ls_control_parameters-preview = space. “No preview

* get device type from language

  CALL FUNCTION ‘SSF_GET_DEVICE_TYPE’

    EXPORTING

      i_language            = lv_language

*     i_application          = ‘SAPDEFAULT’

    IMPORTING

      e_devtype             = lv_devtype

    EXCEPTIONS

      no_language           = 1

      language_not_installed = 2

      no_devtype_found      = 3

      system_error          = 4

      OTHERS                = 5.

* set device type in output options

  ls_output_options-tdprinter = lv_devtype.

* Set relevant output options

  ls_output_options-tdnewid = ‘X’. “Print parameters,

  ls_output_options-tddelete = space. “Print parameters

  CALL FUNCTION ‘SSF_FUNCTION_MODULE_NAME’

    EXPORTING

      formname          = ‘SF_EXAMPLE_03’  “Smartform name

    IMPORTING

      fm_name           = lv_fm_name

    EXCEPTIONS

      no_form           = 1

      no_function_module = 2

      OTHERS            = 3.

* Data retrieval and supplying it to Samrtform FM

  SELECT SINGLE * FROM scustom INTO ls_customer WHERE id = i_customer.

  SELECT * FROM sbook INTO TABLE lt_bookings   WHERE customid = i_customer.

  SELECT * FROM spfli INTO TABLE lt_connections UP TO 10 ROWS.

* Call Smartform generated FM

  CALL FUNCTION lv_fm_name

    EXPORTING

      control_parameters = ls_control_parameters

      output_options    = ls_output_options

      user_settings     = space

      customer          = ls_customer

      bookings          = lt_bookings

      connections       = lt_connections

    IMPORTING

      job_output_info   = ls_output_data

    EXCEPTIONS

      formatting_error  = 1

      internal_error    = 2

      send_error        = 3

      user_canceled     = 4

      OTHERS            = 5.

  APPEND LINES OF ls_output_data-otfdata[] TO lt_tstotf[].

* Convert to OTF

  CALL FUNCTION ‘CONVERT_OTF’

    EXPORTING

      format               = ‘PDF’

    IMPORTING

      bin_filesize         = lv_pdf_len

      bin_file             = lv_pdf_xstring       ” binary file

    TABLES

      otf                  = lt_tstotf

      lines                = lt_lines

    EXCEPTIONS

      err_max_linewidth    = 1

      err_format           = 2

      err_conv_not_possible = 3

      err_bad_otf          = 4

      OTHERS               = 5.

  IF sy-subrc = 0.

    e_xstring = lv_pdf_xstring.

  ENDIF.

ENDFUNCTION.

To download the file in GW Client, we need to execute query as /sap/opu/odata/sap/ZTESTPDF_SRV/pdfset(‘5’)/$value and hence accordingly below are the changes need to be made in UI5 application,

var oButton = new sap.ui.commons.Button({
       id : 'B-Create',
       text : 'Display PDF',
       width : '10em',
       press : function(){
       var sRead = "/pdfset(customer='" + oTF.getValue() + "')" + "/$value" ;
   
       oModel.read( sRead, null, null, true, function(oData, oResponse){
                     var pdfURL = oResponse.requestUri;            
            html.setContent("<iframe src=" + pdfURL + " width='700' height='700'></iframe>");
            oPanel.addContent(html);
            oPanel.placeAt("content");
        
                   
        },function(){
            alert("Read failed");});
          
       }
       });

That’s it.

Please use this approach of media streaming solution. This is better and easy to implement.