提问

SAP操作手册之 通过BSP应用程序调用JS代码

2021-10-29 23:09发布

站内文章 / ABAP
1171 0 0


          点击此处--->   EasySAP.com 群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）

点击蓝字 关注我们

一

前言

之前写过一篇文章,介绍了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

约定

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

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




公众号 : syjf1976_abap

          ABAP开发技巧

微信号 : 392077


请扫码加入公众号群,提问或参与话题讨论

赞赏支持