配置外部导航

学习目标

  • 配置到另一个应用程序的导航。

外部导航的配置

要配置两个应用之间的导航，您需要设置导航目标，并在源应用中配置导航（出站导航）。

有若干种方式可以配置从源应用发起的导航。

  1. 作为表格工具栏中的按钮。为此，添加一个 @UI.DataFieldForIntentBasedNavigation 注解，其中包含语义对象与动作的组合。

  2. 您可以替换 manifest.json 中到对象页面或子对象页面的标准内部导航。有关更多信息，请参见 Changing Navigation to Object Page 。

  3. 您可以同时在表单和表格中（在列表报表和对象页面上）配置链接。为此，您可以使用 @Common.SemanticObject 注解。 有关更多信息，请参见 Navigation from an App (Outbound Navigation)。

  4. 在面向 OData V4 应用的 SAP Fiori elements 中，您可以从对象页面的头部 facet 标题配置外部导航。有关更多信息，请参见 Navigation from Header Facet Title 。

将导航上下文传递到目标应用

源应用的导航上下文会传递到目标应用。

例如，如果用户在筛选栏中选择了一些值，然后导航到目标应用，则筛选栏中的值会传递到目标应用，并显示在其筛选栏中（如果目标应用中存在筛选栏）。如果导航上下文与目标应用的多个项匹配，则显示列表报表。如果可以唯一标识目标应用的对象（即在导航上下文中提供了键字段的所有值），则显示目标应用的对象页面或子对象页面。

SAP Fiori 启动板还可以向目标应用传递其他值，例如 FLP 目标映射默认值。有关更多信息，请参见 Navigation to an App (Inbound Navigation)。

通过按下工具栏按钮从 Manage Travels 应用导航到 Display Customers 应用

您想要提供从 Manage Travels 应用导航到客户详细信息页面的能力，该页面是另一个名为 Display Customers 的应用。

任务流程

您将先在本地沙盒环境中打开这些应用。然后，您将添加按钮并检查结果。

前提条件

您已完成单元 Discovering the Flexibility of the Programming Model for SAP Fiori Elements for OData V4（课程：Adding a Custom Micro Chart）中的练习 Add a Custom Micro Chart to the Object Page Header of the Display Customers App。或者，您可以检出其解决方案分支：solution/add-custom-micro-chart-to-object-page-header。

观看模拟并执行步骤

本练习包含一个显示所有步骤的模拟。您可以按照该模拟使用自己的试用账户操作。

Exercise：Start Exercise（SAP 官方交互式练习）

步骤

  1. 打开沙盒环境。

  2. 执行 cds watch 并导航到 *@sap/cds* 服务器的 Welcome 页面。在生产环境中，该应用应在 SAP Fiori 启动板中运行。在本练习中，我们将使用沙盒环境来模拟它。

  3. 将 */sandbox/index.html* 添加到当前页面的 URL 中，以打开沙盒环境。

  4. 您可以看到模拟的 SAP Fiori 启动板，其中有两个代表这些应用的磁贴。

  5. 选择 Travels 磁贴。您已在沙盒环境中打开 Manage Travels 应用。

  6. 向 Manage Travels 应用添加一个导航按钮。

  7. 在 SAP Business Application Studio 中打开 *layouts.cds*，并向 Travel 实体的 @UI.LineItem 注解添加以下记录：

{ $Type : 'UI.DataFieldForIntentBasedNavigation', SemanticObject : 'Customer', Action : 'display', Label : '{i18n>DisplayCustomers}', RequiresContext : false, Mapping : [ { $Type : 'Common.SemanticObjectMappingType', LocalProperty : to_Customer_CustomerID, SemanticObjectProperty : 'CustomerID', } ] }

您已添加一个类型为 UI.DataFieldForIntentBasedNavigation 的注解。您已声明语义对象 'Customer' 和动作 'display'。语义对象与动作的组合即为 intent，它将成为此导航的目标。 2. 打开 Display Customers 应用的 *manifest.json* 文件。您可以看到，Display Customers 应用的入站导航已定义语义对象 'Customer' 和动作 'display'。 3. 打开 *i18n.properties* 文件，并为 DisplayCustomers 按钮添加新的 UI 文本。

DisplayCustomers=Display Customers

  1. 请注意，UI.DataFieldForIntentBasedNavigation 记录包含一个 mapping 属性。它用于将目标实体（Passenger）的键属性 CustomerID 映射到源实体（Travel）的外键属性 to_Customer_CustomerID。

  2. 检查结果。

  3. 打开 Manage Travels 应用。您可以看到 Display Customers 按钮已添加到 Travels 表格上方的工具栏中。

  4. 选择 Display Customers 按钮。您已导航到 Display Customers 应用的列表报表。

  5. 检查客户列表并导航返回。

  6. 现在选择一条差旅，然后选择 Display Customers。您已直接导航到所选客户的对象页面。

结果

在本课中，您学习了如何通过列表报表工具栏按钮配置外部导航。

注意

  • 您可以在 GitHub 上找到本练习的解决方案。

  • 解决方案分支是 solution/add-toolbar-button-to-navigate-to-customer-app 。

  • 您可以在 GitHub 上找到该分支与前一个分支的直接比较链接。

注意

  • 您也可以跳过 @UI.DataFieldForIntentBasedNavigation 注解的 Mapping 属性。

  • 您可以在以下位置找到不含 Mapping 属性的解决方案分支： GitHub 。

  • 您可以在 GitHub 上找到不含 Mapping 属性的解决方案分支与含 Mapping 属性的解决方案分支的比较链接。

后续步骤

有关更多信息，请参见：

  • Configuring External Navigation

  • Navigation from an App (Outbound Navigation)

CAP 中的关联

在本节中，您将学习 CAP CDS 中托管关联与非托管关联的区别。这些信息将帮助您更好地理解后续练习中的注解语法。

在数据库模型中，关联需要映射到外键关系。CAP CDS 同时支持非托管关联和托管关联。

非托管关联必须使用源实体和目标实体的现有属性。在这种情况下，CAP 不会生成任何属性，并且无法使用其他关联。ON 子句可以包含任何类型的连接条件，只要它们引用可用的外键属性。以下示例演示如何将具有键属性 CustomerID 的实体 Customer 与具有外键属性 to_Customer_CustomerID 的实体 Booking 关联起来：

entity Booking { ...
to_Customer_CustomerID : String(6);
to_Customer        : Association to Passenger on to_Customer.CustomerID = to_Customer_CustomerID;
}

对于托管关联，会自动生成外键约束。该约束将源实体的外键属性（为托管关联自动添加）与目标实体各自的主键属性（已给定）绑定起来：

entity Booking { ...
to_Customer: Association to Passenger;
}

将托管关联与非托管关联进行比较时，您可以发现两个便利的简化：

  1. Booking 实体不再具有名为 to_Customer_CustomerID 的外键属性

  2. 关联 to_Customer 不再具有 ON 子句

当 CAP 在运行时生成 OData 元数据文档时，您会看到该 API 仍然同时包含表示 ON 子句的引用约束和外键属性 to_Customer_CustomerID：

<EntityType Name="Booking">
<Key>
<PropertyRef Name="BookingUUID"/>
<PropertyRef Name="IsActiveEntity"/>
</Key>
...
<NavigationProperty Name="to_Customer" Type="TravelService.Passenger">
<ReferentialConstraint Property="to_Customer_CustomerID" ReferencedProperty="CustomerID"/>
</NavigationProperty>
<Property Name="to_Customer_CustomerID" Type="Edm.String" MaxLength="6"/>
</EntityType>

请牢记托管关联与非托管关联之间的区别，以及在运行时生成的内容。特别是，您会发现一些您预期在外键属性级别出现的注解，需要在关联级别维护。对于托管关联，外键属性仅在运行时可用。下面的示例展示了在使用托管关联时，用所关联客户的文本 LastName 来标注实体 Booking 的 to_Customer_CustomerID 字段：

annotate Booking with { ...
to_Customer @Common.Text: to_Customer.LastName;
}

使用非托管关联时，外键属性在设计时就已经在源实体上可用：

annotate Booking with { ...
to_Customer_CustomerID @Common.Text: to_Customer.LastName;
}

后续步骤

有关更多信息，请参见：

  • The Nature of Models

  • CDS Associations

  • CDS Association Syntax Options

  • SAP Cloud Platform Backend service: Tutorial [3]: CDS : how to define associations (1)

  • SAP Cloud Platform Backend service: Tutorial [3]: CDS : how to define associations (2)

通过链接从 Manage Travels 应用导航到 Display Customers 应用

您可能想要在列表报表表格中将客户名称显示为链接。这些链接应触发外部导航，跳转到客户应用中显示客户详细信息的相应对象页面。

任务流程

您将先在本地沙盒环境中打开这些应用。然后，您将添加这些链接并检查结果。

前提条件

您已完成单元 Illustrating the Navigation Concept in SAP Fiori Elements for OData V4（课程：Configuring External Navigation）中的练习 Navigate to the Display Customers App from the Manage Travels App by Pressing the Toolbar Button。或者，您可以检出其解决方案分支：solution/add-toolbar-button-to-navigate-to-customer-app。

观看模拟并执行步骤

本练习包含一个显示所有步骤的模拟。您可以按照该模拟使用自己的试用账户操作。

Exercise：Start Exercise（SAP 官方交互式练习）

步骤

  1. 打开应用。

  2. 将 */sandbox/index.html* 添加到 *sap/cds* 服务器欢迎页面的 URL 末尾。这将打开本地沙盒环境，它模拟 SAP Fiori 启动板以测试外部导航。

  3. 选择 Travels 磁贴以打开 Manage Travels 应用。

  4. 添加链接。

  5. 您将为客户名称添加链接。这些链接将触发到 Display Customers 应用的导航，显示相应的对象页面。

  6. 在 SAP Business Application Studio 中打开 *layouts.cds*。

  7. 添加以下代码片段：

annotate TravelService.Travel with {
@(Common: {
SemanticObject: 'Customer',
SemanticObjectMapping: [
{
LocalProperty : to_Customer_CustomerID,
SemanticObjectProperty: 'CustomerID'
}
]})
to_Customer
};

您已将 @Common.Semantic Object 和 @Common.SemanticObjectMapping 注解添加到关联 to_Customer。请注意，这是一个托管关联，它代表本地外键属性 to_Customer_CustomerID。 3. 检查结果。

  1. 打开 *manifest.json*。您可以在 crossNavigation/inbounds 部分看到 Customer 语义对象。它由本地沙盒环境使用。

  2. 切换到应用程序窗口。您可以看到 Manage Travels 应用的列表报表。它运行在模拟 SAP Fiori 启动板的本地沙盒环境中。您可以看到客户名称现在显示为链接。

结果

在本课中，您学习了如何轻松地将表格单元格配置为链接，以触发到另一个应用的外部导航。

注意

  • 您可以在 GitHub 上找到本练习的解决方案。

  • 解决方案分支是 solution/add-link-to-navigate-to-customer-app 。

  • 您可以在 Github 上找到该分支与前一个分支的直接比较链接。

注意

  • 您也可以跳过 @Common.SemanticObjectMapping 注解。

  • 您可以在以下位置找到不含 @Common.SemanticObjectMapping 注解的解决方案分支： GitHub 。

  • 您可以在 GitHub 上找到不含 @Common.SemanticObjectMapping 注解的解决方案分支与含 @Common.SemanticObjectMapping 注解的解决方案分支的比较链接。

后续步骤

有关更多信息，请参见 Navigation from an App (Outbound Navigation)。