点击蓝字
关注我们
一
前言
之前写过一篇文章,介绍了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传递参数的方式.
这种方式可以通过ABAP的BSP应用整合JS的调用. 通过对JS的调用实现一些复杂的现成的功能.
通过BSP应用程序也可以把UI5创建的页面整合到ECC应用服务器中调用并传递相关参数
THE
END
约定
如果你对这篇文章感兴趣,请帮忙点赞,在看,分享.
(
如果你真的喜欢这篇文章,请记得回来打个赏,作为支持我继续下去的动力,这是一个正反馈过程. 越多的人打赏,作者越有动力分享,读者就能享受更多的福利.毕竟打赏的金额富不了我,穷不了你,却能支持这个公众号长久
