快速上手:Lightning App Builder

用 Lightning App Builder 的拖拽画布与预构建组件,无需写代码构建一个真正的 Lightning 应用。本文带你构建 Field Sales App:创建 App Page、添加账户 List View、配置 Recent Items 面板、添加四个快速操作,并激活到 Salesforce 移动应用导航。...

📅 2026/10/7 ✍️ ponybai 🏷️ salesforce, headless

一、创建你的第一个页面

slide_2

本单元学习 Lightning App Builder 的核心思想——Lightning Page 是组件的容器——然后创建第一个页面,并放入一个 List View 组件。这是所有拖拽式构建的起点。

介绍:Lightning App Builder

slide_3

Lightning App Builder 是 Salesforce 的无代码页面构建器。它让开发者和业务用户都能构建漂亮、定制的用户界面,在桌面与移动设备上都能完美运行——无需写一行代码。你在一张拖拽画布上组装页面,把预构建的 Lightning Components 拼接到一起,而不是手写代码。

本 Quick Start 里,你会把它付诸实践,构建 Field Sales App:一个单页应用,让外勤销售代表一眼看到自己的账户、调出最近的机会与线索、一键记录通话或创建记录——全部在手机上完成。到最后,你会拥有一个真正、已激活的 Lightning 应用,运行在 Salesforce 移动应用里。

创建第一个页面(1):从 Setup 开始

slide_4

在动手之前,先理解一个心智模型:Lightning Page 只是容器。它本身什么都不显示——它的能力来自你放进它里面的 Lightning Components。所以我们先创建容器。

在 Trailhead Playground 里,进入 Setup,在 Quick Find 输入 Lightning App Builder 并打开。在 Lightning Pages 下点 New,选择 App Page 并点 Next。把页面命名为 Field Sales App,然后页面布局选 Two Regions 并点 Done。Two Regions 给你左右两栏——正好适合"列表在一侧、最近项面板在另一侧"的布局。页面现在还是空的,接下来放第一个组件。

创建第一个页面(2):添加 List View

slide_5

Lightning App Builder 最棒的地方之一,是你可以随时在任意设备上预览作品。把预览下拉从 Desktop 切到 Tablet - Portrait,看画布从单栏变成两栏——正是页面在竖持平板上的样子。

现在从 Standard Components 菜单把 List View 组件拖到左栏。在右侧的 Properties 面板里,把它指向 Account 对象,应用 My Accounts 过滤器让代表只看到自己的记录,并把记录数限制为 7 条,让页面保持干净。

最后点 Save——弹窗询问是否激活时点 Not Yet。我们等所有内容都加完后再激活页面。

二、添加更多组件

slide_6

本单元在右栏填入 Recent Items 组件,并配置它显示机会与线索——外勤代表最关心的记录。

添加组件(1):添加 Recent Items

slide_7

你的页面现在左侧显示账户,右侧还是空的。从 Standard Components 菜单把 Recent Items 组件拖到右栏。Recent Items 对外勤代表特别有用:不用在列表视图里翻找,他们直接得到一个"最近看过的记录"面板,随时跳回正在处理的内容。

给组件起个友好的标题——在 Custom Label 字段输入 Opportunities & Leads,这个标签会作为面板的标题显示。然后在 Objects 下点 Select,打开对话框,选择这个组件要跟踪哪些对象。

添加组件(2):选择 Opportunity 与 Lead

slide_8

打开对象对话框时,Selected 列表默认已有一个对象——API Anomaly Event Store,一个内部系统对象,对我们的销售代表没用。选中它,点左箭头移除。

然后在 Available 列选中 Opportunity 点右箭头加入,再对 Lead 重复同样操作。点 OK 关闭对话框,再点 Save 保存更改。现在页面的 Recent Items 面板跟踪机会与线索——正是销售代表每天关心的管道。

三、添加快速操作并激活应用

slide_9

本单元先添加快速操作,让代表无需离开页面即可记录通话、创建记录;然后把页面激活为应用,加入移动导航,最后启动完成的 Field Sales App 看效果。

添加快速操作并配置页面(1):快速操作

slide_10

快速操作让用户一键创建和修改记录,就在当前页面完成——特别适合刚打完电话、想立刻记录通话或马上开一个工单的代表。在右侧边栏点 Page 编辑应用属性,滚动到底部,在 Actions 下点 Select。

用箭头把 Log a Call、New Case、New Lead、New Task 移入 Selected 列表——这四个动作对应外勤销售代表最常接触的记录类型。点 OK,再点 Save。现在 Actions 区显示了全部四个快速操作,它们会以按钮形式出现在页面上,代表永远不用离开当前视图就能行动。

添加快速操作并配置页面(2):激活应用

slide_11

到目前为止,页面只存在于 Lightning App Builder 里。激活才是把它变成真正应用的那一步。点 Activation... 打开激活对话框。在 Page Settings 标签,名字 Field Sales App 应该已填好——保持所有默认值。

切到 Mobile Navigation 标签,点 Add page to app 添加页面,然后把 Field Sales App 图标拖到 Today 图标正下方——这是代表会最先找它的位置。点 Save 激活。激活会自动创建应用标签并加入 Salesforce 移动应用导航,所以你构建的应用现在对手机用户可用了。

查看新应用(1):退出并启动

slide_12

到了收获的时刻——看看你构建的应用。点击左上角 Back 退出 Lightning App Builder、回到 Salesforce。然后打开 App Launcher,输入 Field Sales,点击 Field Sales App。这就启动了你完全无需代码组装出来的单页 Lightning 应用。

查看新应用(2):你会看到什么

slide_13

你的新 Field Sales App 在屏幕上显示:账户 List View 填满左栏,Opportunities & Leads 最近项面板在右侧,快速操作按钮就绪待命。

一个小提示:如果 Recent Items 面板看起来是空的,那是因为你还没打开任何机会或线索。各打开一个,它们就会出现在列表里——正如外勤代表在一天中会看到的样子。


文章来源:Trailhead - Quick Start: Lightning App Builder