Malla文档
首页快速入门打开 Malla

用工作流构建交互页面

使用变量和客户端工作流来筛选列表、打开面板并响应点击。

用户指南
中级25 分钟

你将构建： 一个文章列表，带有点击即可打开的筛选面板，可按作者筛选，并用提示消息确认每次变化

请先阅读： 显示 API 数据

在本教程中，你将无需写代码，就让页面对访客的操作做出反应。你会添加页面变量，通过点击打开和关闭面板，用表达式筛选列表，并在变量变化或页面加载时运行步骤。你将从显示 API 数据中构建的文章列表开始。

用工作流构建交互页面视频即将推出。下面的文字步骤已涵盖全部内容。
用工作流构建交互页面· 8 分钟

添加页面变量

  1. 加载更多文章

    打开带有 posts 查询的页面，点击左侧边栏底部的 Data。选中 posts 查询，把 Path 改为 /posts?_limit=30。前 30 篇文章来自三位作者，userId 分别为 1、2 和 3。

  2. 为面板添加变量

    在 Page variables 旁点击 +，选择 Boolean。变量名为 isOpen，初始值为 false。它表示筛选面板是否打开。

  3. 为筛选添加变量

    再次点击 +，选择 Number。把它重命名为 userId，默认值保留为 0，表示“所有作者”。

打开和关闭面板

  1. 添加按钮和面板

    回到画布，在列表上方添加一个 Button，把它的 Text 设为 Filters。在它下方绘制一个名为 Filter panel 的框架，放入三个按钮：All authors、Author 1 和 Author 2。

  2. 只在打开时显示面板

    选中 Filter panel。在 Visibility 中，点击 Show when 旁的绑定按钮，输入 vars.isOpen。由于 isOpen 为 false，面板从画布上消失。

  3. 添加点击工作流

    选中 Filters 按钮。在 Events 中保留 Click，点击 Add workflow。Logic 工作区会打开一个新的客户端工作流，它的触发器就是点击该按钮。

  4. 切换变量

    在 Steps 中点击 Add step，选择 Set variable。把 Variable 设为 isOpen，Value 设为 !vars.isOpen。现在每次点击都会在 true 和 false 之间切换。

  5. 试一试

    点击 Run in preview。底部的 Run log 会显示该步骤，面板出现在画布上。再运行一次即可隐藏面板。

检查点

运行工作流会在画布上显示和隐藏 Filter panel，Run log 每次运行列出一个 Set variable 步骤。

筛选列表

  1. 用表达式筛选条目

    选中集合列表。在 Collection list 中，点击 Items 旁的绑定，替换为：

    js
    vars.userId === 0 ? queries.posts.data : queries.posts.data.filter(p => p.userId === vars.userId)

    当 userId 为 0 时，列表显示所有文章；否则只保留该作者的文章。

  2. 点击时设置作者

    选中 Author 1 按钮，在 Events 中添加点击工作流。添加一个 Set variable 步骤，Variable 为 userId，Value 为 1。对 Author 2 做同样的操作，值为 2。

  3. 重置筛选

    选中 All authors，添加点击工作流，再为 userId 添加一个 Reset variable 步骤。它会把变量恢复为默认值 0。

变量变化时做出反应

  1. 在变量变化时启动工作流

    在 Logic 工作区中点击 +（Add workflow），选择 Variable changes。在 Trigger 中，把 Variable 设为 userId。无论是哪个按钮改变了筛选，这个工作流都会在每次变化时运行。

  2. 关闭面板

    添加一个 Set variable 步骤，Variable 为 isOpen，Value 为 false。

  3. 用提示消息确认

    添加一个 Show toast 步骤。在 Message 旁点击 Use an expression，输入：

    js
    vars.userId === 0 ? 'Showing all posts' : `Showing posts by author ${vars.userId}`

    把 Variant 设为 Success。

  4. 测试整个页面

    按 ⌘↵ 预览。点击 Filters，再点击 Author 2：面板关闭，列表只显示该作者的文章，并弹出提示消息确认。点击 Filters 和 All authors，即可再次看到所有文章。按 ⌘↵ 回到编辑状态。

检查点

在预览中，选择作者会关闭面板、筛选列表并显示提示消息。

页面加载与导航

  1. 页面加载时问候访客

    点击 +（Add workflow），选择 Page load。添加一个 Show toast 步骤，消息为 Use Filters to pick an author，变体为 Info。每次打开页面时它都会运行一次。

  2. 把访客带到另一个页面

    在列表下方添加一个 Contact us 按钮，为它添加一个带 Go to page 步骤的点击工作流。在 Destination 中，选择你的某个页面，输入 /contact 这样的路径，或粘贴一个完整的 URL。

    只跳转到某个页面的按钮不需要工作流：在它的 Link 分区中设置 Target 即可。当需要先运行其他步骤，或目标取决于某个步骤的结果时，再使用 Go to page。

  3. 发布

    点击 Publish 并试用预发布页面。工作流在访客的浏览器中运行，所以面板、筛选和提示消息在线上站点同样有效。

完成

你的页面可以打开筛选面板、按作者筛选列表、对每次变化做出反应，并链接到另一个页面。

你学到了什么

  • 页面变量保存页面的状态；Show when 和 Items 等绑定会读取它们。
  • 客户端工作流由元素事件、变量变化或页面加载启动，并按顺序运行步骤。
  • 用 !vars.isOpen 这样的表达式配合 Set variable 可以切换一个值，filter 表达式可以缩小列表范围。

阅读本教程背后的指南：

客户端工作流在浏览器中运行的可视化逻辑，响应点击、提交、页面加载和变量变化。变量由绑定读取、由工作流写入的页面和站点状态，可保存在 URL 或浏览器中。工作流操作每个工作流步骤：它做什么、在哪里运行，以及它的参数。表达式参考表达式中可用的运算符、作用域变量、内置 fn 函数和方法。