Skip to Content

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 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">
        ${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.

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



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

Share and enjoy!

You must be Logged on to comment or reply to a post.
  • Hey DJ,

    This is fascinating stuff especially for producing mock-ups to give people an idea of what something might look like.

    What I really want to do is to learn how to make this stuff and attach it to e.g. River models rather than JSON views. I'd be fascinated to see what could be achieved in a Jam.

    Up for it?


    • Hey John, thanks for the comment.

      Up for it? Sure! I think this sort of rapid mockup of real, actual control structures, plus River, is a powerful combination. Clearly the difference is that for River, being OData, will require us to think in terms of a "server model" (as opposed to a "client model" like the JSONModel) but the techniques and approaches are very similar.


      • Hi John & DJ,

        I've been helping out in some spare time an independant guy at one of my current customers, with a similar kind of PoC/mock-up approach around UI5.  I've found that using mock JSON as in DJ's example above or in separate mock.json files is all well and good for the "developer's perspective" but really getting the business to engage with the solution needed some "real" data*.  I guess this is where River can come in...

        For us, the answer was to knock up some simple ICF REST type services in one of the customer's backend systems (using knowledge I learnt from DJ many years ago, ironically!) so that we could show real, valid data and the interaction of UI5 with a proper backend system.

        However, this wasn't a lightweight approach, as it needed some ABAP resource to create data access methods, ICF services and all of the associated objects.  I've not played with River but can't help thinking it would be a much quicker/leaner workflow to achieve similar results?



        * I've always found it interesting how a mock-up solution can be as polished as you like but if it doesn't interact with a proper backend system and real data, it often doesn't count in the eyes of business users 🙂

        • Hi Gareth

          Thanks for the thoughtful comments. First, as you know (or could probably tell), the focus of what I did here was on the UI, rather than on the backend (and a focus on not letting my coffee go cold, or another call to interrupt the video! ;-).

          Then we come to the business buy-in. I actually strongly agree with you that the best type of mockup is that which uses backend data. However there will be many people who say that this is irrelevant - as all they want to see it "what will it look like?". There are different levels of engagement and different levels (and interests) of business users, so no single approach is best for all.

          I agree that the venerable and flexible ICF is great for mocking up data services, or even, with SEGW, Gateway can be pretty fast (depending on your OData requirements) ... but yes, absolutely, this is where River shines, although we have to remember that River is only valid for HANA right now and not for ABAP backends ... worth saying as we're talking about an implicit ABAP backend right now, with the ICF.


          • Actually, what really shone through was just how quickly you can get a good-looking app up and running (barring phone-calls and coffee sips!)  For me, it means you could actually do this mock-up in a customer PoC workshop, rather than worrying about preparing content in advance.  That's a powerful message!

            With respect to the backend data - the very open nature of UI5 means that I actually care less about where/how the data can be accessed these days.  It makes the promises of the great SOA revolution look pretty comical now...



        • Quickly building mockups with real data behind it is a nice (maybe the only) usecase for AppBuilder.

          Although it has some caveeats at the moment (no real JS editor included, uses proprietary elements like Superlist etc.) you can build running apps in minutes consuming OData, CSV or other formats.

    • Hey Martin

      Good Q on the recording software - I far from an expert or widely experienced but what I'm using is Camtasia Studio (I have a licence via my company). It's great. I don't have any experience of other software except CamStudo (the free version) which is, ironically and oddly, awful.


  • Hi DJ

    Thanks for this great insight. Loved the code snippet.

    Have a quick question , I saw the tab filters have a binding to the element



                                        text="{name} ({id})"





    How can we acheive the same in JS views but using JSON notations..I tried this

    new sap.m.IconTabFilter({


                      icon: "sap-icon://notes",

                      text: "{name} {id}",

                      count: "12",


                      content: new sap.m.Text({

                        text: "Notes go here ..."



    I tried with with keys - association/aBindings but no luck



  • Hi. Newbie question here. I am starting with UI5 but I am also kind of new to web development in general. I was wondering how is it possible that you edit the file outside eclipse / hana studio and have the page automatically reloaded every time you save the file?

    I have been looking around and found about yeoman and grunt but haven't still figured out how to connect everything to tomcat... even less how to reload the page every time.

      • Interestingly, I find the way my local Eclipse/Tomcat environment works with auto reload is somewhat distracting.  Each time I save a file in my UI5 project, Tomcat automatically re-synchs the app so all I have to do is refresh the browser.

        The problem is that the file I am currently editing then loses focus, as a Tomcat view takes control and I just can't get used to it happening - a few times I've amost deleted the bl00dy server from Eclipse because I'm hitting the keyboard too quickly!