在 SAP 分析云的优化故事中创建自定义导航侧面板

原文链接：Creating a Custom Navigation Side Panel in SAP Analytics Cloud (Optimized Story Experience) 

作者： @felixjonathanmueller 

用户案例 

用户在编辑故事时，可能会想要链接多个故事，这样无需退出当前故事即可打开下一个故事。在优化故事体验中，用户可以通过结合标准微件、主题设置和脚本，来创建自定义导航侧面板，该面板可以提供故事间的无缝导航。 

本博客将介绍在优化故事体验中如何创建自定义导航面板的功能。根据您的实际用例，可能存在其他更适合的导航选择。以下内容可供您参考。 

步骤 1：准备故事 

首先建立一个页面布局，用于之后添加导航侧面板。一般情况下，我们会把所有内容组织在单个面板中，例如统计图、表和标题。然后，你可以在主内容面板旁边添加导航面板。这样操作后故事的结构会更加清晰，之后也能更容易展开和折叠导航侧面板。 

如果您尚未创建故事，可以去社区里下载并使用 Fiori Morning Horizon 主题包中的模板，这将为您提供配置好的布局，您可以使用导航面板对其进行增强。此外模板中还包括了 Fiori Morning Horizon 主题，其中包含将在示例中使用的附加 CSS 类。 

在样式设置面板中选择故事内容，然后更改大小和位置的条目，以在包含故事内容的面板周围创建一些空间。示例中对内容面板的空间和位置设置如下： 

width: auto, height: auto, left: 200px, top: 50px, right: 0px, bottom: 0px

您的故事应如下所示： 

步骤 2：准备 CSS 样式设置 

接下来要为菜单项准备一些 CSS 类，以确保对侧面板的应用样式设置是一致的。  

首先创建两个 CSS 类，用于设置菜单项目的背景颜色，确保突出显示选中的菜单项。通过将边框应用于突出显示和未突出显示的菜单项，可以将菜单条目的文本位置保持在同一位置。 

.mnu-item .sap-custom-panel-widget{
background-color:transparent;
border-left: 2px solid transparent;
}
.mnu-item-active .sap-custom-panel-widget{
background-color:#DCF3FF;
border-left: 2px solid #0064D9;
}

可以通过单击 SAP 分析云工具栏格式部分中的“编辑 CSS”来访问故事 CSS 编辑器。 

步骤 3：创建外壳栏（shellBar） 

接下来，在内容区域顶部创建一个面板用作外壳栏。外壳栏的大小和位置设置如下： 

width: auto, height: 50px, left: 0px, top: 0px, right: auto, bottom: auto

将 CSS 类 shellBar（包含在 Fiori Morning Horizon 故事主题文件中）添加到此面板。 

在此面板中添加一个按钮，用于之后展开或折叠导航面板。您可以向按钮中添加图标。 

如果要详细了解如何在 SAP 分析云中使用 UI5 图标，请参阅在 SAP 分析云中使用 SAP Fiori 图标作为自定义 Web 字体博客。 

现在，将所需标题和徽标的文本微件放在外壳栏中。您的故事应如下所示： 

步骤 4：创建侧面板 

下一步是创建导航侧面板的基础，该面板由彼此嵌套的多个面板对象组成。特别注意每个面板的大小、位置和 CSS 类名称设置。 

从表示侧面板背景的第一个面板开始。 

1.首先，添加名为导航的面板以表示背景，其大小和位置设置如下： 

width: 250px, height: auto, left: 0px, top: 50px, right: auto, bottom: 0px

 将 CSS 类侧面板应用于面板。在“样式设置”面板的“微件”部分中，将“圆角半径”设置为 0px。 

2.在导航面板中，添加名为 fpnl_NavigationLayout 的流布局面板，其大小和位置设置如下： 

width: auto, height: auto, left: 8px, top: 16px, right 8px, bottom: 16px

3.在 fpnl_NavigationLayout 面板中，添加名为 pnl_MnuItem_1 的面板以表示第一个菜单项，其大小和位置设置如下： 

width: 100%, height: 32px

应用 CSS 类名称 mn-item-active 以突出显示第一个菜单项。在“样式设置”面板的“微件”部分中，将“圆角半径”设置为 6px。 

4.在 pnl_MnuItem_1 面板中，添加文本对象以指定菜单项的名称（稍后更新），其大小和位置设置如下： 

width: auto, height: auto, left: 8px, top: 6px, right: 8px, bottom: 0px

由于将 pnl_MnuItem_1 放在“流式布局面板”中，因此您可以复制菜单项，它将自动添加到下面。重复上述步骤，直到为用例创建了足够的菜单项为止。 

对于最初未处于活动状态的菜单项，应用 mnu-item CSS 类。 

你的故事页面现在应如下所示： 

步骤 5：向导航侧面板添加脚本 

要允许用户使用你刚刚创建的菜单项导航，你需要将以下脚本添加到“导航”侧面板中的每个文本微件： 

NavigationUtils.openStory(“StoryID”, “PageID”,[],false);

优化故事体验 API 参考中有更多关于导航 Utils 脚本函数的详细信息。使用脚本编辑器中的值帮助，可以更轻松地选择故事 ID 和页面 ID，用户可以通过文件浏览器选择故事和页面。 

脚本的第二个部分是将展开和折叠交互添加到导航侧面板。首先，脚本将检查面板是否可见。然后，根据可见性，脚本决定单击按钮时是显示还是隐藏面板。根据您的需求，还可以调整内容区域的大小，以便用户始终看到所有内容。 

在以下脚本中选择其一，添加到外壳栏中按钮的 onClick 事件中。 

选项 1 调整内容区域的大小： 

if(Navigation.isVisible()===true){
Navigation.setVisible(false);
CONTENT_rl1.getLayout().setLeft(0);
} else {
Navigation.setVisible(true);
CONTENT_rl1.getLayout().setLeft(Navigation.getLayout().getWidth());
}

选项 2 外壳栏覆盖内容区域： 

if(Navigation.isVisible()===true){
Navigation.setVisible(false);
} else {
Navigation.setVisible(true);
}

步骤 6：将导航侧面板添加到其他故事 

现在导航侧面板已经添加在第一个故事里了。此故事由当前突出显示的面板中的第一个菜单项表示。 

导航侧面板中的其他两个菜单条目不会突出显示，但它们包含的脚本可用于导航到其他故事。 

下一步是打开第二个故事，并将导航侧面板、外壳栏以及在步骤2中创建的故事 CSS 复制过去。在导航侧面板中，选择第一个菜单条目并将 CSS 类更改为 mnu-item。第二个故事现在由第二个菜单条目表示。要显示用户在第二个故事中，请选择第二个菜单条目并将 CSS 类更改为 mnu-item-active。 

对第三个故事重复此步骤。 

在下面，你可以看到三个示例故事的外观。每个故事都包含导航侧面板，并且突出显示的菜单条目显示当前故事的用户。 

更多注意事项 

上述步骤展示了如何创建自定义导航侧面板的第一个版本的基础操作。你可以采取其他步骤来增强导航侧面板，例如在菜单条目中添加图标或线形微件以在逻辑部分之间创建分隔符。 

您还可以考虑使用 SAP 分析云中的新功能——组合，创建导航侧面板。 

​ 原文链接：Creating a Custom Navigation Side Panel in SAP Analytics Cloud (Optimized Story Experience) 作者： @felixjonathanmueller 用户案例 用户在编辑故事时，可能会想要链接多个故事，这样无需退出当前故事即可打开下一个故事。在优化故事体验中，用户可以通过结合标准微件、主题设置和脚本，来创建自定义导航侧面板，该面板可以提供故事间的无缝导航。 本博客将介绍在优化故事体验中如何创建自定义导航面板的功能。根据您的实际用例，可能存在其他更适合的导航选择。以下内容可供您参考。 步骤 1：准备故事 首先建立一个页面布局，用于之后添加导航侧面板。一般情况下，我们会把所有内容组织在单个面板中，例如统计图、表和标题。然后，你可以在主内容面板旁边添加导航面板。这样操作后故事的结构会更加清晰，之后也能更容易展开和折叠导航侧面板。 如果您尚未创建故事，可以去社区里下载并使用 Fiori Morning Horizon 主题包中的模板，这将为您提供配置好的布局，您可以使用导航面板对其进行增强。此外模板中还包括了 Fiori Morning Horizon 主题，其中包含将在示例中使用的附加 CSS 类。 在样式设置面板中选择故事内容，然后更改大小和位置的条目，以在包含故事内容的面板周围创建一些空间。示例中对内容面板的空间和位置设置如下：    width: auto, height: auto, left: 200px, top: 50px, right: 0px, bottom: 0px    您的故事应如下所示： 步骤 2：准备 CSS 样式设置 接下来要为菜单项准备一些 CSS 类，以确保对侧面板的应用样式设置是一致的。  首先创建两个 CSS 类，用于设置菜单项目的背景颜色，确保突出显示选中的菜单项。通过将边框应用于突出显示和未突出显示的菜单项，可以将菜单条目的文本位置保持在同一位置。    .mnu-item .sap-custom-panel-widget{
background-color:transparent;
border-left: 2px solid transparent;
}
.mnu-item-active .sap-custom-panel-widget{
background-color:#DCF3FF;
border-left: 2px solid #0064D9;
}     可以通过单击 SAP 分析云工具栏格式部分中的“编辑 CSS”来访问故事 CSS 编辑器。 步骤 3：创建外壳栏（shellBar） 接下来，在内容区域顶部创建一个面板用作外壳栏。外壳栏的大小和位置设置如下：    width: auto, height: 50px, left: 0px, top: 0px, right: auto, bottom: auto    将 CSS 类 shellBar（包含在 Fiori Morning Horizon 故事主题文件中）添加到此面板。 在此面板中添加一个按钮，用于之后展开或折叠导航面板。您可以向按钮中添加图标。 如果要详细了解如何在 SAP 分析云中使用 UI5 图标，请参阅在 SAP 分析云中使用 SAP Fiori 图标作为自定义 Web 字体博客。 现在，将所需标题和徽标的文本微件放在外壳栏中。您的故事应如下所示：  步骤 4：创建侧面板 下一步是创建导航侧面板的基础，该面板由彼此嵌套的多个面板对象组成。特别注意每个面板的大小、位置和 CSS 类名称设置。 从表示侧面板背景的第一个面板开始。 1.首先，添加名为导航的面板以表示背景，其大小和位置设置如下：    width: 250px, height: auto, left: 0px, top: 50px, right: auto, bottom: 0px    将 CSS 类侧面板应用于面板。在“样式设置”面板的“微件”部分中，将“圆角半径”设置为 0px。 2.在导航面板中，添加名为 fpnl_NavigationLayout 的流布局面板，其大小和位置设置如下：    width: auto, height: auto, left: 8px, top: 16px, right 8px, bottom: 16px    3.在 fpnl_NavigationLayout 面板中，添加名为 pnl_MnuItem_1 的面板以表示第一个菜单项，其大小和位置设置如下：    width: 100%, height: 32px    应用 CSS 类名称 mn-item-active 以突出显示第一个菜单项。在“样式设置”面板的“微件”部分中，将“圆角半径”设置为 6px。 4.在 pnl_MnuItem_1 面板中，添加文本对象以指定菜单项的名称（稍后更新），其大小和位置设置如下：    width: auto, height: auto, left: 8px, top: 6px, right: 8px, bottom: 0px    由于将 pnl_MnuItem_1 放在“流式布局面板”中，因此您可以复制菜单项，它将自动添加到下面。重复上述步骤，直到为用例创建了足够的菜单项为止。 对于最初未处于活动状态的菜单项，应用 mnu-item CSS 类。 你的故事页面现在应如下所示： 步骤 5：向导航侧面板添加脚本 要允许用户使用你刚刚创建的菜单项导航，你需要将以下脚本添加到“导航”侧面板中的每个文本微件：    NavigationUtils.openStory(“StoryID”, “PageID”,[],false);    优化故事体验 API 参考中有更多关于导航 Utils 脚本函数的详细信息。使用脚本编辑器中的值帮助，可以更轻松地选择故事 ID 和页面 ID，用户可以通过文件浏览器选择故事和页面。 脚本的第二个部分是将展开和折叠交互添加到导航侧面板。首先，脚本将检查面板是否可见。然后，根据可见性，脚本决定单击按钮时是显示还是隐藏面板。根据您的需求，还可以调整内容区域的大小，以便用户始终看到所有内容。 在以下脚本中选择其一，添加到外壳栏中按钮的 onClick 事件中。 选项 1 调整内容区域的大小：    if(Navigation.isVisible()===true){
Navigation.setVisible(false);
CONTENT_rl1.getLayout().setLeft(0);
} else {
Navigation.setVisible(true);
CONTENT_rl1.getLayout().setLeft(Navigation.getLayout().getWidth());
}    选项 2 外壳栏覆盖内容区域：    if(Navigation.isVisible()===true){
Navigation.setVisible(false);
} else {
Navigation.setVisible(true);
}     步骤 6：将导航侧面板添加到其他故事 现在导航侧面板已经添加在第一个故事里了。此故事由当前突出显示的面板中的第一个菜单项表示。 导航侧面板中的其他两个菜单条目不会突出显示，但它们包含的脚本可用于导航到其他故事。 下一步是打开第二个故事，并将导航侧面板、外壳栏以及在步骤2中创建的故事 CSS 复制过去。在导航侧面板中，选择第一个菜单条目并将 CSS 类更改为 mnu-item。第二个故事现在由第二个菜单条目表示。要显示用户在第二个故事中，请选择第二个菜单条目并将 CSS 类更改为 mnu-item-active。 对第三个故事重复此步骤。 在下面，你可以看到三个示例故事的外观。每个故事都包含导航侧面板，并且突出显示的菜单条目显示当前故事的用户。  更多注意事项 上述步骤展示了如何创建自定义导航侧面板的第一个版本的基础操作。你可以采取其他步骤来增强导航侧面板，例如在菜单条目中添加图标或线形微件以在逻辑部分之间创建分隔符。  您还可以考虑使用 SAP 分析云中的新功能——组合，创建导航侧面板。     Read More Technology Blogs by SAP articles 

#SAP

#SAPTechnologyblog