mcpField
A
appbuilder-workfront

appbuilder-workfront

github.com/adobe开发316196 次安装今天更新
代码仓库

关于 appbuilder-workfront

appbuilder-workfront 是面向 Workfront UI 扩展开发的技能，涵盖 App Builder 前端和云端 Runtime actions 后端。它指导项目搭建、扩展点开发、测试、部署与发布，并强调通过后端操作调用 API。

主要功能

  1. 01搭建 React/Spectrum 前端
  2. 02使用 Runtime actions 处理后端逻辑
  3. 03接入 Workfront 扩展点
  4. 04本地测试及部署应用
  5. 05管理身份验证与 API 调用

适用场景

  1. 01创建 Workfront 主菜单扩展
  2. 02在对象侧栏或自定义表单中嵌入界面
  3. 03测试并部署 Workfront UI 扩展

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/adobe/skills --skill appbuilder-workfront

安装后在 Claude Code 中输入/appbuilder-workfront确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

evals/
evals.json
references/
commands.md
troubleshooting.md
workfront-actions/assets/
action-boilerplate.js
workfront-actions/evals/
evals.json
workfront-actions/references/
integrations.md
workfront-local-testing/evals/
evals.json
workfront-ui-extension/assets/
ExtensionRegistration.example.js
workfront-ui-extension/evals/
evals.json

详细介绍

App Builder 上的 Workfront UI 扩展

一个定制的 Workfront UI，以 App Builder 应用的形式构建。它分为两部分：

  • 前端——用户看到的界面。使用 React/Spectrum（Adobe 的 UI 工具包）构建；在 App Builder 术语中，它是 SPA（“单页应用”）。→ workfront-ui-extension
  • 后端——在 Adobe 云端运行的小型函数（Runtime actions；“无服务器”意味着你编写函数，由 Adobe 运行，无需管理服务器）。它们保存凭据并调用 Workfront / Planning / Adobe API。→ workfront-actions

前端会接入 Workfront 中称为扩展点的固定位置：一个主菜单按钮、对象左侧面板中的一个项目，或嵌入自定义表单中的小组件。

端到端流程 → 对应技能

步骤操作技能
0–1. 设置 + 创建项目Node 20，安装 @adobe/aio-cli，aio login，选择 IMS 组织、Stage 或 Production、创建项目（Developer Console 或 aio console project create）appbuilder-project-init
2. 搭建脚手架使用模板 @adobe/workfront-ui-ext-tpl 运行 aio app init；选择扩展点appbuilder-project-init + 此技能的 references/commands.md
3. 构建前端扩展点（主菜单、secondaryNav、小组件）、路由、共享上下文、actionWebInvokeworkfront-ui-extension
4. 构建后端Action 结构、配置、身份验证、输入；调用 Workfront（公共 API v21）/ Planning / 服务workfront-actions
5. 在 Workfront 中运行 + 测试运行 aio app dev，然后使用 extensionOverride（本地构建）或 Extension Manager / BYO（已部署的应用，无需发布）workfront-local-testing
6. 部署aio app deployreferences/commands.md
7. 发布（整个组织）从 Production 工作区提交审批；确保 Production 中包含 Actions 所需的所有 API/服务。BYO/override 测试不需要发布。—（见下文）

发布后，IMS 组织中的所有人都可以使用此应用，无需 extensionOverride。从 Production 工作区部署（aio app deploy），然后在 Developer Console / App Builder 分发 UI 中提交审批（指南：https://developer.adobe.com/uix/docs/guides/publication/）。如需在一个组织中使用已部署的应用而无需审批，可改为在 Workfront 的 Extension Manager（自带扩展）中注册其 URL——参见 workfront-local-testing。部署后，应用的直接链接是 Experience Cloud shell URL …/workfront/custom-applications/<extensionId>/<menuRoute>（不是 CDN 根地址）——按照 workfront-local-testing 中的说明构建并交付。

遇到阻碍？ references/troubleshooting.md 中有一张真实常见问题的症状 → 原因 → 解决方法表（Node/aio 错误、主菜单 id 陷阱、401 Org Id undefined、BYO 测试等）。完整的 aio 命令目录见 references/commands.md。

通俗术语表

术语通俗解释
SPA / 前端用户在 Workfront 中看到的应用界面。
Runtime action / “无服务器”Adobe 云端的一个小型函数，负责实际工作（获取/保存数据），并将凭据保留在用户浏览器之外。
扩展点应用在 Workfront 中出现的位置：主菜单、对象的左侧面板或自定义表单小组件。
共享上下文Workfront 自动传递给应用的信息——登录用户、当前对象、实例 URL。
actionWebInvoke前端调用后端 Action 的方式。
IMS 组织你的 Adobe 组织（身份/登录）。
Developer Console / 工作区Adobe 的 Web 管理界面，项目及其 Production / Stage 环境均位于此处。
布局模板Workfront 管理员设置，用于决定应用实际显示给用户的位置。

整个系列的约束

  • 身份验证信息来自 sharedContext（imsToken、主机名）——Workfront 会将已登录的用户和实例传递给应用，因此绝不要自行构建登录流程。
  • 浏览器绝不直接调用 Workfront/Adobe API——始终通过 actionWebInvoke 调用 Runtime 操作，这样登录令牌会留在服务器上。（IMS 组织 ID 已位于 sharedContext 的 auth.imsOrgID 中——无需调用 WF。）
  • 操作使用 CommonJS（exports.main；不是 ESM）；机密信息/输入按 .env → 操作 inputs → params 的路径传递，运行时绝不从 process.env 读取。
  • Node 20。默认环境为 prod（线上）；要指定 stage（测试），需设置 AIO_CLI_ENV=stage 并重新登录。
  • Workfront Public API 为 v21.0；搜索/计数时，自定义 DE: 字段需要使用 {field}_Mod=notblank。

评论

支持 Markdown