如何通过Web Application Builder(ITS)将HTML表格数据写入SAP表ZCOOKIES？

一、前端JavaScript改造：收集并提交表格数据 #

先修改JS代码，把表格里的USER、PASSWORD数据整理成结构化格式，再通过表单提交到ABAP端：

// 收集表格行数据
function getTableRows() {
    let dataList = [];
    // 按实际HTML结构调整选择器，比如表格行的类名或标签
    document.querySelectorAll("table#ZCOOKIES tr").forEach((row, index) => {
        // 跳过表头行
        if (index === 0) return;
        let userInput = row.querySelector("[name='USER']");
        let pwdInput = row.querySelector("[name='PASSWORD']");
        if (userInput && pwdInput && userInput.value.trim()) {
            dataList.push({
                USER: userInput.value.trim(),
                PASSWORD: pwdInput.value.trim()
            });
        }
    });
    return dataList;
}

// 按钮点击事件：提交数据
document.getElementById("submit-btn").addEventListener("click", function() {
    let tableData = getTableRows();
    if (tableData.length === 0) {
        alert("请填写有效数据");
        return;
    }
    // 把数据转成JSON字符串存入隐藏字段
    document.getElementById("hidden-data").value = JSON.stringify(tableData);
    // 提交ITS页面的表单（替换成你实际的表单ID）
    document.getElementById("its-form").submit();
});

同时在HTML里添加隐藏字段和表单容器：

<form id="its-form" method="post" action="你的ITS事务URL">
    <!-- 原有表格内容 -->
    <input type="hidden" id="hidden-data" name="TABLE_DATA">
    <button type="button" id="submit-btn">写入SAP表</button>
</form>

二、ABAP端处理：接收数据并写入数据库 #

在ITS对应的ABAP程序（事务代码背后的程序）中，处理前端传递的数据：

1. 获取前端参数 #

在PAI事件中，通过ITS的请求对象获取表单提交的参数：

DATA: lv_json_data TYPE string.
lv_json_data = request->get_form_field( 'TABLE_DATA' ).

2. 解析JSON数据 #

用ABAP自带的JSON解析类把字符串转成内表：

TYPES: BEGIN OF ty_cookie,
         USER TYPE zcookies-user,
         PASSWORD TYPE zcookies-password,
       END OF ty_cookie.
DATA: lt_cookies TYPE STANDARD TABLE OF ty_cookie.

IF lv_json_data IS NOT INITIAL.
    /UI2/CL_JSON=>deserialize(
        EXPORTING
            json = lv_json_data
            pretty_name = abap_false
        CHANGING
            data = lt_cookies
    ).
ENDIF.

3. 写入ZCOOKIES表 #

执行数据库操作，把内表数据写入表中，可根据需求处理重复数据：

IF lt_cookies IS NOT INITIAL.
    " 可选：删除已有用户数据，避免重复
    DELETE FROM zcookies WHERE user IN ( SELECT user FROM @lt_cookies ).
    " 插入新数据
    INSERT zcookies FROM TABLE lt_cookies.
    IF sy-subrc = 0.
        MESSAGE '数据写入成功' TYPE 'S'.
    ELSE.
        MESSAGE '数据写入失败，请检查' TYPE 'E'.
    ENDIF.
ENDIF.

三、ITS开发注意事项 #

• 确保ITS服务配置允许表单提交，事务代码对应的ABAP程序有ZCOOKIES表的读写权限。
• 密码字段建议前端加密后传输，ABAP端解密存储，避免明文泄露。
• 若使用ITS模板开发，要保证HTML模板与ABAP变量的映射正确，参数能正常传递。

内容的提问来源于stack exchange，提问作者ttt