实现 CrossApplicationNavigation 服务
学习目标
实现 CrossApplicationNavigation 服务，以在 SAP Fiori 应用之间导航
跨应用导航
使用 CrossApplicationNavigation 服务
在回顾目标映射和磁贴配置之后，我们想看看如何使用类 sap.ushell.services.CrossApplicationNavigation 来实现导航。
CrossApplicationNavigation 服务用于从一个 SAP Fiori 应用导航到另一个。接下来我们将了解如何使用类 sap.ushell.services.CrossApplicationNavigation 实现导航，以及如何在以 SAPUI5-freestyle 应用形式实现的自定义 SAP Fiori 应用中使用 CrossApplicationNavigation 服务。
让我们看看使用 CrossApplicationNavigation 服务触发导航的代码片段。
该代码片段展示如何使用 sap.ushell.services.CrossApplicationNavigation。在 display 的 onInit 实现中，我们将在第一行代码检查应用是否运行在 SAP Fiori Launchpad 中。
请记住 SAPUI5 的黄金法则之一是 Every SAP Fiori app must run as a web app。这意味着应用也应能够在 SAP Fiori Launchpad 之外运行，当然功能会受限，但它可以运行。
如果可以解析对 sap.ushell.Container.getService 的引用，则对 getService 函数的引用会存储在变量 _fnGetService 中。接下来我们可以调用该函数并传入值 CrossApplicationNavigation 作为参数。在实现的第三行，我们调用函数 hrefForExternal，并将语义对象的名称和操作作为参数传入该函数。
参数 _hash 将包含计算出的哈希。在所示示例中，该值为 #UX410NavEnd00-display。这就是在目标映射配置期间自动创建的值。
代码片段中 onPress 函数的实现将直接触发导航。
正如你在实现中所见，也可以将简单的键值对作为导航参数传递给目标。目标应用能够获取这些数据并使用它们。
接下来，我们将看看展示如何使用导航参数的代码片段。
在代码片段中，你可以看到如何处理在基于 intent 的导航期间传递的参数。导航发起方发送的导航参数将存储在目标应用的参数 startupParameters 中。在我们的示例中，第一个应用传递了名称为 helloText、值为 Hello UX410 的参数。请记住，参数 helloText 在目标应用内部按数组处理。
如何在 SAP Fiori 中导航
有关本演示的步骤和数据，请参阅练习 在 SAP Fiori 中导航。
在 SAP Fiori 中导航
注意
SAP Business Technology Platform 及其工具是云服务。由于云软件的特性，字段和按钮的命名以及步骤可能与练习解决方案不同。
警告
请注意，在某些代码块中，未显示先前实现步骤的代码。在以下步骤中，请不要删除你在先前步骤中添加的任何代码。
注意
在以下练习中，请将 ## 替换为你的用户组。
提示
不要在意代码编辑器显示的关于缺少 id 的错误。如果你希望应用启用 UI 适配（UI Adaptation），则 ID 是必需的。如果不是这种情况，你只需在 manifest.json 文件中将 FlexEnabled 属性设置为 False。
业务示例
在 SAP Fiori Launchpad 中，用户有两个应用。为完成一个业务流程，用户必须在完成该流程的第一个任务后导航到另一个应用，向第二个应用传递参数，并在第二个应用中继续操作。
任务 1：为第一个应用创建 SAPUI5 项目
步骤
使用 SAP Fiori application 项目生成器创建带部署配置的新项目。
项目属性
参数 |
值 |
|---|---|
Project type |
SAP Fiori application |
Template Type |
SAP Fiori |
Template |
Basic |
Data source |
None |
View |
Main |
Module name |
startnavigation |
Application namespace |
student##.sap.training |
部署配置
参数 |
值 |
|---|---|
Target |
ABAP |
目标（Destination） |
S4D_100 |
Name |
|
Description |
|
Package |
|
Transport Request |
分配给你用户的传输请求，请参见事务 SE01 |
启动 SAP Business Application Studio。
要在 Welcome 页面上创建新项目，请选择磁贴 Start from template。
从可用模板列表中选择 SAP Fiori application 并选择 Start。
选择 SAP Fiori 作为 Template Type
选择 Basic 模板并选择 Next。
从 Data source 列表中选择 None 并选择 Next。
输入
Main作为 view name 并选择 Next。输入
startnavigation作为 module name，输入student##.sap.training作为 namespace。在 Add deployment configuration 处选择 Yes 并选择 Next。
选择 ABAP 作为目标，并从可用的目标（Destination）列表中选择目标 S4D_100
输入
ZUX410NavStar##作为 ABAP Repository 的名称。在描述字段中输入描述
UX410 navigation starter ##。输入
ZTRAIN_##作为 package，并输入分配给你用户的传输请求。你可以在 S4D 系统中使用事务 SE01 找到分配给你用户的传输请求。选择 Finish。
移除生成的路由模式 :?query:，将其替换为空字符串。
打开文件
*manifest.json*。向下滚动到路由配置。
移除字符串字面量
:?query:，将其替换为空字符串。通过向
*Main.view.xml*的 page 控件添加新的sap.ui.layout.VerticalLayout控件，并向VerticalLayout控件添加sap.m.Link和sap.m.Button控件作为 UI 控件，来实现基本的 startnavigation 项目。向新添加的控件添加以下属性。
sap.m.Link 控件的属性
属性 |
值 |
|---|---|
id |
|
text |
|
任务 2：为第二个应用创建 SAPUI5 项目
步骤
使用 SAP Fiori application 项目生成器创建带部署配置的新项目。
项目属性
属性 |
值 |
|---|---|
Template Type |
SAP Fiori Generator |
Template |
Basic |
Data source |
None |
View |
|
Module name |
|
Application namespace |
|
部署配置
属性 |
值 |
|---|---|
Target |
ABAP |
目标（Destination） |
S4D_100 |
Name |
|
Package |
|
Transport Request |
分配给你用户的传输请求，请参见事务 SE01 |
Description |
|
.env 内容
属性 |
值 |
|---|---|
UI5_USERNAME |
|
UI5_PASSWORD |
SAP 用户 TRAIN-## 的密码 |
如果尚未打开，请启动 SAP Business Application Studio。
在 SAP Business Application Studio 的 Get Started 页面中选择链接 New Project from template，或转到菜单项 File → New Project from Template 。
选择 SAP Fiori Generator 作为 Template Type。
选择 Basic 模板并选择 Next。
从 Data source 列表中选择 None 并选择 Next。
输入
Main作为 view name 并选择 Next。输入
endnavigation作为 module name，输入student##.sap.training作为 namespace。在 Add deployment configuration 处选择 Yes 并选择 Next。
选择 ABAP 作为目标，并从可用的目标（Destination）列表中选择目标 S4D_100。
输入
ZUX410NavEnd##作为名称 。在描述字段中输入描述
UX410 navigation end ##。输入
ZTRAIN_##作为包，并输入分配给你用户的传输请求。你可以在 S4D 系统中使用事务 SE01 找到分配给你用户的传输请求。选择 Finish。
移除生成的路由模式 :?query:，将其替换为空字符串。
打开文件
*manifest.json*。向下滚动到路由配置。
移除字符串字面量
:?query:，将其替换为空字符串。通过向
*Main.view.xml*的 page 控件添加新的sap.ui.layout.VerticalLayoutcontrol，并向VerticalLayout插入以下 UI 控件，来实现基本的 endnavigation 项目。
sap.m.Label 控件属性
属性 |
值 |
|---|---|
id |
|
text |
|
打开文件
*Main.view.xml*。添加值为
layout的 XML-namespace alias，并赋值sap.ui.layout。向生成的
sap.m.Page控件的 content 聚合添加sap.ui.layout.VerticalLayout类型的控件。向
VerticalLayout控件添加控件sap.m.Label，并分配表格中列出的属性。你的实现现在应如下所示：
<mvc:View controllerName="student##.sap.training.endnavigation.controller.Main"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m"
xmlns:layout="sap.ui.layout">
<Page id="page" title="{i18n>title}">
<content>
<layout:VerticalLayout>
<Label id="idInfo" text="Hello world"/>
</layout:VerticalLayout>
</content>
</Page>
</mvc:View>
使用
npm run deploy命令构建 endnavigation 项目并将其部署到已连接的 SAP 系统 S4D_100。选择该项目，然后从上下文菜单中选择 Open in Terminal。
在控制台中输入命令
npm run deploy。确认以开始部署。
如果系统要求你输入凭据，请输入用户
TRAIN-##和你的密码
任务 3：在 SAP Fiori Launchpad 中配置两个磁贴
步骤
使用以下详细信息在 S4D 系统中创建两个语义对象。
语义对象配置
语义对象 |
语义对象名称 |
语义对象描述 |
|---|---|---|
UX410NavStart## |
UX410NavStart## |
用于 start app## 的语义对象 |
UX410NavEnd## |
UX410NavEnd## |
用于 end app## 的语义对象 |
启动 SAP GUI，并使用你的用户
TRAIN-##登录信息登录 S4D 系统。从 SAP Fiori → Configuration 的用户菜单中，选择 Define Semantic Object – Customer，或使用事务代码
/UI2/SEMOBJ。 如果你使用事务代码启动事务，请添加前缀 /n 。选择 Edit 切换到编辑模式。
确认跨客户端消息。 如果出现消息告知你该表当前被另一个用户锁定，这意味着另一位课程学员正在为其练习运行该事务。确认该消息，等待另一位学员完成，然后重试。
在工具栏上选择 New Entries。
使用表格中的数据添加语义对象配置：Semantic Object、Name 和 Description。
保存你的更改，并将其分配给传输请求。
确认传输分配对话框并关闭事务。 在完成配置后尽快关闭事务非常重要。如果你不退出，将会锁定该表。
使用以下表格中的属性，通过 Launchpad Content Manager 应用在 S4D 系统中创建目录：
目录配置
属性 |
值 |
|---|---|
标题 |
|
ID |
|
打开 Chrome 浏览器。
在收藏夹栏中，选择 10 Development → s4dhost → 10 S4D SAP Fiori Launchpad
输入你的凭据并登录。你可以保存密码以便将来登录。
如果 Quick Tour 弹出窗口打开，请将其关闭。
导航到 SAP Fiori Launchpad 空间，并启动 Launchpad Content Manager 应用。
注意
打开可能需要一些时间。
应用启动后选择 Create。
输入目录配置表中的值，并选择 Continue。
选择一个已分配的传输请求并确认对话框。
使用 SAP Fiori Launchpad Designer 和以下表格中所示的配置属性，为应用 ZUX410NavStar## 创建磁贴映射。
Start 导航应用的目标映射配置
属性 |
值 |
|---|---|
语义对象 |
|
操作 |
|
应用类型 |
SAPUI5 Fiori App |
标题 |
|
URL |
|
ID |
|
提示
如果你在创建目标映射时遇到错误，刷新浏览器标签页应该可以解决该问题。
如果 Launchpad Content Manager 应用仍处于打开状态，请刷新它，或再次打开它。
在 Launchpad Content Manager 应用中搜索你新创建的目录。
选择 Open in Designer。
在新目录内选择 Target Mapping 图标。
选择 Create Target Mapping。
将表格中的属性输入到表单中。
选择 Save。
使用以下表格中所示的配置属性，为应用 ZUX410NavEnd## 创建新的磁贴映射：
End 导航应用的目标映射配置
属性 |
值 |
|---|---|
语义对象 |
|
操作 |
|
应用类型 |
SAPUI5 Fiori App |
标题 |
|
URL |
|
ID |
|
选择 Create Target Mapping。
将表格中的属性输入到表单中。
选择 Save。
使用以下属性在你的目录中创建两个静态磁贴：
Start 的标题配置
属性 |
值 |
|---|---|
标题 |
|
副标题 |
|
语义对象： |
|
操作 |
|
End 的标题导航
属性 |
值 |
|---|---|
标题 |
|
副标题 |
|
语义对象： |
|
操作 |
|
选择第一个 Tiles 图标，并选择带 plus 符号的磁贴。
选择 App Launcher – Static。
输入表格中提供的值。
保存你的更改。
重复操作以为第二个目标创建磁贴。
关闭 SAP Fiori Launchpad Designer 标签页，并退出 Content Manager 应用。
使用以下属性创建新的 Launchpad 空间，其中包含新的 Launchpad 页面
空间/页面配置的属性
属性 |
值 |
|---|---|
空间 ID |
|
空间描述 |
|
空间标题 |
|
页面 ID |
|
页面描述 |
|
页面标题 |
|
传输 |
使用分配给你用户的传输请求 |
从 SAP Fiori Launchpad 启动 Manage Launchpad Spaces 应用。
在 Spaces 表格的工具栏中单击 Create 按钮
选择 Also create a page 选项
输入上表中的值
单击 Create。
将 SAP Fiori 目录 UX410_BC_## 分配给页面 ZPAGE_##，使用
Navigation exercise ##作为节标题，并将目录中的磁贴添加到该页面。单击新创建的页面并选择 Edit。
在 Section Title 输入字段中输入值
Navigation exercise ##。选择页面工具栏右侧的三个点，并单击标签为 Catalogs 的按钮。
在弹出的对话框中搜索目录
UX410_BC_##。选择该目录并按 Select。
在每个磁贴上按标签为 Add 的按钮，以将该磁贴添加到页面
按 Save。
将页面可见性设置为 Visible
返回到你新建空间 ZSPACE_## 的空间配置。
按 Edit 按钮进入编辑模式
通过选择单选按钮将页面标记为已选中
按 Set Visible 按钮。
按 Save。
返回到 SAP Fiori Launchpad Home 页面。
创建名为
Z_BR_UX410_##的新单一角色，并将空间 ZSPACE_## 添加到该角色。将你的用户TRAIN-##分配给角色 Z_BR_UX410_##。打开 SAP GUI 并登录 S4D 系统
启动事务
PFCG。在输入字段中输入值
Z_BR_UX410_##并按 Single Role。单击 Menu 并确认要保存更改。
从 Transaction 下拉字段中选择 SAP Fiori Launchpad → Launchpad Catalog。
搜索你的目录
ZUX410_BC_##，选择该目录并确认对话框。从 Launchpad Catalog 下拉字段中选择 SAP Fiori Launchpad → Launchpad Space。
在弹出的对话框中输入空间 ID
ZSPACE_##，或使用 F4 值帮助搜索它，然后按 Continue。选择 User 标签页，并将你的
TRAIN-##用户分配给该角色按 Save。
测试你的配置。
打开 SAP Fiori Launchpad，如果它已打开则刷新浏览器页面。
选择 Navigation exercise ## 空间。
单击这些磁贴，并验证应用已显示
关闭 SAP Fiori Launchpad。
任务 4：使用 CrossApplicationNavigation 服务
实现链接和按钮控件，以从 Navigation start 应用导航到 Navigation end 应用。
步骤
实现
onInit函数，使其检查应用是否运行在 SAP Fiori Launchpad 中。获取对CrossApplicationNavigation服务ShellContainer的引用，并将该引用存储在成员变量中。创建指向前一个任务中创建的 intentUX410NavEnd## - display的导航链接，并将该导航链接分配给前一个任务中创建的sap.m.Link控件的href属性。启动 SAP Business Application Studio 并打开开发空间 UX410。
打开 startnavigation 项目的
*Main.controller.js*文件。如果尚未创建，请创建
onInit函数的空实现。实现
onInit函数，以检查应用是否运行在 SAP Fiori Launchpad 中。获取对CrossApplicationNavigation服务的引用，并将该引用分配给成员变量。
sap.ui.define([
"sap/ui/core/mvc/Controller"
],
function (Controller) {
"use strict";
return Controller.extend(
"student##.sap.training.startnavigation.controller.Main", {
onInit: function () {
this._fnGetService = sap.ushell &&
sap.ushell.Container &&
sap.ushell.Container.getService;
this._oCrossAppNavigation = this._fnGetService &&
this._fnGetService("CrossApplicationNavigation");
});
});
调用函数
hrefForExternal，并传入值UX410NavEnd##作为 semanticObject、值display作为 action。获取对
*Main.view.xml*视图中实现的sap.m.Link控件的引用，并将返回值分配给局部变量。在
sap.m.Link引用上调用setHref函数，并将哈希传入该函数。你的代码现在应如下所示：
onInit: function () {
this._fnGetService = sap.ushell &&
sap.ushell.Container &&
sap.ushell.Container.getService;
this._oCrossAppNavigation = this._fnGetService &&
this._fnGetService("CrossApplicationNavigation");
this._hash = (this._oCrossAppNavigation&&
this._oCrossAppNavigation.hrefForExternal({
target : {
semanticObject : "UX410NavEnd00",
action: "display"
}
})) || "";
let _oLink = this.byId("idNavLink");
_oLink.setHref(this._hash);
}
在项目 startnavigation 的 Main 视图的控制器
*Main.controller.js*中实现onPress事件处理程序。使用在onInit函数中获取的对CrossApplicationNavigation服务的引用。在该引用上调用toExternal函数，并向该函数传入值UX410NavEnd##作为 semantic object、值display作为 action。如果尚未打开，请打开 startnavigation 项目 controller 文件夹中的
*Main.controller.js*文件。在
onInit实现之后紧接着为事件处理函数 onPress 添加空实现。检查对
CrossApplicationNavigation服务的引用是否可用。如果该引用可用，则在该引用上调用toExternal函数，并将带属性shellHash的目标配置传入该函数。将从onInit函数中获取的成员变量中存储的哈希字符串分配给shellHash。保存你的更改。你的实现现在应如下所示：
onPress : function(oEvent) {
if(this._oCrossAppNavigation) {
var oHref = this._oCrossAppNavigation.toExternal({
target : {
shellHash : this._hash
}
})
}
}
将 startnavigation 项目部署到 S4D 系统。
选择 startnavigation 应用，并从上下文菜单中选择 Open in Terminal。
输入
npm run deploy并按照说明操作。登录 SAP Fiori launchpad 以测试你的实现。启动你的应用并尝试链接和按钮，以测试导航。
在 Google Chrome 中选择书签以启动 SAP Fiori launchpad。
输入你的登录凭据。
启动 startnavigation 应用。
选择该链接以启动导航。
使用 SAP Fiori launchpad 的后退按钮导航回 startnavigation 应用。
选择按钮控件以进行导航。
任务 5：向导航目标传递参数
步骤
扩展 startnavigation 应用的实现，并在导航期间传递名称为
helloText的参数。将字符串Hello UX410分配给helloText参数。如果尚未打开，请启动 SAP Business Application Studio 并打开开发空间 UX410。
打开项目 startnavigation 的
*Main.controller.js*文件。通过将配置对象
params传入hrefForExternal函数来增强控制器的onInit函数，并为该参数分配值为Hello UX410的参数helloText。
onInit: function () {
this._fnGetService = sap.ushell &&
sap.ushell.Container &&
sap.ushell.Container.getService;
this._oCrossAppNavigation = this._fnGetService &&
this._fnGetService("CrossApplicationNavigation");
this._hash = (this._oCrossAppNavigation&&
this._oCrossAppNavigation.hrefForExternal({
target : {
semanticObject : "UX410NavEnd00",
action: "display"
},
params : {
"helloText" : "Hello UX410"
}
})) || "";
let _oLink = this.byId("idNavLink");
_oLink.setHref(this._hash);
}
部署更新后的 startnavigation 项目。
选择 startnavigation 项目，并从上下文菜单中选择 Open in Terminal 选项。
输入
npm run deploy并按照说明操作。
步骤
实现 endnavigation 项目
*Main.controller.js*文件的onInit函数。读取 startnavigation 应用传递的helloText参数，并将该参数值分配给*Main.view.xml*实现中标签的 text 属性。打开 endnavigation 项目的
*Main.controller.js*文件。在控制器实现中实现空的
onInit函数。获取组件数据，并将该组件数据分配给名为
oComponentData的局部变量。
sap.ui.define([
"sap/ui/core/mvc/Controller"
],
function (Controller) {
"use strict";
return Controller.extend(
"student##.sap.training.endnavigation.controller.Main", {
onInit: function () {
var oComponentData =
this.getOwnerComponent().getComponentData();
}
}
});
});
检查组件的
startupParameters是否包含参数helloText。如果该参数可用，则获取该参数的值并将其分配给局部变量。
onInit: function () {
var oComponentData = this.getOwnerComponent().getComponentData();
if(oComponentData && oComponentData.startupParameters &&
oComponentData.startupParameters.helloText) {
var sHelloText = oComponentData.startupParameters.helloText[0];
}
}
获取对 ID 为
idInfo的sap.m.Label类型 UI 控件的引用，并将该引用分配给局部变量。在该对象上调用setText函数，并将启动参数值传入该 UI 控件的 text 属性。
onInit: function () {
var oComponentData = this.getOwnerComponent().getComponentData();
if(oComponentData && oComponentData.startupParameters &&
oComponentData.startupParameters.helloText) {
var sHelloText = oComponentData.startupParameters.helloText[0];
var oLabel = this.byId("idInfo");
oLabel.setText(sHelloText);
}
}
部署更新后的 endnavigation 项目。
选择 endnavigation，并从上下文菜单中选择 Open in Terminal 选项。
输入
npm run deploy并按照说明操作。登录 SAP Fiori Launchpad 以测试你的实现。打开 startnavigation 应用并测试导航实现。
使用 Google Chrome 中的书签启动 SAP Fiori launchpad。
输入你的详细信息以登录。
启动 startapplication 应用。
选择该链接以启动导航。
使用 SAP Fiori Launchpad 的后退按钮导航回 startapplication 应用。
选择按钮控件以进行导航。
本课其余配图
本课其余配图
本课其余配图