Fiori for ABAP - Page Map and Flexible Column Layout

Table of contents

• Introduction
• Page Map
• Flexible Column Layout
• Test
• Conclusion

In this article, we'll further customize our app and take a look at the Page Map as another tool in the Business Application Studio.

 

Introduction

In the last article in this series, we covered our Sales App and the extension of the autoload function. We also took a closer look at Guided Development in SAP Fiori. In this article, we will now activate the Flexible Column Layout and first take a detailed look at the Page Map, another essential Fiori tool.

 

Page Map

Just like Guided Development, you can start the Page Map via the "webapp" folder in the application. Simply right-click on the folder and select "Show Page Map" to open a separate window.

 

The Page Map visualizes the actual app, the different pages, and the navigation between them. You can continue to customize things, such as adding a new page or editing details like the elements available on those pages. On the left, you'll find the two current pages we're using: the List Report and the Object Page. On the right, you'll find various properties of our app that we can adjust. Clicking on the Page Map will give you more options, depending on which element you clicked. At the top, you'll find additional functions, such as the settings or the option to clean up annotations. You can also use the search function to narrow down the available options and elements.

 

Let's click the pencil icon in the Page Map of the List Report to edit this page further. This will take us to the next level.

 

Here you'll find the basic structure of the actual List Report. This is divided into various components, such as the header, where further actions are available, the corresponding filter bar, and the actual table where the data is displayed. Here we have opened the Table Toolbar and see a Create Group and below it the two Factory Actions that we created previously.

 

Basically, you have the option here to make further adjustments and, for example, add new buttons to link them to existing or new actions. However, as we already described in the Introduction to Fiori, you should adjust most of the annotations and actions, which already come from the RAP framework, directly in the RAP app, i.e., in the backend. Therefore, we recommend only making settings here that are not directly possible via RAP or the annotations.

 

Flexible Column Layout

Let's now navigate back to our starting level in the Page Map. There we find the relevant settings for our application. If you scroll down a bit, you will find the options Flexible Column Layout and Flex Enabled. The second option lets you determine whether Key User Adaptation is enabled for your application, which is the default setting, or whether you disable it so that key users cannot make personal customizations to your application. In the upper section, next to the heading, you'll find various keywords describing the settings, as well as a link to the official documentation for this feature. In the documentation you can read in detail what each option means, what settings are available, and what further adjustments you can make.

 

Now, if we activate the Flexible Column Layout option, we can adjust the two-column and three-column layouts accordingly. Here, we define how large each element is displayed when the page is initially loaded. Let's leave the default settings for "Begin-Expanded" for now. and "Mid-Expanded".

 

Test

Let's now start the preview of our application and look at its runtime behavior. To do this, we load the entries in the List Report and display all the data records. When we then click on an individual entry, the Flexible Column Layout takes effect and loads the Object Page directly on our application's page. Currently, we get a smaller portion for the Object Page because we have configured the settings so that the list is primarily displayed in the larger area (Begin-Expanded). To display the Object Page larger, we would need to adjust the settings for the Two-Column Layout accordingly. Then the Object Page would be in focus and the List Report would be displayed narrower.

 

If, for example, we don't have enough space available on the screen, so that the Column Layout cannot load properly or there is too little space to display the elements, the Flexible Column Layout is automatically deactivated and we land directly on the Object Page. In this case, we get the behavior we had before activation. Initially, we see the List Report, and as soon as we click on a row, we navigate directly to the Object Page in full-screen mode. This behavior is therefore dynamically dependent on the width and the size of the available space on the screen.

 

Conclusion

The Page Map offers various features that allow us to visually customize our application without having to invest much effort in development. This is also a very practical feature for ABAP developers, as we have to deal less with manual code and can make simple settings directly ourselves.