SAP 操作手册之通过 BSP 应用程序调用 JS 代码
原创 无峰 [ ABAP 技巧与实战 ](javascript:void\(0\);)
**点击蓝字** 关注我们
一
前言
之前写过一篇文章,介绍了ABAP调用JS的方法.非常简单,只是无法传递参数.
> 详见链接 无峰，公众号：ABAP 技巧与实战 [ ABAP基础知识 ABAP执行JAVASCRIPT代码
> ](http://mp.weixin.qq.com/s?__biz=Mzg4MjA1MjE4NQ==&mid=2247486307&idx=1&sn=64c86416629d87b8265aae68d0cc52f6&chksm=cf5dd655f82a5f438be56c7670eadc94e5cb7bf67e83f1b0b7d0dff2056995ea18f9e657a09f#rd)
写完后想起之前做的一个增强功能.可以传递参数,就是比较麻烦. 但是也是解决传输传递的一种方式,并且还整合了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 **
**约定**
如果你对这篇文章感兴趣,请帮忙点赞,在看,分享.
( **如果你真的喜欢这篇文章,请记得回来打个赏,作为支持我继续下去的动力,这是一个正反馈过程.
越多的人打赏,作者越有动力分享,读者就能享受更多的福利.毕竟打赏的金额富不了我,穷不了你,却能支持这个公众号长久发文.** )
**公众号 : syjf1976_abap**
**ABAP开发技巧**
**微信号 : 392077**
**请扫码加入公众号群,提问或参与话题讨论**
