How to display PDF Content using Smartforms

Owned by Charles Evans
Jul 03, 2020
2 min read

You can use Smartforms to display pdf in your app.

Step-by-step guide

  1. Create and design smartform layout.   
  2. Create an odata service to call and process created smartform returning pdf data. 
    1. Sample entity set definition:

                     Entity set:  ReqData – import parameter/form data, PDFData – export parameter/pdf data

                    

                 b. Sample js script to pass form data to smartform using Odata service:

var oModel = getModel("CN_CAPEX");
var filters = [];
var filterindex = 0;

//details
var ReqData = {};
ReqData.TITLE = getField("Title");
ReqData.BUDGET_YEAR = getField("BudgetYear");
ReqData.ACCOUNTABILITY = getField("Accountability");
ReqData.DIVISION = getField("Region");
ReqData.LOCATION = getField("Location");
ReqData.STATE = getField("ProvinceText");
ReqData.SUBDIVISION = getField("Subdivision");
ReqData.COMPANY = getField("Company");
ReqData.MULTIYEAR = getField("MultiYear");
ReqData.NUMBEROFYEARS = getField("CommitmentYear");
ReqData.SPONSORSHIP = getField("Sponsorship");
ReqData.TYPE = getField("Type");
ReqData.SUBTYPE = getField("SubType");
ReqData.PROJECTTYPE = getField("ProjectType");
ReqData.SUBPROJECTTYPE = getField("SubProjectType");
ReqData.CURRENCY = getField("Currency");
ReqData.BUSINESSCASE = getField("BusinessCase");

oFilter1 = fabFilter("ReqData", JSON.stringify(ReqData));

filters.push(oFilter1);

oModel.read("/ShowPDFs",{
success:function(data){
if(data.results){

var PDFDataFinal = "data:application/pdf;base64," + data.results[0].PDFData;

if( data.results[0].PDFData != "" ){
setField("PDFDataOut",PDFDataFinal);
}else{
setField("PDFDataOut","");
}

getControl("PDFPageId").setBusy(false);

}
},
filters:filters
});


                 c. Inside Odata service to retrieve pdf content.

1. Get function module name using form name. See sample code below:


CALL FUNCTION 'SSF_FUNCTION_MODULE_NAME'
EXPORTING
formname = 'ZCN_CAPEX'
IMPORTING
fm_name = lv_fmname
EXCEPTIONS
no_form = 1
no_function_module = 2
OTHERS = 3.


2. Trigger Smartform created using the FM passing form data. Make sure to set GETOTF flag of CONTROL_PARAMETERS when calling the smartform.


cl_fdt_json=>json_to_data(
EXPORTING iv_json = lv_reqdata
CHANGING ca_data = ls_details ).


CALL FUNCTION lv_fmname
EXPORTING
control_parameters = ls_ctrlop
output_options = ls_compop
user_settings = abap_true
im_capex_details = ls_details
IMPORTING
job_output_info = ls_return
EXCEPTIONS
formatting_error = 1
internal_error = 2
send_error = 3
user_canceled = 4
OTHERS = 5.


3. Use function module CONVERT_OTF to convert OTF to PDF.

IF ls_return-otfdata[] IS NOT INITIAL.


lt_otf[] = ls_return-otfdata[].


CALL FUNCTION 'CONVERT_OTF'
EXPORTING
format = 'PDF'
max_linewidth = 132
IMPORTING
bin_filesize = lv_len_in
bin_file = lv_pdf_xstring
TABLES
otf = lt_otf
lines = lt_tline
EXCEPTIONS
err_max_linewidth = 1
err_format = 2
err_conv_not_possible = 3
OTHERS = 4.

 ENDIF.

4. Pass bin_file parameter from FM CONVERT_OTF to PDFData form field.

3. Create a new page/or section in FAB that will serve as a placeholder for the pdf content. Add HTML attribute with the following content to display pdf.

<iframe src="{PDFDataOut}"  width="100%" height="100%">PDF</iframe>