Explaining Navigation Concept and Annotations

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Describe the configuration of internal navigation in manifest.json
  • Describe options of external navigation

Navigation Concept and Annotations

Internal navigation is the navigation within a Fiori Elements app. Internal navigation is configured in manifest.json.

There are three types of internal navigation:

  • From List Report to Object Page
  • Within List Report Only
  • From Object Page to Subpage

Let's go through each in detail.

Flexible Layout Configuration

The flexible column layout allows different layouts on the same page. It allows up to three columns so that users can expand and collapse the screen areas, depending on their requirements.

The figure shows the entry in manifest.json to enable the flexible column layout in an app. 

You can also define a default layout for the page when the page is opened. For example, you can use the MidColumnFullScreen property value to open a page in full-screen mode. 

The figure shows a two-column layout with defaultTwoColumnLayoutType set to TwoColumnsMidExpanded.

Options of External Navigation

In the SAP Fiori elements app, you can navigate to other addresses by using external navigation.

This function works both on the list report and the object page.

When creating external navigation, you can choose from two alternatives:

  • Using a URL: Navigates to any URL
  • Using Semantic Object navigation

For the semantic object navigation, you can choose between:

  • Display as a link
  • Use a button on the toolbar
Note
For detailed information of semantic object and intent based navigation, please refer to UX100.

External Navigation Using URL

To create a external navigation using a URL, you need to do the following:

  • Create a field representing URL.
  • For the field, add a link, set the type to #WITH_URL, and point to the URL field using the url property.

External Navigation Using Semantic Object

For navigation to semantic objects, you need to do the following:

  • Add @consumption.semanticObject before the field.
  • Set UI.lineItem.type to #WITH_INTENT_BASED_NAVIGATION (as a link) or #FOR_INTENT_BASED_NAVIGATION (as a button).
  • Set @UI.lineItem.semanticObjectAction.

The generated URL contains the semantic object and action. All values in the entity pass as parameters.

Here is an example: https://.........#Product-display?CompanyName=SAP&CompanyName2=SAP& Currency=EUR&NetAmount=21737.00&SalesOrder=500000000&TaxAmount=4130.03

Navigate to an External URL

Business Example

In this exercise, you will add a link to the customer name field. After selecting the link, you will navigate to Google with the customer name as the keyword. To save some time, you will start from a template SAP Fiori elements application. Replace all instances of ## with the group number your trainer assigned to you.

Task 1: Create and Activate a CDS View with the Source Code From a Template File

Steps

  1. Log in to the S4D SAP system using ABAP Development Tools for Eclipse (ADT).

    1. Perform this step as shown in a previous exercise.

  2. Create a blank CDS view using the following information:

    CDS View Information

    FieldValue
    NameZCDS_UX403_LINK_##
    DescriptionUX403 navigate to external link
    1. Perform this step as shown in a previous exercise.

  3. Copy the source code of the text file "N:\UX403\Templates\UX403_Exercise12_Template.txt" into the code editor of the CDS view and replace all instances of ## in the source code.

    1. Perform this step as shown in a previous exercise.

Task 2: Expose your CDS View as an OData Service

Steps

  1. Add an @OData.publish: true annotation to your CDS view ZCDS_UX403_LINK_## and activate it.

    1. Perform this step as shown in a previous exercise.

  2. Publish your new OData service on the S4D SAP system. Use the /N/IWFND/MAINT_SERVICE transaction.

    1. Perform this step as shown in a previous exercise.

Task 3: Create an SAP Fiori Elements Application from the OData Service Generated by the CDS View

Steps

  1. Log in to your SAP BTP trial account and open the SAP Business Application Studio.

    1. Perform this step as shown in a previous exercise.

  2. Create an SAP Fiori elements project using the following information:

    SAP Fiori Elements Project Information

    FieldValue
    TemplateList Report Object Page
    SAP SystemS4D_100
    OData serviceZCDS_UX403_LINK_##_CDS
    Main entityZCDS_UX403_LINK_##
    Module nameexternallink.student##
    Application titleUX403 navigate to external link
    DescriptionUX403 navigate to external link.
    1. Perform this step as shown in a previous exercise.

  3. Test the application. Choose Go to display the Sales Orders.

Task 4: Modify your CDS View and Add Annotations to Create Link on CustomerName Field

Steps

  1. Create a new field named SearchURL, the content of this field should be a string like 'https://www.google.com/search?q=<value of CustomerName field>'. Use the CDS function concat to connect static parts and variable parts to one result string.

    1. Add the following line of code to your CDS View: concat('https://www.google.com/search?q=', _Customer.CompanyName) as SearchURL

    2. Your implementation should look like the following figure:

  2. Change the type of the CustomerName field so that it has a link. Then, reference the URL address to the SearchURL field.

    1. To change the type of the CustomerName field so that it has a link, add the @UI.lineItem.type: #WITH_URL annotation for the CustomerName field.

    2. To reference the URL address to the SearchURL field, add the @UI.lineItem.url: 'SearchURL' annotation for the CustomerName field.

    3. Your implementation should look like the following figure:

  3. Hide the SearchURL field, because you do not want it to appear in the UI. Then reactivate the CDS View.

    1. To hide the SearchURL field, add the @UI.hidden: true annotation for the SearchURL field.

    2. Your implementation should look like the following figure:

    3. Save your changes and reactivate the CDS View.

Task 5: Run and Test your Application

Steps

  1. Test your application. Choose Go to display the Sales Orders. Select the link on any line of the Company column.

    1. Choose Go to display the Sales Orders in the table.

    2. Select the link on any line of the Company column, navigate to the Google home page and the search result of the company displays in your browser.

      The figure, Search Example: German home page, shows the Google German home page.

  2. Close all windows opened during this exercise.

Log in to track your progress & complete quizzes