Implementing the CrossApplicationNavigation Service

Objective

After completing this lesson, you will be able to implement the CrossApplicationNavigation service to navigate between SAP Fiori applications

Cross Application Navigation

Using the CrossApplicationNavigation-Service

After the recap of the target mapping and the tile configuration, we want to take a look on how to implement navigation using the class sap.ushell.services.CrossApplicationNavigation.

The CrossApplicationNavigation service is used to navigate from one SAP Fiori application to another. We will next see how to implement navigation using the class sap.ushell.services.CrossApplicationNavigation and how to use CrossApplicationNavigation service in custom SAP Fiori Application implemented as SAPUI5-freestyle application.

Let's look at the code snippet that triggers navigation using the  CrossApplicationNavigation service.

The code snippet shows how to use the sap.ushell.services.CrossApplicationNavigation. In the display onInit implementation, we will check in the first line of code whether the application is running in the SAP Fiori Launchpad or not.

Remember one of the golden SAPUI5 rules was Every SAP Fiori app must run as a web app. This says that it should also be possible to run the application outside of the SAP Fiori Launchpad, of course we limited features, but it runs.

If the reference to sap.ushell.Container.getService can be resolved, the reference to the getService function is stored in the variable _fnGetService. Next we can call the function and pass the value CrossApplicationNavigation as a parameter. In the third line of the implementation we call the function hrefForExternal and pass the name of the semantic object and the action to the function as parameter.

The parameter _hash will contain the calculated hash. In the shown example the value is #UX410NavEnd00-display. And this is the value that was created automatically during target mapping configuration.

The implementation of the onPress function in the code snippet will trigger the navigation directly.

As you can see in the implementation, it is also possible to pass simple key-value pairs as navigation parameter to the target. The target application is able to fetch these data and work with them.

Next, we will look at the code snippet that shows how to work with navigation parameters.

In the code snippet, you can see how to handle parameters that were passed during intent-based navigation. The navigation parameters sent by the navigation initiator will be stored in the parameter startupParameters of the target application. In our example the first application passed a parameter with the name helloText and the value Hello UX410. Please have in mind that the parameter helloText is handled as an array inside the target application.

Navigating in SAP Fiori Using the CrossApplicationNavigation Service

Time to look at an end-to-end example to explain implementation of CrossApplicationNavigation service.

Let's say that the user has two applications in the SAP Fiori Launchpad. These applications are named startnavigation and endnavigation. To complete a business process, the user has to navigate, after the user has completed the first task of the process, to another application, pass arguments to that second application, and proceed in the second application.

We will next look at a series of videos explaining the usage of CrossApplicationNavigation service to navigate from the startnavigation application to the endnavigation application.

Watch the first video to see how to implement the link and button controls to navigate from the startnavigation application to the endnavigation application.

The following code shows how to implement the onInit function to check if the application is running the SAP Fiori Launchpad.

Code Snippet
1234567891011121314151617181920212223242526272829303132
sap.ui.define([ "sap/ui/core/mvc/Controller" ], /** * @param {typeof sap.ui.core.mvc.Controller} 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"); this._hash = (this._oCrossAppNavigation&& this._oCrossAppNavigation.hrefForExternal({ target : { semanticObject : "UX410NavEnd00", action: "display" } })) || ""; let _oLink = this.byId("idNavLink"); _oLink.setHref(this._hash); }

The following code shows how to implement the onPress event handler in the controller Main.controller.js of the Main view of project startnavigation.

Code Snippet
123456789
onPress : function(oEvent) { if(this._oCrossAppNavigation) { var oHref = this._oCrossAppNavigation.toExternal({ target : { shellHash : this._hash } }) } }

Watch the next video to see how to extend your implementation of the startnavigation application and pass a parameter to the navigation target.

The following code shows how to pass parameters to the navigation target.

Code Snippet
12345678910111213141516171819
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); }

Watch the last video in the series to see how to extend your implementation of the endnavigation application to fetch a parameter passed from another application.

The following code shows how to extend the endnavigation Application to fetch a parameter passed from another application.

Code Snippet
1234567891011121314151617181920
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(); if(oComponentData && oComponentData.startupParameters && oComponentData.startupParameters.helloText) { var sHelloText = oComponentData.startupParameters.helloText[0]; var oLabel = this.byId("idInfo"); oLabel.setText(sHelloText); } } }); });

How to Navigate in SAP Fiori

For the steps and data of this demonstration, refer to the exercise Navigate in SAP Fiori.

Navigate in SAP Fiori

Note

SAP Business Technology Platform and its tools are cloud services. Due to the nature of cloud software, naming of fields and buttons as well as steps may differ from the exercise solution.

Caution

Please be aware that in some code blocks, the code of previous implementation steps is not shown. In the following steps, please do not delete any code that you have added in previous steps.

Note

In the following exercises please replace ## with your user group.

Hint

Don't bother with the errors about missing id shown by the code editor. IDs are mandatory if you want your application to be enabled for UI Adaptation. If this is not the case, you can simply set the FlexEnabled property to False in the manifest.json file.

Business Example

In the SAP Fiori Launchpad the user has two applications. To complete a business process the user has to navigate, after the user has completed the first task of the process to another application, pass arguments to that second application and proceed in the second application.

Task 1: Create a SAPUI5 Project for the first application

Steps

  1. Create a new project with a deployment configuration using the SAP Fiori application – project generator.

    Project properties

    ParameterValue
    Project typeSAP Fiori application
    Template TypeSAP Fiori
    TemplateBasic
    Data sourceNone
    ViewMain
    Module namestartnavigation
    Application namespacestudent##.sap.training

    Deployment configuration

    ParameterValue
    TargetABAP
    DestinationS4D_100
    NameZUX410NavStar##
    DescriptionUX410 navigation starter ##
    PackageZTRAIN_##
    Transport RequestTransport assigned to your user, see transaction SE01
    1. Start the SAP Business Application Studio.

    2. To create a new project at the Welcome page, choose the tile Start from template.

    3. Choose SAP Fiori application from the list of available templates and choose Start.

    4. Choose SAP Fiori as Template Type

    5. Select the Basic template and choose Next.

    6. Select None from the Data source list and choose Next.

    7. Insert Main as view name and choose Next.

    8. Insert startnavigation as module name and student##.sap.training as namespace.

    9. Select Yes at the Add deployment configuration and choose Next.

    10. Select ABAP as target and choose the destination S4D_100 from the list of available destinations

    11. Insert ZUX410NavStar## as name for the ABAP Repository.

    12. Insert the description UX410 navigation starter ## into the description field.

    13. insert ZTRAIN_## as package and insert the transport request assigned to your user. You can use transaction SE01 at the S4D-system to find the transport assigned to your user.

    14. Choose Finish.

  2. Remove the generated routing pattern :?query: to replace it with an empty string.

    1. Open the file manifest.json.

    2. Scroll down to the routes configuration.

    3. Remove the string literal :?query: to replace it with an empty string.

  3. Implement the basic startnavigation project by adding a new sap.ui.layout.VerticalLayout control to the page control of the Main.view.xml and add a sap.m.Link and a sap.m.Button control to UI controls to the VerticalLayout control. Add the following attributes to the newly added controls.

    Properties of sap.m.Link control

    AttributeValue
    ididNavLink
    textNavigate to Fiori-app with link

    Properties of sap.m.Button control

    AttributeValue
    pressonPress
    textNavigate to Fiori-app using event handler
    1. Open the file Main.view.xml.

    2. Add an XML-namespace alias with the value layout and assign the value sap.ui.layout.

    3. Add an sap.ui.layout.VerticalLayout to the content aggregation of the generated sap.m.Page control.

    4. Add a control of type sap.m.Link to the VerticalLayout control and assign the attributes listed in the first table.

    5. Add a control of type sap.m.Button and assign the button attributes listed in the second table.

    6. Your view implementation should now look like the following figure:

      Code Snippet
      123456789101112131415161718
      < mvc:View controllerName="student##.sap.training.startnavigation.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 id="_IDGenVerticalLayout1"> <Link id="idNavLink" text="Navigate to Fiori-app with link"/> <Button id="_IDGenButton1" press="onPress" text="Navigate to Fiori-app using event handler"/> </layout:VerticalLayout> </content> </Page> </mvc:View>
  4. Build and deploy the startnavigation project to the connected SAP system S4D_100 using the npm run deploy command.

    1. Select the project and from the context menu choose Open in Terminal.

    2. Insert in the console the command npm run deploy.

    3. Confirm to start the deployment.

  5. Close all tabs in Business Application Studio.

Task 2: Create a SAPUI5 project for the second application

Steps

  1. Create a new project with a deployment configuration using the SAP Fiori application – project generator.

    Project properties

    PropertyValue
    Project typeSAP Fiori application
    Template TypeSAP Fiori
    TemplateBasic
    Data sourceNone
    ViewMain
    Module nameendnavigation
    Application namespacestudent##.sap.training

    Deployment configuration

    PropertyValue
    TargetABAP
    DestinationS4D_100
    NameZUX410NavEnd##
    PackageZTRAIN_##
    Transport RequestTransport assigned to your user, see transaction SE01
    DescriptionUX410 navigation end ##

    .env content

    PropertyValue
    UI5_USERNAMETRAIN-##
    UI5_PASSWORDPassword of SAP user TRAIN-##
    1. If not still open, start the SAP Business Application Studio.

    2. Choose the link Start from template in the Welcome Page of the SAP Business Application Studio or go to the menu entry File → New Project from Template .

    3. Choose SAP Fiori application from the list of available templates and press Start.

    4. Choose SAP Fiori as Template Type.

    5. Select the Basic template and choose Next.

    6. Select None from the Data source list and choose Next.

    7. Insert Main as view name and choose Next.

    8. Insert endnavigation as module name and student##.sap.training as namespace.

    9. Select Yes at the Add deployment configuration and choose Next.

    10. Select ABAP as target and choose the destination S4D_100 from the list of available destinations.

    11. Insert ZUX410NavEnd## as name .

    12. Insert the description UX410 navigation end ## into the description field.

    13. Insert ZTRAIN_## as package and insert the transport request assigned to your user. You can use transaction SE01 at the S4D-system to find the transport assigned to your user.

    14. Choose Finish.

  2. Remove the generated routing pattern :?query: to replace it with an empty string.

    1. Open the file manifest.json.

    2. Scroll down to the routes configuration.

    3. Remove the string literal :?query: to replace it with an empty string.

  3. Implement the basic endnavigation project by adding a new sap.ui.layout.VerticalLayoutcontrol to the page control of Main.view.xml and insert the following UI controls to the VerticalLayout.

    sap.m.Label Control Properties

    AttributeValue
    ididinfo
    textHello world
    1. Open the file Main.view.xml.

    2. Add an XML-namespace alias with the value layout and assign the value sap.ui.layout.

    3. Add a control of type sap.ui.layout.VerticalLayout to the content aggregation of the generated sap.m.Page control.

    4. Add a control sap.m.Label to the VerticalLayout control and assign the attributes listed in the table. Your implementation should now look like the following figure:

      Code Snippet
      123456789101112
      <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>
  4. Build and deploy the endnavigation project to the connected SAP system S4D_100 using the npm run deploy command.

    1. Select the project and from the Context menu, choose Open in Terminal.

    2. Insert in the console the command npm run deploy.

    3. Confirm to start the deployment.

    4. IIf you are asked to insert your credentials insert user TRAIN-## and your password

Task 3: Configure Two Tiles in the SAP Fiori Launchpad

Steps

  1. Create two semantic objects on the front-end server using the following details.

    Semantic Object Configuration

    Semantic ObjectSemantic Object NameSemantic Object Description
    UX410NavStart##UX410NavStart##Semantic Object for start app##
    UX410NavEnd##UX410NavEnd##Semantic Object for end app##
    1. Start SAP GUI and log in to SAP system using your user TRAIN-## login details.

    2. From the user menu of the SAP Fiori → Configuration, choose Define Semantic Object – Customer or use the transaction code /UI2/SEMOBJ.

      Add the prefix /n if you start the transaction using the transaction code.
    3. Select Edit to switch to edit mode.

    4. Confirm the cross-client message.

      If a message informs you that the table is currently locked by another user, this means that another course participant is currently running the transaction for their exercise. Confirm the message, wait until the other participant has finished, and then try again.
    5. Choose New Entries on the toolbar.

    6. Add the semantic object configuration with the data from the Table: Semantic Object, Name and Description.

    7. Save your changes and assign them to your transport request.

    8. Confirm the transport assignment dialog and close the transaction.

      It is important to close the transaction as soon as you have finished your configuration. If you do not leave, you will lock the table.
  2. Create a Catalog on the front-end server with the SAP Fiori launchpad designer using the attributes from the table: Catalog ID.

    Catalog Configuration

    PropertyValue
    TitleUX410_BC_##
    IDZUX410_BC_##
    1. Open Chrome navigator.

    2. In the favorites bar, choose 10 Development → s4dhost → 10 S4D SAP Fiori Launchpad

    3. Enter your credentials and login. You can save your password for future logins.

    4. If the Quick Tour Popup opens, close it.

    5. Navigate to SAP Fiori Launchpad space and start the Content Manager app.

      Note

      It may take some time to open.
      System screenshot
    6. Choose Create after the app starts.

    7. Insert the values from the Catalog configuration table and choose Continue.

    8. Choose an assigned transport request and confirm the dialog.

  3. Create a tile mapping for application ZUX410NavStar## using the configuration properties shown in the following table.

    Target mapping configuration for Start-navigation App

    PropertyValue
    Semantic ObjectUX410NavStart##
    Actiondisplay
    Application TypeSAPUI5 Fiori App
    TitleUX410 start navigation
    URL/sap/bc/ui5_ui5/sap/zux410navstar##
    IDstudent##.sap.training.startnavigation
    1. Search for your newly created catalog in the FLP Content Manager app.

    2. Choose Open in Designer.

    3. Select the Target Mapping icon inside the new catalog.

    4. Select Create Target Mapping.

    5. Insert the properties from the table into the form.

    6. Choose Save.

  4. Create a new tile mapping for application ZUX410NavEnd## using the configuration properties shown in the following table:

    Target mapping configuration for End-navigation App

    PropertyValue
    Semantic ObjectUX410NavEnd##
    Actiondisplay
    Application TypeSAPUI5 Fiori App
    TitleUX410 end navigation
    URL/sap/bc/ui5_ui5/sap/zux410navend##
    IDstudent##.sap.training.endnavigation
    1. Select Create Target Mapping.

    2. Insert the properties from the table into the form.

    3. Choose Save.

  5. Create two static tiles in your catalog with the following attributes:

    Title Configuration for Start

    AttributeValue
    TitleNavigation start
    SubtitleGroup ##
    Semantic Object:UX410NavStart##
    Actiondisplay

    Title Navigation for End

    AttributeValue
    TitleNavigation end
    SubtitleGroup ##
    Semantic Object:UX410NavEnd##
    Actiondisplay
    1. Choose the first Tiles icon and select the tile with the plus sign.

    2. Choose App Launcher – Static.

    3. Enter the values as provided in the table.

    4. Save your changes.

    5. Repeat to create a tile for the second target.

    6. Close the SAP Fiori Launchpad Designer tab and Exit the Content Manager app.

  6. Create a new Launchpad Space including a new Launchpad Page with the following properties

    Properties of Space/Page configuration

    PropertyValue
    Space IDZSPACE_##
    Space DescriptionSpace of group ##
    Space TitleNavigation exercise ##
    Page IDZPAGE_##
    Page DescriptionPage of group ##
    Page TitleNavigation exercise ##
    TransportUse the transport assigned to your user
    1. Start the Manage Launchpad Spaces App from the SAP Fiori Launchpad.

    2. Click the Create Button in the toolbar of the Spaces table

    3. Select the Also create a page option

    4. Insert the values of the above table

    5. Click Create.

  7. Assign the SAP Fiori catalog UX410_BC_## to the page ZPAGE_## and use Navigation exercise ## as Section Title and add the tiles from the catalog to the page.

    1. Click on the newly created page and select Edit.

    2. Insert the value Navigation exercise ## in the Section Title input field.

    3. Select the three dots on the right side of the page toolbar and click on the button labeled Catalogs.

    4. Search in the upcoming dialog for catalog UX410_BC_##.

    5. Select the catalog and press Select.

    6. Press on each tile the button labeled Add to add the tile to the page

      System screenshot
    7. Press Save.

  8. Set the page visibility to Visible

    1. Go back to the Space configuration of your newly created space ZSPACE_##.

      System screenshot
    2. Press the Edit button to enter the edit mode

      System screenshot
    3. Mark the page as selected by choosing the radio button

      System screenshot
    4. Press the Set Visible button.

    5. Press Save.

    6. Go back to the SAP Fiori Launchpad Home page.

  9. Create a new single role with the name Z_BR_UX410_## and add the space ZSPACE_## to the role. Assign your user TRAIN-## to the role Z_BR_UX410_##.

    1. Open the SAP GUI and logon to the S4D-system

    2. Start transaction PFCG.

    3. Insert the value Z_BR_UX410_## in the input field and press Single Role.

    4. Click Menu and confirm that you want to save your changes.

    5. Choose from the Transaction DropDown Field SAP Fiori Launchpad → Launchpad Catalog.

    6. Search for your catalog ZUX410_BC_##, select the catalog and confirm the dialog.

    7. Choose from the Launchpad Catalog DropDown Field SAP Fiori Launchpad → Launchpad Space.

    8. Insert in the upcoming dialog the space id ZSPACE_## or use the F4-value help to search for it and press Continue.

    9. Select the User tab and assign your TRAIN-## user to the role

    10. Press Save.

  10. Test your configuration.

    1. Open SAP Fiori Launchpad or Refresh the browser page if it's already opened.

    2. Select the Navigation exercise ## space.

    3. Click on the tiles and verify that the applications are shown

  11. Close the SAP Fiori Launchpad.

Task 4: Use the CrossApplicationNavigation Service

Implement the link and button controls to navigate from the Navigation start application to the Navigation end application.

Steps

  1. Implement the onInit function so it checks that the application is running the SAP Fiori Launchpad. Obtain a reference to the CrossApplicationNavigation service ShellContainer and store the reference in a member variable. Create the navigation link to the intent UX410NavEnd## - display created in the previous task and assign the navigation link to the href attribute of the sap.m.Link control that was created in the previous task.

    1. Start the SAP Business Application Studio and Open the Dev Space UX410.

    2. Open the Main.controller.js file of the startnavigation project.

    3. If not already created, create an empty implementation of the onInit function.

    4. Implement theonInit function to check whether the application is running the SAP Fiori Launchpad. Obtain a reference to the CrossApplicationNavigation Service and assign the reference to a member variable.

      Code Snippet
      1234567891011121314151617
      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"); }); });
    5. Invoke the function hrefForExternal and pass the value UX410NavEnd## as semanticObject and the value display as action.

    6. Obtain a reference to the sap.m.Link control implemented in the Main.view.xml view and assign the return value to a local variable.

    7. Call the setHref function on the sap.m.Link reference and pass the hash to the function.

    8. Your code should now look like the following :

      Code Snippet
      1234567891011121314151617181920
      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); }
  2. Implement the onPress event handler in the controller Main.controller.js of the Main view of project startnavigation. Use the reference to the CrossApplicationNavigation service that was obtained in the onInit function. Call the toExternal function on the reference and pass the value UX410NavEnd##as semantic object and the value display as action to the function.

    1. If not already open, open the Main.controller.js file in the controller folder of the startnavigation project.

    2. Add an empty implementation for the eventhandler function onPress right after the onInit implementation.

    3. Check that the reference to the CrossApplicationNavigationservice is available. If the reference is available call the toExternal function on the reference and pass the target configuration with attribute shellHash to the function. Assign to shellHash the hash-string stored in the member variable that was obtained in the onInit function.

    4. Save your changes. Your implementation should now look like the following:

      Code Snippet
      12345678910
      onPress : function(oEvent) { if(this._oCrossAppNavigation) { var oHref = this._oCrossAppNavigation.toExternal({ target : { shellHash : this._hash } }) } }
  3. Deploy the startnavigation project to the S4D-system.

    1. Select the startnavigation application and choose from the context menu Open in Terminal.

    2. Enter npm run deploy and follow the instructions.

  4. Log on to the SAP Fiori launchpad to test your implementation. Start your application and try the link and button to test the navigation.

    1. Select the bookmark in Google Chrome to start the SAP Fiori launchpad.

    2. Enter your log on credentials.

    3. Start the startnavigation application.

    4. Choose the link to initiate the navigation.

    5. Navigate back to the startnavigation application using the back button of the SAP Fiori launchpad.

    6. Select the button control to navigate.

Task 5: Passing Parameters to the Navigation Target

Steps

  1. Extend your implementation of the startnavigation application and pass a parameter with the name helloText during the navigation. Assign the string Hello UX410 to the helloText parameter.

    1. If not still open, start the SAP Business Application Studio and open the Dev Space UX410.

    2. Open the Main.controller.js file of the project startnavigation.

    3. Enhance the onInit function of your controller by passing the configuration objectparams to the hrefForExternal function and assign the parameter helloText with value Hello UX410 to the parameter.

      Code Snippet
      1234567891011121314151617181920212223
      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); }
  2. Deploy the updated startnavigation project.

    1. Select the startnavigation project and choose from the context menu theOpen in Terminal option.

    2. Enter npm run deploy and follow the instructions.

Task 6: Extend the endnavigation Application to Fetch a Parameter Passed from Another Application

Extend your endnavigation application so that when the user navigates from the startnavigation application to the endnavigation application, the passed parameter is fetched from the component and shown inside the UI.

Steps

  1. Implement the onInit function of the Main.controller.js file of the endnavigation project. Read the helloText parameter that is passed by the startnavigation application and assign the parameter value to the text attribute of the label that is part of the Main.view.xml implementation.

    1. Open the file Main.controller.js of the endnavigation project.

    2. Implement an empty onInit function inside the controller implementation.

    3. Obtain the component data and assign the component data to a local variable with the name oComponentData.

      Code Snippet
      123456789101112131415161718
      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(); } } }); });
    4. Check if the startupParameters of the component contains the parameter helloText. If the parameter is available obtain the value of the parameter and assign it to local variable.

      Code Snippet
      12345678
      onInit: function () { var oComponentData = this.getOwnerComponent().getComponentData(); if(oComponentData && oComponentData.startupParameters && oComponentData.startupParameters.helloText) { var sHelloText = oComponentData.startupParameters.helloText[0]; } }
    5. Obtain a reference to a UI control of type sap.m.Label with ID idInfo and assign the reference to a local variable. Call the setText function on the object and pass the start-up parameter value to the text attribute of the UI control.

      Code Snippet
      12345678910
      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); } }
  2. Deploy the updated endnavigation project.

    1. Select theendnavigation and choose from the context menu theOpen in Terminal option.

    2. Enter npm run deploy and follow the instructions.

  3. Logon to the SAP Fiori Launchpad to test your implementation. Open the startnavigation app and test the navigation implementation.

    1. Start the SAP Fiori launchpad using the bookmark in Google Chrome.

    2. Enter your details to log in.

    3. Start the startapplication application.

    4. Choose the link to initiate the navigation.

    5. Navigate back to the startapplication application using the back button of the SAP Fiori Launchpad.

    6. Select the button control to navigate.

Log in to track your progress & complete quizzes