Glide生成的App需通过三步添加交互：一、在Interactions中配置页面跳转并传递行数据；二、用公式字段驱动UI条件样式；三、通过Custom Code嵌入HTML/JS实现高级交互。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
如果您已使用Glide将表格数据成功转换为App界面，但发现页面元素缺乏点击跳转、表单提交或状态切换等交互行为，则说明当前生成的是静态展示层，尚未注入交互逻辑。以下是为Glide生成的App添加交互图（即交互式UI组件与导航关系）的具体操作路径：
一、在Glide编辑器中启用“交互图”模式并绑定动作
Glide原生支持通过可视化方式定义页面间跳转与数据联动，其交互图本质是页面节点与触发事件的有向连接图，无需编码即可构建基础导航流。
1、进入Glide App编辑器，点击右上角Settings → Interactions，开启交互配置面板。
2、在左侧页面列表中选中目标页面（如“Home”），右侧将显示该页所有可交互控件（按钮、卡片、列表项等）。
3、点击某按钮控件右侧的+ Add Action，选择动作类型为“Navigate to Page”，再从下拉菜单中选取目标页面（如“Product Detail”）。
4、勾选Pass row data选项，使跳转时自动携带当前行完整表格记录至目标页，供其动态渲染详情。
二、通过Glide公式字段注入条件交互逻辑
Glide允许在表格列中定义公式字段，其输出值可实时驱动UI状态（如按钮显隐、颜色变化、文本内容），实现轻量级条件交互，无需外部脚本。
1、在源表格中新增一列，列名设为“Status Badge”，类型选择Formula。
2、在公式编辑框中输入：IF({Stock} > 0, "In Stock", "Out of Stock")，保存后该列将根据库存数值动态显示状态文本。
3、返回App编辑器，在对应列表项布局中，将该公式字段拖入Badge组件的Text属性槽位。
4、选中该Badge组件，在右侧样式面板中设置Conditional Style：当Text值为“In Stock”时，背景色为绿色；为“Out of Stock”时，背景色为红色。
三、嵌入自定义HTML/JS片段扩展高级交互能力
当Glide内置交互无法满足需求（如模态弹窗、滑动筛选、实时搜索过滤）时，可通过“Custom Code”区块插入轻量前端代码，与Glide数据层桥接。
1、在目标页面空白区域点击Add Block → Custom Code，选择“HTML + JavaScript”类型。
2、在HTML区域粘贴一个带id的搜索输入框：。
3、在JavaScript区域编写监听逻辑：获取Glide提供的全局数据对象window.glideData，调用filterRows()方法对当前视图数据执行客户端过滤，并触发refreshView()重绘列表。
4、确保脚本末尾调用window.glideCodeReady = true，通知Glide运行时该代码块已就绪。
