Enable App-to-App Navigation in BAS

Introduction

During development of Fiori apps, you may want to test app-to-app navigation in SAP Business Application Studio (BAS). In Web IDE Full-Stack this can be easily achieved by the method described in the following blog post.
Fiori App To App Navigation in Web IDE Full-Stack

Recently I found Fiori tools documentation and learned how to enable app-to-app navigation in BAS. If you are developing a Fiori elements app, you can activate app-to-app navigation with just a few clicks. If you are developing a freestyle app, this method is not available, but you can still enable navigation by following a few manual steps. In this blog, I’m going to demonstrate the both scenarios.

Enable App-to-App Navigation between Fiori elements app

If the source and target apps are both Fiori elements apps, it’s easy. The only prerequisite is that the both apps are located in the same workspace.

1. Create source and target apps with Fiori elements

In the example below, the source app shows the a of orders and the target app shows a list of customers. The data source is Northwind OData V2 service.

1.1. Create the source and the target apps using SAP Fiori application template.

1.2. Select “List Report Object Page” floorplan.

1.3. Select Data Source and Service URL.

1.4. Select main entity. I have selected “Orders” for the source app and “Customers” for the target app.

1.5. Specify Project Attributes.

Select “Yes” for “Add FLP configuration”.

1.6. Maintain Fiori Launchpad Configuration. Semantic Object and Action are necessary for app-to-app navigation.

1.7. To enable intent-based navigation, add the following annotation to the source (Orders) app.

            <Annotations Target="NorthwindModel.Order">
                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="OrderID"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="OrderDate"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>      
                        <Record Type="UI.DataFieldWithIntentBasedNavigation">
                            <PropertyValue Property="Value" Path="CustomerID"/>
                            <PropertyValue Property="SemanticObject" String="Customers"/>
                            <PropertyValue Property="Action" String="display"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>                                           
                    </Collection>
                </Annotation>
            </Annotations>

Also, I have added the following annotation to the target (Customers) app so that Customer ID and Company Name are displayed in the Object Page header.

            <Annotations Target="NorthwindModel.Customer">
                <Annotation Term="UI.HeaderInfo">
                    <Record Type="UI.HeaderInfoType">
                        <PropertyValue Property="TypeName" String="Customer"/>
                        <PropertyValue Property="TypeNamePlural" String="Customers"/>
                        <PropertyValue Property="Title">
                            <Record Type="UI.DataField">
                                <PropertyValue Property="Value" Path="CustomerID"/>
                            </Record>
                        </PropertyValue>
                        <PropertyValue Property="Description">
                            <Record Type="UI.DataField">
                                <PropertyValue Property="Value" Path="CompanyName"/>
                            </Record>
                        </PropertyValue>                        
                    </Record>
                </Annotation>
            </Annotations>

1.8. Test the source app. It looks like below picture and the Customer ID is displayed as a link.

However, navigation is not possible yet.

2. Enable App-to-App Navigation

Next, let’s enable app-to-app navigation.

2.1. Open Command Palette and enter Fiori: Enable App-to-App Navigation Preview.

2.2. Select the source application.

2.3. Select the target application.

As a result, the following message is displayed: App-to-App Navigation enabled.

2.4. Execute the source app and this time the navigation should work.
If you select customer “VINET” for example,

Customers app opens in the Object Page.

3. Behind the scenes

When you enable app-to-app navigation with the command described above, a file named appconfig/fioriSandboxConfig.json is generated.

Also, the following section is added to ui5.yaml.

These settings need to be manually added if you want to enable navigation for freestyle apps.

Enable App-to-App Navigation from Free style app

Freestyle apps don’t appear in the source and target app list when you execute “Enable App-to-App Navigation Preview” command. So you need to add some manual configurations to enable navigation.

1. Create a Freestyle app

In the example below, I will create a freestyle app as a source app which shows a list of orders. The target app is the same as the previous example.

1.1.  Create a freestyle app using SAP Fiori application template. Here I have chosen “SAPUI5 Application”.

1.2. Select Data Source and Service URL.

1.3. Specify Project Attributes and Launchpad Configuration.

1.4. Maintain the view code as follows.

<mvc:View
    controllerName="northwind.ordersfreestyle.controller.App"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m"
>
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="{i18n>title}">
					<content>
                        <Table id="table" 
                            items="{path: '/Orders'}" mode="SingleSelectLeft">
                            <headerToolbar>
                            <OverflowToolbar>
                                <content>
                                <Title text="Orders" />
                                <ToolbarSpacer/>
                                <Button text="Nav to Customer" press="onNavToCustomer" />   
                                </content>
                            </OverflowToolbar>
                            </headerToolbar>
                            <columns>
                            <Column>
                                <Text text="Order ID"/>
                            </Column>
                            <Column>
                                <Text text="Order Date"/>
                            </Column>   
                            <Column>
                                <Text text="Customer ID"/>
                            </Column>                        
                            </columns>
                            <items>
                                <ColumnListItem>
                                    <Text text="{OrderID}"/>
                                    <Text text="{path: 'OrderDate', type: 'sap.ui.model.odata.type.DateTime'}"/>
                                    <Text text="{CustomerID}"/>
                                </ColumnListItem>    
                            </items>  
                        </Table>                        
                    </content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

The view will show a list of orders and “Nav to Customer” button as below.

1.5. Maintain the controller code that triggers navigation.

sap.ui.define([
	"sap/ui/core/mvc/Controller"
],
	/**
	 * @param {typeof sap.ui.core.mvc.Controller} Controller
	 */
	function (Controller) {
		"use strict";

		return Controller.extend("northwind.ordersfreestyle.controller.App", {
			onInit: function () {

            },
            
            onNavToCustomer: function (oEvent) {
                var customerId = this.byId("table").getSelectedContexts()[0].getObject().CustomerID;
                if (sap.ushell && sap.ushell.Container && sap.ushell.Container.getService) {
                    var oCrossAppNav = sap.ushell.Container.getService("CrossApplicationNavigation"); 
                    oCrossAppNav.toExternal({
                        target : { semanticObject : "Customers", action : "display" },
                        params : { CustomerID : [ customerId ] }
                    })
                }

            }
		});
	});

2. Enable App-to-App Navigation

Here you will add some configurations manually which would be generated if you use “Enable App-to-App Navigation Preview” command.

2.1. Create test/flpSandbox.html file.

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Fiori Launchpad Sandbox</title>

	<script>
		window["sap-ushell-config"] = {
            defaultRenderer: "fiori2",
            bootstrapPlugins: {
                "KeyUserPlugin": {
                    "component": "sap.ushell.plugins.rta"
                },
                "PersonalizePlugin": {
                    "component": "sap.ushell.plugins.rta-personalize"
                }
            },
            applications: {
                "masterDetail-display": {
					title: "Order List",
					description: "",
					additionalInformation: "SAPUI5.Component=northwind.ordersfreestyle",
					applicationType: "URL",
					url: "../"
                },
            }
        };
	</script>

	<script id="sap-ui-bootstrap" src="/test-resources/sap/ushell/bootstrap/sandbox.js">
	</script>

    <script id="sap-ui-bootstrap" 
        src="/resources/sap-ui-core.js"
		data-sap-ui-resourceroots='{"northwind.ordersfreestyle": "../"}' 
        data-sap-ui-theme="sap_fiori_3" 
        data-sap-ui-compatVersion="edge" 
        data-sap-ui-async="true"
		data-sap-ui-frameOptions="allow">
	</script>

	<script>
		sap.ui.getCore().attachInit(() => sap.ushell.Container.createRenderer().placeAt("content"));
	</script>
</head>

<body class="sapUiBody" id="content"></body>

</html>

2.2. Create appconfig/fioriSandboxConfig.json file.

{
  "applications": {
    "Orders2-display": {
      "additionalInformation": "SAPUI5.Component=northwind.ordersfreestyle",
      "applicationType": "URL",
      "url": "../"
    },
    "Customers-display": {
      "additionalInformation": "SAPUI5.Component=northwind.customers",
      "applicationType": "URL",
      "url": "../resources/northwind.customers"
    }
  }
}

2.3. Add the following section to ui5.yaml.

  - name: fiori-tools-servestatic
    afterMiddleware: compression
    configuration:
      paths:
        - path: /resources/northwind.customers
          src: /home/user/projects/customers/webapp
        - path: /appconfig
          src: /home/user/projects/orders-freestyle/appconfig  

Finally, start the app and open test/flpSandbox.html.
When you select a row and press “Nav to Customer” button, the Customers app will open and navigate to the Object Page.

Conclusion

• You can enable app-to-app navigation for Fiori elements app with Fiori: Enable App-to-App Navigation Preview command.
• You can enable app-to-app navigation for freestyle apps with manual configuration.

References

• Fiori tools Users Guide: App-to-App Navigation Preview
• Understanding the Nuts and Bolts of SAP Fiori Development in the Cloud Foundry Environment