Latest Update November 2020: THIS POST IS NOW RETIRED – Please go directly to SAP Community topic for Fiori elements

It’s hard to believe that 4 years have passed since I first started blogging on SAP Fiori elements.

Since then it has grown from strength to strength. SAP Fiori elements apps are now the:

• Preferred choice for SAP Fiori apps delivered for SAP S/4HANA
  • As at November 2020 nearly 900 of the more than 2K apps available are SAP Fiori elements app
• Preferred and recommended choice for efficient development of your own custom-built apps
• Preferred build approach for many of our customers… see the SAP TechEd 2020 session: Yorkshire Water uses SAP Fiori Elements to build Fiori apps quickly

The tooling has also changed from SAP Web IDE on SAP Cloud Platform Neo, to the next generation tooling SAP Fiori Tools.  SAP Fiori Tools are an extension of SAP Business Application Studio on SAP Cloud Platform Cloud Foundry that guide you through creating your own SAP Fiori elements apps – and they can be run offline on VSCode too.

So it’s time for this blog post to step gracefully aside and instead refer you to the current best resources for Fiori elements, including:

• SAP Community topic for Fiori elements – get the latest resources, ask questions, and swap experiences with other customers, partners, independents, and SAP employees
• The official documentation on SAP Help Portal: Developing Apps with SAP Fiori elements
  • You can also find this documentation via the SAPUI5 SDK at https://ui5.sap.com > Documentation > Developing Apps with SAP Fiori elements
• The video playlist on Youtube: Getting started with SAP Fiori elements playlist
• The Tutorials for SAP Fiori Tools on https://developers.sap.com

One last big hint: One of the most beneficial additions to the official documentation is the SAP Fiori elements feature map which explains what is available per floorplan for your SAPUI5 version – definitely worth a read!

But hey all knowledge has value so if you want to read how this used to work in the SAP Web IDE… read on!

*****

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 1^st column (master list) wider
• TwoColumnsMidExpanded – make the 2^nd column (detail) wider

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

• ThreeColumnsBeginExpanded – make the 1^st column wider
• TheeColumnsMidExpanded ­– make the 2^nd column wider
• ThreeColumnsEndExpanded – make the 3^rd 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.