Skip to Content
Author's profile photo John Appleby

The SAP TechEd Amsterdam 2013 Mobile App – built on SAPUI5 and SAP HANA Cloud

I wanted to tell the story of the Bluefin development team – including DJ Adams, Lindsay Stanger, Oliver Rogers and others, who built an app for you to build an agenda and never miss a session, for SAP TechEd Amsterdam.

It was originally built with SAP ERP, Gateway and SAPUI5 with the sap.m library that Fiori uses – so it is Fiori-esque. To productize it, we took advantage of the shiny new HANA Cloud and thanks to Amit Sinha we ported the app onto HANA. It is now built entirely in the HANA platform including HANA DB for storage, HANA XS for integration, and HANA XS with SAPUI5 and sap.m (the same code as before) for the web app.

I hope you enjoy it because the team worked hard, and to be clear… none of the credit resides with me, only the responsibility for the bugs because I pushed them to port it to HANA so we could reliably support a large number of users. Please download, and enjoy. In response to a few emails, this app is not sponsored or endorsed by SAP or TechEd.

SAP TechEd Amsterdam 2013 Mobile App

Features:

– Smartphone, Browser and Desktop compatible

– Search sessions by Type, Track, Level and Date

– Sessions coming up in the next hour

– Sessions in progress

– Add sessions to your agenda

– Favorite sessions

– View your agenda

– “People who like this also like this”

If you’re interested… here’s the story of how it came about.

I spoke to DJ Adams about it first. He’s currently working for Bluefin within the SAPUI5 team at SAP.

“The idea came from when SAP published an Excel spreadsheet of the sessions for TechEd Amsterdam. I though… that data would be lovely in my pocket and I wanted a small example to practice and learn more SAPUI5. The two things came together and I built a small pocket reference to Amsterdam in SAPUI5.

The first thing I did was to make the data useable using my Spreadsheet to JSON converter to convert the Excel spreadsheet into Google Docs and pointed my service at this Google Doc. This dynamic service updates the JSON feed every time there’s a change to the Excel spreadsheet.

At the time I wrote most of it and got Joseph [DJ’s son] to write some. What I find really interesting is that I’m a plumber, not a designer – but as a dinosaur I find I can build nice-looking apps. I put it as a challenge to the Bluefin Development Community to make it “TechEd Ready”. Lindsay Stanger responded first of all and they took it from there! There wasn’t any authentication, or favorites. Lindsay took it over and managed the project from there and I got out the way!”

What’s the difference between SAPUI5 and Fiori?

DJ: “SAPUI5 is a framework built on JQuery which has a number of libraries like sap.ui.commons, sap.viz, and most importantly sap.m, which originally stood for Mobile and it had mobile-specific themes. This has become the go-to standard for building apps and as a result, the sap.m library was built out to become responsive for all device sizes and types including desktop web browsers.

Fiori is a set of applications built on the SAP Business Suite. Wave 1 of 25 apps came out earlier this year and Wave 2 is released with TechEd with 25 more apps and there are 150 more waiting in the wings. All of these apps have certain things in common. First they run in HTML5 on smartphones, tablets and desktops. Second, they’re role-based which means you logon as yourself with your normal username and password and based on the assignments you have, you will have access to different applications – your launch page is a series of tiles, personal to you.

If you take delivery of Fiori, you have to install the UI add-on for NetWeaver, including the UI5 libraries which are stored in the ABAP MIME repository, Your ABAP server can then serve the SAPUI5 artifacts. Then you install Fiori, which has two parts. The first part is the UI part and the second is the Gateway Service for the data that app needs to use, which are all OData services. Each OData service has a front-end part and a back-end part, which integrates into the Business Suite tables.

Fiori apps always use the sap.m and sap.ui.layout libraries which contain controls like switches, tables and tab bars, and those are all part of the SAPUI5 framework. This brings consistency of look and feel, plus responsive design.”

Is the TechEd app you built a Fiori app?

DJ: “Erm… Ye… No, but it was never designed to be a Fiori app. It’s designed to be for smartphone only. The navigation part of app we built is based on the app control which is part of the sap.m library specifically for smartphones. On a desktop or screen, it stretches to the size of the screen. For larger screens, we have the split app control which contains the master on the left 1/3 and detail on the right 2/3, like Apple Mail. It will automatically use the right framework for the right device, and hide the detail in the smartphone as required. It does however use some of the Fiori controls.

Philosophically, Fiori is all about renewing existing apps, and SAP is in the process of defining exactly what Fiori means. Dick Hirsch wrote a good blog about this here. We’re even delivering a TechEd hands-on session CD168 “Building SAP Fiori-like UIs with SAPUI5”.

/wp-content/uploads/2013/10/fiori_312235.jpg

Productionizing the App

I talked to Lindsay Stanger, who was responsible for making the app production quality. She is a developer within the Bluefin development team.

“At that point, DJ had already made a substantial app where you can browse sessions by type or app. It was pretty static and just had data stored locally. I picked it up and got permission to make it a real project from Philippa Holland. We set out some sprints to move it away from being just an offline app and add the ability to save preferences and logins, and then the ability to create an agenda.

The priority list came partially from people within Bluefin who made suggestions. Originally the plan was for me to get used to the technology rather than to release it as an app so we gathered the input from what people thought would be useful. We had 4 or 5 week-long sprints determined – in case I got pulled onto a project, I wanted it to be releasable at the end of any sprint.

Sprint 1 allowed you to view all the sessions, filter by type/track/level and add a free text search, plus sort the sessions by date/time. Sprint 2 added date and time for each session so they can be grouped. Sprint 3 added in the login so people could register. Sprint 4 enabled the favorite feature, plus being able to see from a session what other sessions people liked. Sprint 5 enabled adding to an agenda and seeing that in a calendar view, and being able to select days and see what you were booked in for. At the end of Sprint 3, I sent a pilot out to our community to get feedback from what the layout and look-and-feel should be. There was a lot of collaboration from the team there and the feedback was essential!

We had a planned Go Live date for about 10 days before TechEd but as it turned out, I finished development about 2 weeks before TE. I sent out the release candidate to our development team and we fixed a few bugs, before getting some help from Steffen Schwark to expose it onto our code website.

IT’s been amazing the number of people that have helped me, including James Hale, who I work with closely and helped me work through problems with HTML and JavaScript.”

A brief interlude

I had a brief piece of involvement here, when I mentioned that if we want 10,000 TechEd attendees to use this then we should move it out of Bluefin’s corporate network and into the cloud. A brief conversation with Amit Sinha, we provided a shiny new HANA Cloud instance to the team. I was personally interested in what it would take to port an app like this from SAP ERP into a HANA native app and I thought that HANA made the perfect platform for building apps quickly, based on SAPUI5 technology.

Porting the app to the SAP HANA Cloud

Lastly I went to talk to Oliver Rogers, who ported the app to HANA. Oli is a development consultant at Bluefin and a seasoned HANA/mobile developer.

“Lindsay had asked me for some assistance around Gateway/JavaScript/SAPUI5 and when I got the request to move it to HANA… the next thing I knew I was doing it. I had to replicate the table structure from ERP over to HANA and then re-write the integration mechanism that Gateway provides into ERP, for the HANA platform.

I originally used XSOData to expose information and I found I had to write some Server Side JavaScript (XSJS) to call a stored procedure to create users. The nature of the app is that anyone can read anything – so you can see what anyone else is doing – without authentication. The preferences of saving back on what you’re going to attend or favoriting is also written in XSJS, so we can check that it’s the correct user. We had used a lot of boolean variables in Gateway, but HANA doesn’t support these so we had to rewrite these as single character variables.

Provisioning HANA the Cloud was remarkably easy – you just log in and a few minutes later you have a working HANA instance. I connect to it via a web client and it upgrades to the latest version and I was then able to access HANA in the cloud from HANA Studio on my desktop. It just worked.”

Final Words

I absolutely love this story, because it’s a story of creating an app around data, which is really relevant and useful to people attending TechEd. It’s a story of collaboration and teamwork in the Bluefin team and a story of the latest SAP Technologies, including SAP HANA, Gateway and SAPUI5. I think the app is a beautiful Fiori-esque app which is simple and usable.

So please download it and enjoy the team’s hard work!

Special thanks has to go to the beta testing at the SAP Mentor community, especially The specified item was not found., Simon Kemp and Gregor Wolf, who all found bugs which we quickly fixed today.


Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo DJ Adams
      DJ Adams

      It's clear that this story is more than just a series of technical activities. Lindsay Stanger James Hale Oliver Rogers and others are my young (non-dinosaur!) heroes and it's great to have seen them take up the challenge and cover everything from project management through agile sprints to speaking OData natively and debugging HANA XS.

      We are of course building on the shoulders of giants -- actually giant[ turtle]s all the way down -- the dedicated folks in the SAPUI5 teams in Walldorf are simply an amazing bunch whom I'm totally honoured to work with at the moment. I referred to myself as a dinosaur (we're not dead yet!) in that I see myself first and foremost as an ABAP hacker and a data plumber, and for me, with my "application developer" hat on, to be able to produce decent looking apps that run seamlessly across platforms and devices as diverse as smartphones, tablets and desktop browsers* shows just what an excellent job the SAPUI5 coders and designers have done.

      *and yes, Craig Haworth, try doing *that* with OS-specific apps 😉 ... web-native FTW!

      Naturally it's nice that we have an app for SAP TechEd Amsterdam ... and one that's written using SAP technologies!

      dj

      Author's profile photo John Appleby
      John Appleby
      Blog Post Author

      Thanks DJ and I know those peeps valued your mentorship throughout. Let's face it, if you weren't an XLS-->Google Docs-->JSON geek, this wouldn't have happened!

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      This is awesome! I was already facing the time-consuming, tedious task of adding my preferred sessions into Outlook by hand, but using this app it's a breeze!

      I have two minor remarks which would make it 5-star -- right now I rate it 4.99 star already 🙂 :

      1. Be able to search by (shorthand) session ID
      2. Have the personalized agenda show overlapping sessions

      But then again, this app is killer! Kudo's to the team involved in making this happen!

      Author's profile photo John Appleby
      John Appleby
      Blog Post Author

      I can't promise anything, but I've put them on the bug tracker!

      Maybe Oliver Rogers will do something, given your kind feedback 🙂

      Author's profile photo Oliver Rogers
      Oliver Rogers

      Thanks Robin for the kind words!

      I have made the changes to allow ID searching in the web version. Let me know your thoughts!

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      Oliver you're a star! ID searching works like a charm!

      And as a cloud advocate, allow me to highlight this fix as one of the big benefits of cloud applications: there is simply no need to reinstall or update anything on (all of) your devices; the fix is just "there"!

      Author's profile photo Simon Kemp
      Simon Kemp

      Great job everyone involved, it really sounds like a great team effort. Can I add one feature request? Or maybe it is bringing back an old feature that was lost along the way.... Namely offline access. When I was at TechEd last week in Vegas I struggled to get good connectivity and would have loved to have an offline version available. Just a thought to make a great app even greater!

      Author's profile photo John Appleby
      John Appleby
      Blog Post Author

      The Android App is now up there, and definitely works offline!

      The iOS one works offline provided the HTML5 is cached.

      Let me know how it works!

      Author's profile photo Jorge Weiss
      Jorge Weiss

      Awesome!

      Great job!

      Creative, nice design, light!

      I like it! Congratulation!

      /Weiss

      Author's profile photo Former Member
      Former Member

      Great job guys. I cant attend, but look forward to see what you get up to for Sapphire next year.

      Author's profile photo Maria Squicciarini
      Maria Squicciarini

      Great project everyone!

      For a full SAP TechEd Amsterdam experience, make sure to also access the official mobile app which includes:

      • the social activity feed
      • conference onsite guide
      • conference center maps
      • show floor details
      • photo sharing
      • commenting and rating sessions
      • check-ins to content and locations
      • interactive conference agenda with real-time session schedule changes
      • live updates of activities, comments, photos, and leaderboard shown throughout the Amsterdam RAI conference center 

      Learn more here: http://www.sapteched.com/2013/emea/app/home.htm

      Author's profile photo Aviad Rivlin
      Aviad Rivlin

      Very nice guys! Unfortunately, I can't make it to Amsterdam this year.

      Author's profile photo Former Member
      Former Member

      Great stuff.  Is the code/app still available to download?   The link above doesn't appear to be working at the moment: https://code2.bluefinsolutions.com/

      Just out of curiosity did you build the app to  enable it to show your personal itinerary etc while offline? I think I heard that SMP 3.0 is introducing SAP Kapsel which better enables caching of data on the device.