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:

/wp-content/uploads/2014/02/pic_1_386999.png

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.

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


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!

To report this post you need to login first.

21 Comments

You must be Logged on to comment or reply to a post.

  1. John Appleby

    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?

    John

    (0) 
    1. DJ Adams Post author

      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.

      dj    

      (0) 
      1. Gareth Ryan

        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?

        Cheers,

        Gareth.

        * 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 🙂

        (0) 
        1. DJ Adams Post author

          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.

          dj

          (0) 
          1. Gareth Ryan

            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…

            Cheers,

            Gareth.

            (0) 
        2. Mark Teichmann

          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.

          (0) 
    1. DJ Adams Post author

      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.

      dj

      (0) 
      1. Gareth Ryan

        I just downloaded the free CamStudio to try out – after saying no to various browser toolbars and all sorts of other random malware and assorted **** I stopped the install.

        I’m off to find something else that is free but not riddled with such rubbish.

        (0) 
  2. Sandip Agarwalla

    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

    <IconTabFilter

                                        binding=“{/cities/0}”

                                        text=“{name} ({id})”

                                        icon=“sap-icon://group”

                                        design=“Horizontal”>

                                       

                                    </IconTabFilter>

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

    new sap.m.IconTabFilter({

                  bindElement:'{/cities/1}’,

                      icon: “sap-icon://notes”,

                      text: “{name} {id}”,

                      count: “12”,

                      color:sap.ui.core.IconColor.Critical,

                      content: new sap.m.Text({

                        text: “Notes go here …”

                      })

                    }),

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

    Regards

    Sandip

    (0) 
    1. DJ Adams Post author

      Hey Sandip

      Good question!

      Please forgive me for picking this question as a candidate though, but I’m attempting (in tiny ways) to make the UI5 Q&A experience better. As this is such a good question, I don’t want it to get lost in time, and just as part of some comments in a blog post, that might happen.

      I have an answer for you, but can I ask you to ask this question “standalone”, so others can benefit from the question and the answer in future too (and more easily find it)? There’s also the added and agreeable side-effect of spreading the UI5 word beyond the borders of the SAP ecosphere.

      Please ask on Stack Overflow (why the above binding doesn’t work, giving that code example) and tag it with UI5 (or SAPUI5), ping me, and I’ll stick the answer in.

      Deal? 🙂

      UPDATE : Deal done! Nice one Sandip. You asked the question, and the answer is there already. And in a format that is useful not only to you and me but to others too. And a lot more discoverable than it would have been if we’d left it here in these comments 🙂

      Here’s the complete Q&A:

      sap – Bind Element/Association/Aggregation in JS view using JSON notations – Stack Overflow

      dj

      (0) 
  3. Andres Rodriguez Guapacha

    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.

    (0) 
      1. Gareth Ryan

        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!

        (0) 

Leave a Reply