给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

相关文章
|
19天前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
3月前
|
前端开发
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
|
23天前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
12 0
|
23天前
|
JSON 数据格式
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
10 0
|
23天前
element-ui实现表格单选的功能
element-ui实现表格单选的功能
12 0
|
6月前
|
JavaScript
vue + element-ui + vue-clipboard2 实现文字复制粘贴功能与提示
1、在所在项目下安装插件 ```js npm install vue-clipboard2 --save ``` 2、在所在项目的index.js注入vue-clipboard2 ```js import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) ``` 3、使用 ```html <div> <el-button size="mini" type="primary" icon="el-icon-copy-document" round class="copy-btn" v-clipboard:copy="要
66 2
|
2月前
|
Java
itext制作pdf表格
java中使用itext制作pdf表格
|
2月前
|
机器学习/深度学习 数据可视化 数据挖掘
【办公自动化】使用Python一键提取PDF中的表格到Excel
【办公自动化】使用Python一键提取PDF中的表格到Excel
56 0
|
3月前
|
数据采集 数据安全/隐私保护 Python
Python 快速合并PDF表格转换输出CSV文件
Python 快速合并PDF表格转换输出CSV文件
43 0
Python 快速合并PDF表格转换输出CSV文件
|
3月前
|
移动开发 开发框架 JavaScript
什么是 SAP UI5 项目 ui5.yaml 文件中的 specVersion 字段
什么是 SAP UI5 项目 ui5.yaml 文件中的 specVersion 字段
17 0