Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
qmacro
Developer Advocate
Developer Advocate

Following on from a great debate about Fiori and Freeori that stemmed from a post by applebyj 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


  • 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.

  • That Page's content is a single control, an IconTabBar.


  • 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!

21 Comments
Labels in this area