Mocking up the Payroll Control Center Fiori App

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 Moypointed 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">    <mvc:View        controllerName="local.controller"        xmlns:mvc="sap.ui.core.mvc"        xmlns="sap.m">        ${6:<!-- Add your XML-based controls here -->}    </mvc:View></script>

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

Code

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

https://github.com/qmacro/sapui5bin/blob/master/SinglePageExamples/PayrollControlCenterMockup.html

Share and enjoy!