During the chess break: Background Information about the Frontend Part of the Developer Keynote

[mariusobert]

Being a part of the Developer Keynote was definitely my professional highlight this year. Having the chance to pretend to be an actor on a professional set was just amazing. I’m not going to lie, the preparations were pretty hard (kudos to rich.heilman for doing the bulk of the work), but it was definitely worth every grey hair that I got from the meetings. Because there was so much content in this keynote, I thought it’s worth writing a blog post about the frontend development demo to highlight the outstanding achievements the Fiori tool team delivered this year.

You probably already know that the SAP Cloud Application Programming Model helps you build powerful OData services that can extend existing SAP services. But, as I said during the Developer Keynote, even the best API is nothing without an easy-to-use UI. It's also widely known that enterprise applications often need to be implemented in little time and should follow established UX best practices that business users already know from other apps.

This is why my demo showed you how to build delightful user interfaces with the help of the new flexible programming model for SAP Fiori elements apps. Check out the source code behind my demo or watch the replay to see me coding it.



To avoid some repetitive work, I built on top of thomas.jung. With all the proper annotations in place, I used the SAP Fiori tools application generator to integrate an SAP Fiori element List Report application into the existing CAP project.

Application generator of the SAP Fiori tools used to extend the CAP project to a full stack project

The SAP Fiori elements app as it is was generated - with the default configuration

 

Here, you can see a standard list report app that displays a few columns of the service that Tom created.

The first customization I did was a property change of the list report’s table. I changed the default behavior to initially load all records once the list report is open. This saves the user from an unnecessary click to hit the “go” button. You can change this property and many others in the SAP Fiori Tools Page Map. 

Using the page map to change the properties of the list report table

The page map is an essential component of the SAP Fiori tools. You can see all pages of the application and change their properties, and you can do much more. The next section of the demo, for example, showed how to add new sections to object pages. To use it, you just need to open the object page in the Page Map, click on the details section, hit the plus to add a new fragment, and there you go: The IDE plugins will create a JavaScript and a fragment file that you can then adapt to your needs. I was a bit lazy in the demo and just added a custom event handler for the button by default. Obviously, you could add any freestyle SAPUI5 code in here.

Object page with a custom section

Last but not least, I made the report a little bit more colorful, and I added the “Nationality” field to the service and added a new column for this field. But it would have been boring to display each Nationality’s name, which is why I preferred a custom formatter to display the respective country’s flag here. For this, I just added a new fragment that links to a formatter file and then referenced the fragment in the manifest.

"controlConfiguration": {

    "@com.sap.vocabularies.UI.v1.LineItem": {

        "columns": {

            "CustomColumnNationality": {

                "header": "{i18n>Nationality}",

                "horizontalAlign": "Center",

                "position": {

                    "placement": "After",

                    "anchor": "DataField::lastName"

                },

                "template": "personallr.ext.fragment.CustomColumnNationality",

                "availability": "Default",

                "properties": [

                    "nationality"

                ]

            }

        }

    }

}

List report with a custom column that contains a formatted field

 

And with just these few additions to the standard floorplan, I built a web application with an excellent (business) user experience with little to no effort – and it just took me was less than 4 minutes✌️. Obviously, deploying this enterprise-ready application to the SAP Business Technology Platform would have been an easy endeavor as well. This concluded my demo and I left able to leave the demo room to meet Katharina in the kitchen. Wait, this actually reminds me that thomas.jung and I never finished that game. We should continue where we left off 🙂.

PS: If you are looking for further inspiration about all the options you got to extend the Fiori Elements floorplans, visit the SAP Fiori elements Flexible Programming Model Explorer. This bookmarkable web app contains live samples that you can modify!

Merry Christmas and a Happy New Year,

Marius