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 · 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 