Skip to Content
Author's profile photo Matt Harding

FaceSearch – Let’s Build a HANA/Gateway/UI5 App

Back in February, I finished up the Matt Harding’s Fiori Like Challenge with a laundry list of items I wanted to get to in the future. Well I had a few days a couple of months or so ago and while I wait for my next break in deliverables, I better publish where I’m up to, hence the future is now (or last month…).

Scope of Work and Blog

I could spend days producing a final product and then blogging about the experience; but that has a few issues in my mind:

  • I could get too busy to finish (has already happened);
  • I may forget key aspects of the solution if wait to the end to document the solution (would have happened but luckily have my mind backed up in this blog);
  • The blog will become such a long blog with so many different facets that it misses the various audiences entirely (partly very likely, but let’s move on regardless).

So with that in mind, the blogs will be split up as follows:

Part 1 (This Blog) – FaceSearch Filter Screen

Build the initial FaceSearch page, hooking into a HANA query to provide near real-time feedback on number of faces found. This will involve:

      • Creation of the UI5 project based on the high resolution prototype but made production quality
      • Outside-In Service Design for just the search interface query (Using Gateway Productivity Accelerator oData modelling tools) – If I was splitting development between UI and back-end – this would be a good initial approach to agree on all the services – but a little superficial in this example
      • Getting the HANA NetWeaver instance up and running, including setting up my client.
      • Implementing the Service within Gateway using hard coded return values.
      • Building a mock HR name database for use in FaceSearch

Edit: The following was also scheduled for this blog, but my AWS instance got corrupted (no idea how), so I will move the following sections to my next blog, and wrap up with a teaser on how easy HANA can make Google-like queries.

      • Building a HANA Core Data Services (CDS) view to get my SQL logic just right.
      • Building an ABAP Managed Database Procedure (AMDP) for use with Gateway
      • Hooking up the Gateway implementation to the AMDP

Part 2 (Next Blog) – FaceSearch Results Screen

Build the results “Faces” page. This will involve:

      • Enhancing the Gateway service to handle photos
      • Mocking up a 100×100(?) faces into a single image using a command line interface (may or may not hook this up for real to the ABAP system, but this would be fairly straightforward). The objective is to take a large number of people’s photos at a high resolution, shrink them and then combine them into a single image with offsets to each person’s photo to minimise network overhead and make the FaceSearch results screen appear instantly (once cached)
        • Post SapphireNow – Am I meant to make all faces appear in circles (horrible idea in my opinion)???
      • Build a UI5 control to handle images with offsets and width/height for the above image
      • Build the results page

Part 3 (Last Blog) – Face Detail Screen and Optimisation

Build final page and optimise:

      • Build the Person details page including quick actions such as call number, email, etc;
      • Deploy UI5 content to HCP and connect via the backend connector and leverage HCP authentication options (try to get SSO?)
      • Play around with HTML5 offline options and optimisation of UI5 (I still don’t like how heavy it is to start)
      • Look at pre-cache of image files through async loading of manifest file containing images (hidden images)
      • Add Bookmark functionality

Okay – Let’s begin by going back to my notes from just over a month ago…

And because the SCN blog editor is really bad with copying and pasting images, I’ve decided to share the rest of this blog as a link to a pdf since there are way too many pictures to upload. Note – Anyone from SAP – Would really appreciate if someone would upload this pdf to SCN even though it’s not allowed 🙁

I hope you enjoy and/or get something out of it and even if you don’t, I hope this inspires you to give yourself your own challenge to get to know SAP even better…

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Syambabu Allu
      Syambabu Allu

      Hi Matt,

      Excellent stuff of HANA with Gateway and UI5. 🙂

      Just i have quick question how do we have to implement "

      • Building an ABAP Managed Database Procedure (AMDP) for use with Gateway
      • Hooking up the Gateway implementation to the AMDP

      is there any reference links for above points.

      and also link pdf i am not able to open getting error "Not Found"



      Author's profile photo Matt Harding
      Matt Harding
      Blog Post Author

      Thanks for letting me know about the link issue Syam. Dropbox deleted the file, so I've switched to Google Drive which should be a bit friendlier about hosting a file on the Internet publicly. Hopefully it will make a lot more sense with the PDF with the details in it.



      Author's profile photo Matt Harding
      Matt Harding
      Blog Post Author

      Just a quick follow up note - Apparently I did not know about the OpenSearch SAP annotation (though not sure how it is annotated in the meta data for the consumer); but this allows you to do a google like search against an entityset, so I wouldn't need the function imports, and $count should work too!

      Check the bottom of this blog out:

      Now to implement it!

      Author's profile photo Former Member
      Former Member

      Hi Matt,

      you are doing great experiments 🙂

      There is a mockserver (sap.ui.core.util.MockServer) in UI5 1.22, which can be alternative solution for mock odata service. It should support CRUD, filter and batch operations. But I did not find many examples, so it can be another topic for investigation.

      Best regards,


      Author's profile photo Matt Harding
      Matt Harding
      Blog Post Author

      Hi Peter,

      I actually started that investigation last night and spent a good couple of hours trying (stress the word trying) to make it work and handle the $metadata request that UI5 requires without doing what the examples do in the test suite with the static JSON files and metadata.xml file.  Very frustrating that there is very little documentation about it, but very cool if I can do end to end unit tests including posting through it if I get it working (and not require me to use unsafe mode in Chrome).

      If you come across any doco, feel free to post it here (or email if not ready to be exposed to the public forum yet)...