美文网首页SAP简友广场
SAP操作手册之 通过BSP应用程序调用JS代码

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

作者: syjf1976_abap | 来源:发表于2021-07-13 17:25 被阅读0次

    点击蓝字 关注我们

    前言

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

    约定

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

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

    相关文章

      网友评论

        本文标题:SAP操作手册之 通过BSP应用程序调用JS代码

        本文链接:https://www.haomeiwen.com/subject/heyspltx.html