UPDATE |
---|
Please see the last section Improved and Recommended approach to Display PDF. This approach is based on SAP GW Media streaming solution and is very easy to implement. Please change you coding/design accordingly. |
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?
Open PDF retrieved via odata service in 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 · GitH...
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 · GitHu...
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 :smile: :smile: :smile:
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.thomasnygaard
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 · GitH...
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
2 | |
2 |