文档

配置页面导航和框架

更新时间:

菜单管理功能用于将编排的页面关联到具体的菜单,并对菜单进行分组管理。本文介绍如何配置页面框架,以及如何新增和管理菜单项、菜单配置。

前提条件

  • 当前应用为轻应用。

  • 当前应用处于开发版本,尚未发布。

  • 当前账号具有应用开发权限。

  • 存在可用编排页面。

配置页面导航

说明

通过页面布局功能,您可以对展示给用户的最终页面进行设置,包括:应用logo导航布局导航背景色等。

  1. 页面编排页面,单击导航与框架配置

    如果您在创建轻应用时应用场景配置为PC端+H5端,在配置页面框架菜单管理页签您可以单击image.pngimage.png图标切换端侧。image.png

    说明

    本文以仅应用场景配置为PC端为例说明如何配置导航与框架。

  2. 配置页面框架页签,单击右侧的属性页签,配置应用信息

    • 应用logo下拉列表中选择目标应用logo信息。image.png

      说明

      建议您使用背景透明的图片作为应用logo

      您可以通过文档管理功能上传图片,具体操作,请参见管理资源

    • 应用主题下拉列表中选择目标应用主题。如果下拉列表中没有可选应用主题,您可以新增应用主题。具体操作请参见以下步骤:

      1. 您可以通过以下两种方式打开新增应用主题对话框。

        • 应用主题下拉列表中单击新增

        • 在左侧导航栏单击image.png图标后,单击新增应用主题image.png

      2. 新增应用主题对话框中,完成相关配置项设置后,单击确定

  3. 配置导航信息

    1. 选择导航布局:支持左侧导航顶部导航顶部+左侧导航1顶部+左侧导航2

      说明

      导航布局支持多级菜单,不同布局适用的场景如下。

      • 左侧导航:适应于层级简单的应用。

      • 顶部导航顶部+左侧导航1顶部+左侧导航2:适应于层级复杂的应用。

    2. 选择导航背景色:支持主题色白色黑色

    3. 导航默认收起开关默认关闭,您可以单击导航默认收起右侧的1图标,打开导航默认收起开关。

    4. 自动加载导航菜单开关默认打开,您可以单击自动加载导航菜单右侧的1图标,关闭自动加载导航菜单开关。

    5. 多页签开关默认关闭,您可以单击导航默认收起右侧的1图标,打开多页签开关。

      说明

      如果打开多页签开关,系统会支持应用页面内多页签功能,单个浏览器Tab页内页签数量上限为20。

  4. 配置用户信息。

    1. 显示用户信息开关默认关闭,您可以单击显示用户信息下的1图标,打开显示用户信息开关。

    2. 用户名称下拉列表中选择目标用户名称。

    3. 设置用户头像来源,支持系统文件外部链接

    4. 图片文件下拉列表中选择目标图片文件。

    5. 可选:您可以参考下图配置用户信息下拉菜单v3.gif

      每个操作项支持设置显示名称新建动作,且该动作支持响应单击操作。

      单击时的响应动作有两种实现方式:JS逻辑编排。关于如何进行逻辑编排,请参见编排逻辑流

  5. 单击动作页签,您可以参考下图完成动作配置。v4.gif

    在加载框架完成时的响应动作有两种实现方式:JS逻辑编排。关于如何进行逻辑编排,请参编排逻辑流

  6. 配置变量。单击页面左上角的image.png图标,单击新增image.png

    • 如果在新增下拉列表中,选择变量,在新增变量对话框中,支持新增框架变量全局变量。完成相关设置后,单击保存

    • 如果在新增下拉列表中,选择服务调用

      1. 新增服务调用对话框中,设置名称描述(可选填),选择调用方式。如果您选择服务编排调用方式,则还需选择服务方法,您也可以选择设置示例值(可选填),完成后单击保存

      2. 如果您选择页面内服务调用的调用方式,则还需选择数据源(如果没有可选项,您可以新增服务调用),完成相关配置项设置后,单击保存

  7. 在动作面板进行逻辑编排。单击页面左上角的1图标。

    • 如果您没有创建逻辑编排,页面会提示您暂无逻辑编排。关于如何创建逻辑编排,请参见配置用户信息下拉菜单动作配置image.png

    • 如果您已创建逻辑编排,在该页面您可以根据具体需要进行逻辑编排。具体操作,请参见编排逻辑流

  8. 配置动作。单击页面左上角的1图标,在动作面板根据您的需求完成配置。image.png

  9. 完成配置后单击保存

新增和管理菜单项

新增菜单项

  1. 单击菜单管理页签,单击新增菜单项

  2. 新增菜单项对话框中,设置菜单项名称唯一标识描述(可选填),选择菜单项指向类型image.png

    菜单项指向类型支持以下两个选项:

    • 链接:需填入相应网址。

    • 应用内页面:如果目标页面下拉列表没有可选项,您需新建页面。具体操作,请参见新建页面。

    说明

    唯一标识

    • 英文字母和数字的组合,以字母开头,且项目内唯一,创建后不能修改。

    • 系统自动生成,您可以按需修改。

  3. 单击确定

编辑菜单项

  1. 菜单管理页面的菜单项页签,单击目标菜单项名称或者目标菜单项名称右侧的image.png图标。image.png

  2. 编辑菜单项面板,修改配置信息后,单击确定

复制菜单项

  1. 菜单管理页面的菜单项页签,单击目标菜单项名称右侧的image.png图标。

  2. 复制菜单项面板,设置唯一标识和相关参数后,单击确定

删除菜单项

  1. 菜单管理页面的菜单项页签,单击目标菜单项名称右侧的image.png图标。

    重要

    该资源将被彻底删除,且无法恢复,请确认您是否要执行此操作。

  2. 在二次确认对话框中,单击确定

新增和管理菜单配置

新增菜单配置

  1. 菜单管理页面的应用菜单页签,单击新增菜单配置

  2. 新增菜单配置面板,完成以下配置。

    1. 设置配置名称唯一标识描述(可选填)。

    2. 从左侧拖动菜单项至右侧应用菜单区域的框内,您可以参考下图配置导航菜单内容及显示顺序。1

      应用菜单配置支持配置多级菜单,具体如下图所示。1

    3. 可选:单击目标应用菜单右侧1图标或1图标,编辑或删除目标应用菜单。

      • 如果您单击的是1图标,在编辑菜单项对话框中,修改显示名称后,单击确定image.png

      • 如果您单击的是1图标,在二次确认对话框中单击确定

  3. 单击确定

编辑菜单配置

  1. 菜单管理页面的应用菜单页签,单击目标菜单名称或者目标菜单名称右侧的image.png图标。

  2. 编辑菜单配置面板,完成相关配置项修改后,单击确定

复制菜单配置

  1. 菜单管理页面的应用菜单页签,单击目标菜单名称右侧的image.png图标。

  2. 复制菜单配置面板,设置唯一标识和相关参数后,单击确定

删除菜单配置

  1. 菜单管理页面的应用菜单页签,单击目标菜单名称右侧的image.png图标。

    重要

    该资源将被彻底删除,且无法恢复,请确认您是否要执行此操作。

  2. 在二次确认对话框中,单击删除