能否通过GuideBridge对象在Adaptive Form中动态更新DOM与表格组件？

核心逻辑 #

审阅模式下表单处于只读锁定状态，直接调用setProperty修改属性不会触发UI重渲染，必须先切换到编辑模式完成结构修改，再切回审阅模式并触发组件刷新。

具体实现步骤 #

1. 获取目标Table的guideNode #

通过组件ID定位到Table的guideBridge节点：

const tableNode = guideBridge.getNodeById("你的Table组件ID");

注：组件ID可在表单编辑界面的组件属性面板中查看

2. 切换到编辑模式（关键步骤） #

解除审阅模式的只读锁定，才能修改Table的结构：

guideBridge.setFormState("edit");

3. 动态修改Table配置 #

修改列名

遍历Table的子列节点，更新列的label属性：

const columns = tableNode.children;
// 修改第一列名称
columns[0].setProperty("label", "新列名1");
// 修改第二列名称
columns[1].setProperty("label", "新列名2");

增减列

• 新增列：调用Table节点的addChild方法，传入列的配置参数：

const newColConfig = {
    "name": "customColumn",
    "label": "新增自定义列",
    "type": "text-input" // 列内组件类型，可根据需求替换为checkbox、dropdown等
};
tableNode.addChild(newColConfig);

• 删除列：定位到目标列节点后调用remove方法：

// 删除第三列（索引从0开始计数）
columns[2].remove();

4. 刷新组件并切回审阅模式 #

修改完成后触发UI刷新，再恢复审阅状态：

// 刷新Table组件，让修改生效
guideBridge.refreshNode(tableNode);
// 切回审阅模式
guideBridge.setFormState("review");

排查要点 #

• 验证tableNode是否获取成功，可通过console.log(tableNode)确认
• 若UI无变化，检查是否按顺序执行了「切编辑→修改→刷新→切审阅」的流程
• 列配置的属性需符合AEM自适应表单规范，比如type必须是系统支持的组件类型

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