两种使用JavaScript触发ABAP事件的技术手段

简介: 两种使用JavaScript触发ABAP事件的技术手段

In CRM Office integration scenarios, Javascript together with ActiveX are widely used. For example, in webclient UI component view, version of the local installed Word application is got via ActiveX using Javascript and then this version is sent back to ABAP side, then application could work with different version accordingly.


This document explains two approaches to trigger ABAP backend event via Javascript with two simplest example:


Approach1 – trigger via calling click() method of a hidden button

(1) define a hidden button, bind its onClick event to an ABAP event ( line 6 ~ 9 )

Please note that the event name is Case sensitive – When you create the ABAP event in UI workbench, the correct event name you input must be exactly “Refresh” as line 8 ( although afterwards you see the upper case EH_ONREFRESH in workbench )


image.png


(2) store the runtime button ID into ABAP variable refresh_button_id ( line 10 ~ 13 )


(3) when the page is loaded, get the html element of button via its runtime id and call its click method. ( for simplicity reason I don’t consider whether method click still works in other browsers )


image.png


when you launch the test page, the event handler for Refresh will be called:


image.png


Approach2 – trigger via function htmlbSubmitLib

this approach could not only trigger ABAP event via Javascript but also could pass the value of Javascript variable to ABAP backend.

This approach also needs a hidden button. I use ActiveX to retrieve three attributes of the word application installed in my laptop: version, user name and installation path. The event trigger is done via function htmlbSubmitLib.image.png

in Chrome development tool we can find the function htmlbSubmitLib is implemented in script file events.js, and its MIME path /bc/bsp/sap/thtmlb_scripts.


Also you could find its signature and source code in Chrome debugger. Since I have totally three parameter to pass so I specify paramCount as 3,

and param1, param2 and param3 as wordVersion, username and path accordingly.


image.png


Here are the three attributes observed in Javascript debugger which will be passed to backend:


image.png



And implement the event handler in ABAP as below, in the runtime it is triggered:


image.png


And all three attributes are available in ABAP now:


image.png


Using process monitor I have observed the word application process which is started via ActiveX ( via option /Automation -Embedding ).

image.png


image.png

相关文章
|
JavaScript 前端开发
Javascript 事件propagation机制
Javascript 事件propagation机制
109 0
Javascript 事件propagation机制
|
JavaScript 前端开发
Javascript 事件propagation机制
Javascript 事件propagation机制
138 0
Javascript 事件propagation机制
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
76 0
|
1天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
7 1
|
9天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
35 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1