Tell us what you think

We want to create the best possible experience for our learners. Your feedback helps us to improve the experience for everyone.

Explaining Navigation Concept and Annotations

Objectives

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

Next lesson