Mocking up the Payroll Control Center Fiori App

| 2 min read

Following on from a great debate about Fiori and Freeori that stemmed from a post by John Appleby there were some comments about HCM app renewals. Latterly John Moy pointed out a post Improve payroll data validation with SAP Payroll control center add-on where some very Fiori-like UIs were being shown.

Coffee Time

I thought it would be a nice little coffee-time exercise to try and reproduce one of the Fiori app pages shown in the screenshots in that post:

So I did, and as I did it I recorded it to share. I thought I'd write a few notes here on what was covered, and there's a link to the video and the code at the end.

Developer tools

  • I'm using the excellent editor Sublime Text.
  • With that editor I'm using the SublimeUI5 package which gives me UI5 flavoured snippets and templates.
  • Specifically I started out with the indexmspmvc snippet (Index Mobile Single-Page MVC) which gives me everything I need to build MVC-based examples with XML views, controllers, and more … all in a single page, a single file. Not recommended for productive use, but extremely useful for testing and demos.

In-line XML views

The XML views in this single-page MVC are defined in a special script tag

<script id="view1" type="sapui5/xmlview">
${6:<!-- Add your XML-based controls here -->}

and then picked up in the view instantiation with like this:

var oView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()

Controls Used

This is a Fiori UI, so the controls used are from the sap.m library.

  • I'm using a Page within an App.
  • That Page's content is a single control, an IconTabBar.
  • There are three IconTabFilters in the IconTabBar's items aggregation, each with the Horizontal design.
  • I've put the StandardTile controls inside a FlexBox (using Basic Alignment); the FlexBox's items aggregation is bound to the "items" collection in my JSON data model.
  • For the info and infoState properties of the StandardTile I'm using a couple of custom formatters.


Video thumbnail


I have of course made the code available, in the sapui5bin repo on Github:

Share and enjoy!

Originally published on SAP Community