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">
    <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

https://www.youtube.com/watch?v=RJ8Kg14vhdE

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!

Originally published on SAP Community