给SAP WebClient UI的表格行项目增添PDF预览功能

简介: 给SAP WebClient UI的表格行项目增添PDF预览功能

In CRM UI by default the PDF preview is only available in document header level. For example once PDF Fact Sheet is clicked, the PDF is displayed in a popup window.



image.pngimage.pngSuppose there are lots of document to be previewed as a PDF, you have to enter to overview page of each and preview there. A more efficient way is the preview functionality can be directly available in search result table as “One Click Action(OCA)”. This blog will explain the main required steps.


The example is built based on new Genil model CRMSM developed in CRM EHP3. For detail about this Genil model, please refer to this blog Twitter(also Facebook) is official integrated into CRM 7.0 EHP3.


Let’s have a look at what could be achieved as table line item preview.


Once the OCA in a given table row is clicked,


image.pngA new Popup is displayed with rendered PDF there.image.pngStep by step for line item preview enablement

(1) since it is required to display PDF in popup, so component usage for reuse component GSURLPOPUP must be declared in runtime repository.


image.png(2) Define OCA event handler in get_p callback:image.pngSource code of GET_P:METHOD get_p_thtmlb_oca.

 CASE iv_property.

   WHEN if_bsp_wd_model_setter_getter=>fp_fieldtype.

     rv_value = cl_bsp_dlc_view_descriptor=>field_type_oca.

   WHEN if_bsp_wd_model_setter_getter=>fp_onclick.

     rv_value = 'PREVIEW'.

 ENDCASE.

ENDMETHOD.(3) Create a new event handler for PREVIEW event:image.pngMETHOD eh_onpreview.

   DATA: lv_event    TYPE REF TO cl_htmlb_event_tableview.

   lv_event    ?= htmlb_event.

   me->typed_context->searchresult->eh_on_one_click_action(

      iv_htmlb_event    = lv_event

      iv_htmlb_event_ex = htmlb_event_ex ).

 ENDMETHOD.The method above EH_ON_ONE_CLICK_ACTION is implemented in context node class:METHOD eh_on_one_click_action.

 DATA: lv_event     TYPE string,

       lv_index     TYPE string,

       lr_col       TYPE REF TO cl_crm_bol_entity.

 SPLIT iv_htmlb_event_ex->event_defined AT '.' INTO lv_event lv_index.

 me->get_bo_by_index( conv #( lv_index ) ).

 lr_col ?= me->collection_wrapper->get_current( ).

 CHECK lr_col IS NOT INITIAL.

 CASE lv_event.

   WHEN 'PREVIEW'.

     mr_owner->open_pdf( lr_col ).

   WHEN OTHERS.

 ENDCASE.

ENDMETHOD.Inside this method, the PDF preview task is delegated to method OPEN_PDF:METHOD open_pdf.

   DATA(lv_uuid) = ir_bol->get_property_as_string( 'UUID' ).

   CONCATENATE 'uuid=' lv_uuid INTO DATA(lv_query).

   DATA(lv_url) = cl_crm_web_utility=>create_url( iv_path = '/sap/crm/social_print'

                                            iv_query = lv_query

                                            iv_in_same_session = 'X' ).

   SELECT SINGLE internal_id INTO @DATA(lv_id) FROM crmd_soc_post WHERE uuid = @lv_uuid.

   DATA(lv_title) = 'Social Post preview: ' && lv_id.

   DATA(lr_popup) =  me->comp_controller->window_manager->create_popup(  iv_interface_view_name = 'GSURLPOPUP/MainWindow'

                                                                   iv_usage_name          = 'CUGSURLPopup'

                                                                   iv_title               = lv_title ).

   DATA(lr_cn) = lr_popup->get_context_node( 'PARAMS' ).

   DATA(lr_obj) = lr_cn->collection_wrapper->get_current( ).

   DATA(ls_params) = VALUE crmt_gsurlpopup_params( url = lv_url height = '700' ).

   lr_obj->set_properties( ls_params ).

   lr_popup->set_display_mode( if_bsp_wd_popup=>c_display_mode_plain ).

   lr_popup->set_window_width( 700 ).

   lr_popup->set_window_height( 700 ).

   lr_popup->open( ).

 ENDMETHOD.(4) Create a new ICF node social_print in tcode SICF:image.pngCreate a new handler class ZCL_SOCIAL_PRINT for this node.image.png(5) Inside the handler class mentioned in step 4, an Adobe print form template ZPF_SOCIAL_POST is used.


As a result you need to create it in tcode SFP. You have two objects to create in this transaction code.


(1) A form interface ZIF_SOCIAL_POST. This interface declares importing signature which will be filled by the PDF consumer with business data.

The signature required by this example could be found in below screenshot.



image.png(2). A template file which defines PDF layout. In the design time you specify the mapping relationship between UI elements in the template with their corresponding data nodes created in form interface.


image.pngClick Layout tab to open Form Builder, and define data binding there.image.pngFor this example, you can just type “fb_xdp_up” in command area and upload the template file locally.image.pngOnce uploaded, activate both interface and template.image.pngIn the runtime the ABAP data to be displayed is converted to xml format and merged into template by ADS ( Adobe Document Service ). If you meet with any trouble during PDF generation phase, you can debug method CL_FP_PDF_OBJECT~EXECUTE_INTERNAL to find the root cause.



image.pngThe user parameter FPTRACELEVEL is a convenient way to get detail trace for PDF rendering detail.

image.png

相关文章
|
25天前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
13 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
28 0
|
1月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
21 0
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
16天前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
13 1
什么是 SAP ABAP 里的 Subscreen
|
1月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0
|
2月前
|
Java
itext制作pdf表格
java中使用itext制作pdf表格
|
2月前
|
机器学习/深度学习 数据可视化 数据挖掘
【办公自动化】使用Python一键提取PDF中的表格到Excel
【办公自动化】使用Python一键提取PDF中的表格到Excel
66 0

热门文章

最新文章