点击蓝字 关注我们

一

前言

之前写过一篇文章,介绍了ABAP调用JS的方法.非常简单,只是无法传递参数.

详见链接无峰，公众号：ABAP 技巧与实战ABAP基础知识 ABAP执行JAVASCRIPT代码

写完后想起之前做的一个增强功能.可以传递参数,就是比较麻烦. 但是也是解决传输传递的一种方式,并且还整合了BSP(Business Server Page)应用程序的相关知识.

本文主要介绍通过BSP应用程序中调用JS代码显示商品图片的过程

二

标准商品图片功能

ECC中的商品可以通过配置显示商品的图片,图片信息存储在ECC服务器中.

通过物料主数据的图像配置,可以在MM41/42/43 事务代码中看到商品的图片.也可以通过函数MGW_PICTURE_SINGLE_DISPLAY传入图片链接显示图片.(图一,图二,图三)

图一

图二

图三

三

增强图片显示

标准图片功能实施起来有点复杂.具体使用时,还需要通过增强改写图片链接内容,来显示指向特定链接的图片.

所以我在项目中往往通过增强的方式在MARA表(商品主数据)中维护图片链接(或者根据商品编码通过特定的规则生成链接).然后通过特定方式呈现图片.

先查看一下显示效果

01

维护链接

MM41/42/43中维护查看图片链接. 通过点击按钮查看图片

02

显示图片

点击显示图片按钮,弹窗九宫格显示图片.

03

图片功能

任意点击一个图片,进入大图显示模式,该模式中可以简单的放大,缩小,反转图片(这些功能通过JS代码实现)

四

实现方式

上述增强显示图片涉及到BSP应用程序的创建, 按照下面的步骤,可以创建并配置BSP应用程序.

01

下载JS代码

网上找到显示图片的JS代码并下载.

02

创建BSP应用

SE80->创建页面服务器页面库->BSP应用程序 右键点击创建,输入BSP应用的描述

03

创建页面

右键点击BSP应用程序,创建页面.

输入页面内容(后续调整页面内容)

04

创建MIME对象

右键点击BSP应用程序,创建->MIME对象->导入 .选中一个文件,将会创建一个MIME对象节点

创建一个MIME对象文件夹

随意导入一个MIME对象后, 在MIME节点右键点击,可以创建文件夹

在文件节点创建并导入MIME对象

多次处理后,把图片显示的JS相关的内容导入到BSP应用中

05

页面内容

其中default.htm 页面内容

页面前面通过html语句结合"ABAP_SCRIPT"(后续简称ASP)通过表格显示图片

<%  %> 中间可以写ASP代码.

页面中的元素 可以引用ABAP的变量

<%= LV_LARGE %>

页面最后调用JS显示图片

06

激活并测试

激活并测试BSP应用程序,测试BSP应用时需要输入登陆用户,密码.测试时,因为没有传递参数,无法看到完整的内容. 只能看到一个简单的页面

07

配置BSP服务

TCODE: SICF 中查找BSP服务,给BSP服务配置一个处理器(类)

复制CL_HTTP_EXT_BSP 到 ZCL_HTTP_EXT_BSP

08

改写类代码

改写代码,获取http连接传入的商品编码. 写入类的全局变量, 在页面的ASP中可以使用这个全局变量. 当然也可以直接在ABAP调用页面服务之前直接给类的全局变量赋值.

使用url传递让页面服务更加独立,在其它应用中也可以调用.

09

封装函数

封装BSP页面调用到函数Z_BC_MAT_PIC_DISPLAY中.

调用Z_BC_MAT_GET_URL 根据传入的商品编码产生http url ,通过url的参数附加登陆方式及商品编码

lv_url = 'http://' && lv_url_p1 && ':8000/sap(bD16aCZjPTEwMA==)/bc/bsp/sap/zbsp_mat_pic/default.htm?sap-client='

        && sy-mandt && '&sap-language=ZH&sap-user=pic_disp&sap-password=654321' && '&matnr=' && lv_matnr.

调用函数Z_BC_HTML_DISPLAY

函数中通过调用cl_gui_html_viewer 类显示网页内容,具体方式可以参考DEMO程序

SAPHTML_DEMO1    HTML 控制演示程序

这样显示图片的BSP应用就被封装到一个函数中. 其它位置通过调用函数传入商品编码即可显示商品图片.

如果图片的链接是外网链接(比如阿里云的图片服务),这种方式并不要求服务器能访问外网, 只要SAPGUI客户端能访问外网,就能显示图片.

10

与ALV的整合

在所有显示了商品编码的ALV中添加一个热点字段SHOWP. 点击后传递商品编码到封装的函数中显示商品图片.

五

总结

通过上述BSP应用显示商品图片的功能可以归纳出一个ABAP与JS传递参数的方式.

• BSP应用程序创建一个HTTP页面

• 在页面服务的处理器代码中读取URL中的参数

• 也可以调用函数之前之前直接通过类全局变量传递内容

• 通过处理器类的全局变量传递到页面中

• 页面中允许通过ASP编写脚本语言读取全局变量内容,获取所需的信息.

• 网页中再通过ASP语句把变量传递到网页对象中.

• JS通过网页对象获取ABAP传递的变量内容

这种方式可以通过ABAP的BSP应用整合JS的调用. 通过对JS的调用实现一些复杂的现成的功能.

通过BSP应用程序也可以把UI5创建的页面整合到ECC应用服务器中调用并传递相关参数

THE

END

约定

如果你对这篇文章感兴趣,请帮忙点赞,在看,分享.     

    (如果你真的喜欢这篇文章,请记得回来打个赏,作为支持我继续下去的动力,这是一个正反馈过程. 越多的人打赏,作者越有动力分享,读者就能享受更多的福利.毕竟打赏的金额富不了我,穷不了你,却能支持这个公众号长久