如何通过脚本获取Slack Workflow Builder活动输出并在UI展示

一、Slack Workflow Builder 输出基础使用方法 #

• 查看活动输出：在Workflow Builder编辑界面选中目标活动，右侧面板会展示该活动的输出字段（如API响应JSON、表单提交内容等），字段引用格式为{{活动名称.输出字段名}}
• 工作流内复用输出：后续步骤可直接插入上述变量，比如将表单活动的用户输入作为消息内容，在消息模板中填入{{表单活动.用户名}}即可
• 输出类型说明：不同活动输出类型不同——表单活动输出为键值对，API调用活动输出为完整响应JSON，文件上传活动输出包含文件ID与下载链接

二、通过脚本获取活动输出 #

2.1 使用Slack CLI 获取 #

• 确保已安装Slack CLI并登录目标工作区
• 先获取工作流执行历史，拿到目标执行ID：

  slack workflow exec list --workflow <工作流ID> --limit 10
  

• 根据执行ID获取该次运行的详细输出：

  slack workflow exec get --execution <execution_id>
  

• 结果中每个活动的output字段即为该活动的输出内容，直接提取即可

2.2 自定义Node.js脚本示例 #

• 借助Slack Web API的workflow.executions.info接口获取执行详情，需为Bot Token分配workflows:read权限：

  const { WebClient } = require('@slack/web-api');
  const token = '你的Slack Bot Token';
  const web = new WebClient(token);
  
  async function getWorkflowOutput(executionId) {
    const result = await web.workflows.executions.info({
      execution_id: executionId
    });
    // 定位目标活动的输出
    const targetActivity = result.execution.steps.find(step => step.name === '目标活动名称');
    return targetActivity?.outputs || {};
  }
  
  // 调用示例
  getWorkflowOutput('xxx-xxx-xxx').then(output => console.log(output));
  

三、将输出展示在UI中 #

Slack内UI展示 #

在工作流中添加「发送消息到频道/私信」步骤，用格式化文本（支持Markdown）展示输出：

本次活动输出详情：
- 提交用户：{{表单活动.用户名}}
- 提交内容：{{表单活动.反馈内容}}
- 附件：{{文件活动.文件链接}}

自定义外部UI展示（React示例） #

将脚本获取到的输出数据解析后渲染到页面：

import React, { useEffect, useState } from 'react';
import { getWorkflowOutput } from './slack-api';

function WorkflowOutputViewer() {
  const [output, setOutput] = useState(null);
  const executionId = 'xxx-xxx-xxx';

  useEffect(() => {
    getWorkflowOutput(executionId).then(data => setOutput(data));
  }, []);

  if (!output) return <div>加载中...</div>;

  return (
    <div className="output-card">
      <h3>工作流活动输出</h3>
      <div className="output-item">
        <span>用户名：</span>
        <span>{output.username}</span>
      </div>
      <div className="output-item">
        <span>提交文件：</span>
        <a href={output.file_url} target="_blank" rel="noopener noreferrer">点击查看</a>
      </div>
    </div>
  );
}

export default WorkflowOutputViewer;

• 注意：外部UI需确保Bot Token安全存储，避免前端直接暴露敏感凭证

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