Skip to Content

Small addition: By the way, if you are on SAP S/4HANA from 1709 or above you can do this in your own apps, since 1709 is deployed on 1.48 and 1709 FPS1 on 1.52. Enjoy folks! 

Wanting to make things easier for your expert business users and power users? Especially those who work on large desktops and multi-screen displays? Did you know you can turn your Fiori elements List Report or Worklist into a Fiori 2.0 style master-master-detail list?  And it’s almost ridiculously simple to achieve!  In this blog you will learn what you need to do. 

The users who use your app the most frequently are often your most demanding end users, and they have a right to be. Every extra click, every extra forward/back navigation is costing them effort and time.  Effort that adds to aches in fingers, wrists, shoulders and backs as they race to meet productivity targets.  Time that keeps them away from their family and friends.  Anything that gives them an advantage is a boon.

You can include your most experienced frontline business users in this group.  In your organization they might be known as Key Users, Power Users, Champion Users, or process experts.  After all they not only use your app themselves, they are often explaining your app to other less experienced users and newbies in your organization.  It’s often worth putting a little extra effort into keeping these people happy.  You want them to become trusted evangelists for the benefits and ease of use of your new app.

Many of these users are also “chained” to a desktop – maybe even with an extra large screen or multiple screens so they can do their work as efficiently as possible.

You might also add shared services teams, internal call centres, and support teams into this group.

For these types of users, Flexible Column Layout is an easy way to power up a simple mobile style app for maximum efficiency on a large screen.

Source: SAP Fiori Design Guidelines – Flexible Column Layout

Pre-requisites: SAPUI5 1.48 

Adding Flexible Column Layout is arguably one of the easiest of all enhancements you can make to your Fiori elements List Report, Worklist, Analytical List Page, or Object Page. All it takes is a simple adjustment to your App Descriptor (i.e. your app’s manifest.json file).

IMPORTANT: Flexible Column Layout is not relevant to Overview Pages, which use a cockpit style for efficiency instead.

In this blog you will see an end to end example of what you need to do, and how that will change your Fiori elements app. You will see:

  • The starting point – the original Fiori elements app
  • What you need to change – in the manifest.json file
  • How that changes your app behaviour

First Create Your Fiori Elements App

So in the images in this blog you can see a transactional List Report app coded using the ABAP Programming Model for Fiori.  This is a demonstration app that shows a list of simplified sales orders, and lets you create, update, delete, and take other actions on the Sales Order header and it’s related items.

TIP: This particular app doesn’t include Draft handling, but we could always add this later as per the ABAP Programming Model for SAP Fiori section Developing New Transactional Apps with Draft Handling.

You don’t need an app that is this complete, or even an app that has 3 levels (e.g. List, Header, Items) to use Flexible Column Layout.  You just need at least 2 levels within your app – so any List Report, Worklist, or Analytical List Page, + an Object Page is enough.

In fact it doesn’t really matter which Fiori element app you are using – so long as it’s not an Overview Page as explained above.

You can see the first screen of the demo app is the List of Sales Orders, and it appears like this:

Expand a row and you move to the Sales Order Header detail screen. So now you can’t see the list anymore.

TIP: Saved rows are automatically opened in Display mode. Draft rows are automatically opened in Edit mode.

Expand one of the Sales Order Items and you can see the Sales Order Item detail screen. But of course you can’t see the Sales Order Header anymore.

For this sort of scenario, for a power user on a large desktop, it can be helpful to be able to see all of these screens at once, so that they can refer to the list and the sales order header when maintaining the sales order item. Flexible Column Layout mode will let you achieve that.

Now change the App Descriptor

You can put this app into Flexible Column Layout mode by adding a few lines to the App Descriptor, i.e. your app’s manifest.json file.

Open your manifest.json file and look for the sap.ui.generic.app section.  As you know from Fiori elements – How to Develop a List Report – Basic Approach this is the critical part of the App Descriptor that marks your app as a Fiori element app.

Then add the lines..

“sap.ui.generic.app”: {

“_version”: “1.3.0”,

        “settings”: {

            “flexibleColumnLayout”: {

                “defaultTwoColumnLayoutType”: “TwoColumnsMidExpanded”,

                “defaultThreeColumnLayoutType”: “ThreeColumnsEndExpanded”

            }

        },

“pages”: […

It should look something like this:

Now of course you can set the defaults defaultTwoColumnLayoutType and defaultThreeColumnLayoutType to other values. These are what they mean.

Options for 2 column layout – for Master/Detail

  • TwoColumnsBeginExpanded – make the 1st column (master list) wider
  • TwoColumnsMidExpanded – make the 2nd column (detail) wider

Options for 3 column layout – for Master/Master/Detail

  • ThreeColumnsBeginExpanded – make the 1st column wider
  • TheeColumnsMidExpanded ­– make the 2nd column wider
  • ThreeColumnsEndExpanded – make the 3rd column wider

TIP: If your app only has 2 levels, then the 3 column layout option will be ignored.

Now restart your app to see the final result.

Your App in Flexible Column Layout mode 

When you first enter the app, it might seem like there has been no change. However as soon as you select a row, you will see the difference straight away!

When you expand one of the Sales Order rows you will see both the Sales Order Header and the List of Sales Orders at the same time!

Expand one of the Sales Order Items and now you will see the List of Sales Orders, the Sales Order Header, and the selected Sales Order Item all at the same time!

Even better you can adjust the display to suit what you need to see.

If you are using a keyboard, you can use the > or < icon buttons to change how much space is allocated to each view. You find these icon buttons sited on the borders between the views.

Or if you are using a touchscreen you can just drag your fingers to the right or left to expand or collapse the views.

TIP: You might see left/right icons appear at the left and right edges of the screen depending on your device OS and web browser. This example is from an MacBook Pro.

You can also use the flexible column layout toolbar to:

  • Expand the rightmost view to full screen
  • Close the righmost view
  • Or as usual, you can use the Share icon to send your view as an email or save your preferred settings as a new tile on your Home Page.

The flexible column layout toolbar appears in the rightmost view alongside any global actions:

Of course you don’t need to explicitly close the rightmost view every time. Just expand a different row in the main list and the app automatically adjusts to 2 column mode for the new Sales Order.

Or reduce your screen size to tablet or phone size and the app will automatically adapt to make the most of the available space.

You can find out more about the Flexible Column Layout in Enabling the Flexible Column Layout.

Screenshots shown on:

  • S/4HANA 1709 CAL Trial Instance
  • SAPUI5 1.52.7
  • SAP Cloud Platform Full Stack Web IDE version 180301

Becoming a Fiori elements guru

You will find much more on SAP Fiori elements in our Fiori elements wiki

Brought to you by the S/4HANA RIG. 

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Mike Doyle

    Thanks for sharing Jocelyn Dart.  This looks really, really cool.  I assume that if you run this on a phone or a tablet in portrait orientation it just shows one screen at a time?  It’s so hard to build an app that thrives on both a phone and an widescreen monitor.  These frameworks make that much easier.  You did say that the Fiori Elements team are really bright folks!

    One question is why we control this in the manifest rather than the metadata?  I guess because it is a technical setting rather than something that describes the data itself.  Seems to be a bit of an overlap there, though.

     

    (1) 
    1. Jocelyn Dart
      Post author

      Hi Mike,

      Glad you like them! I agree it’s really cool stuff!

      On a phone typically only one screen is displayed at a time.  On tablet it’s either 1 or 2 screens depending on the scenario. You can find a more detailed description of all the behaviours on different screen sizes in the Fiori Design Guidelines at https://experience.sap.com/fiori-design-web/flexible-column-layout/

      Generally speaking with Fiori elements the templates used and the navigation between screens of the template is always controlled in the manifest.   Since Flexible Column Layout essentially adjust the navigation between templates it makes sense that this would also be in the manifest.

      Cheers

      Jocelyn

      (0) 
  2. Christopher Solomon

    That is VERY cool!!!…..and nicely, explained!……so you say that folks with very large screens don’t really like to see a of wasted space/borders eh? *cough* I am looking at you SCN! *cough* haha

    Seems a lot more is being included in the good ol’ manifest these days…..if only there were some kinda tooling to make this much easier to maintain, know what entries are even possible and their effect, and more….hmmmmmm……if only. haha

    Keep up the always GREAT work and thanks as always for sharing!

    (1) 
    1. Jocelyn Dart
      Post author

      Hey Chris – thanks for the encouragement.  I must admit I do resort to the SAP Cloud Platform Web IDE manifest descriptor editor on occasion – just to remind myself what the options are and to get some of that pesky syntax cut correctly.  😉

      (1) 

Leave a Reply