Getting started with SAP Fiori, NetWeaver Gateway & SAPUI5

So you’ve heard all about SAP Fiori, NetWeaver Gateway and more recently SAPUI5 and are looking to get started, but unsure how. There is a vast amount of information available on all of these topics, and as a result it can be very difficult to get up and running.

In this post I’m going to distil some of the information and give you the material you need to start building apps.

SAP NetWeaver Gateway

Gateway is nothing new in the SAP world, however with the growing popularity of mobile applications and SAPUI5, it is becoming more prevalent. At its most simple level SAP NetWeaver Gateway is used to expose information from one or more systems, usually SAP ones, to the outside world.

If you do not currently have access to a Gateway enabled server you can download and install a trial, and guides for doing this on various operating systems can be found here.

Some words of advice here from Bluefin’s own Ron Sargeant, and King of the Gateway SCN, are that if you  just want  to play around at consuming services, then the service consumption trial is the quickest and easiest way to do this. The other trials are rather long-winded and time-consuming and only of interest if you are planning to write your own services. It’s probably simpler to set up a real sandbox server within your business environment as the infrastructure is already in place and Gateway is a relatively small bolt-on. Whereas with the SAP trials you are installing a SAP infrastructure in order to bolt Gateway on, so it’s bigger, time-limited and prone to issues.

At this point it is also worth mentioning the landscape, as this is something which will need to be decided on early on, especially if you are enterprise oriented. The recommended landscape for Gateway is to have it on its own server (hub), with a connection to backend (“BEP-enabled”) systems. There are however several deployment options available and these are documented SAP NetWeaver Gateway configuration guide.

Once you have access to a SAP NetWeaver Gateway server, I’d recommend reading How to develop a Gateway service using code based implementation, which will teach you how to quickly create an OData service with Gateway. OData is a standardised protocol for creating and consuming data APIs, which builds on core protocols like HTTP and methodologies like REST. This results in a uniform way to expose full-featured data APIs.

To find out how to add filtering capabilities to an OData service, check out How to develop query options for an OData Service using code-based implementation. To round off this introduction to Gateway its worth working through Building your first simple Gateway service by Lindsay Stanger on creating simple Gateway services.

With these development frameworks there is a more clearly defined separation between the data layer and the UI/Application and therefore you will need ABAP and JavaScript skills to manage it all yourself. Alternatively you can cover one half and let somebody else cover the other. All of this also comes with the need to understand basic design patterns that can and should be adopted. The content I’ve referred to above provide “outside-in” design approaches to modelling. This is different to a lot of the material out there which takes an “inside-out” approach, which should be avoided where possible. If you do have “inside-out” modelling then it’s worth reading Improved Inside-Out Modeling on how to do it well.

As you get to grips with SAP NetWeaver Gateway you might want to follow the Gateway Developer Centre and the SAP NetWeaver Gateway community on the SCN for more content. One final article worth reading, even though we have not yet covered SAPUI5, is Creating a SAPUI5 starter application with the Gateway Eclipse plugin by Ron which covers how to use an Eclipse plugin to generate a basic SAPUI5 app from a Gateway service.

This concludes our introduction to Gateway so grab a coffee and I’ll see you in a moment where we’ll get started with SAPUI5.

SAPUI5

SAPUI5, a relatively new addition to SAP’s technology set, provides a quick and easy way to create cross-platform user-interfaces which run on almost any device. DJ Adams has written a couple of blog posts which describe what SAPUI5 is and the direction it’s headed in. They are: SAPUI5- The future direction of SAP UI Development? andThe essentials: SAPUI5, OpenUI5 and Fiori

Now that we understand what SAPUI5 is, it’s time to get you up and running with it. Step 1, download and set up SAPUI5 on your machine. The guide I followed is Getting started with SAPUI5: alternative guide. It will take you through installing SAPUI5, setting up a local Apache server and setting up Git. In case you skipped the “Getting started with SAPUI5” because you are already set up with SAPUI5, the last step of the article advises downloading the excellent sapui5bin as it contains a large number of example apps which are a fantastic reference point when you’re creating your own applications. For more information and to download the sapui5bin please see here.

It is worth saying at this point that if you would prefer to use the Node.js platform instead of Apache you can very easily do this and I refer you to this guide. If you choose to go down this route Brenton O’Callaghan has createdJADS which is a Node.js development web server designed for SAPUI5.
Before continuing further you must ensure you have a text editor on your machine. Whilst there are a few several options available there are a few which I recommend.

1. If you prefer a light-weight but highly extensible text editor I would say to use Sublime Text. This is my personal preference. If you chose Sublime Text then I would recommend downloading the SublimeUI5 package by DJ which adds many very helpful snippets of code which speeds up your development of SAPUI5 applications
2. If you are more accustomed to or prefer using an IDE then I would suggest JetBrains WebStorm. I recommend this over Eclipse because it is a more pleasant environment to work in. However there is less documentation than there is for Eclipse so this should be taken into account when making your choice
3. The Eclipse IDE is the third option as it SAP’s current “go to” IDE; however this could change in the future. As stated above it is not as nice to use as WebStorm however there is more documentation available.

Whilst developing SAPUI5 applications it is very helpful to refer to the API reference and view the demo apps.

This collection of posts by DJ will guide you through creating a SAPUI5 application using best practice, such as XML views and data models. In the next section, on SAP Fiori, we will cover some exercises which will guide you through building a Fiori like app in SAPUI5. Time to get another coffee and I’ll see you in the next section.

SAP Fiori

SAP Fiori, much like SAPUI5, is fairly new to SAP with the first wave of Fiori apps appearing last summer. With the growing popularity of SAPUI5 it is gaining momentum quickly and is at the forefront of SAP’s moves to reinvigorate the user-experience of SAP products. This section and Fiori in general incorporates elements from both SAPUI5 and Gateway, so it is important to highlight that in order to customise SAP Fiori you will need knowledge of both. Brenton has written this excellent blog on how to Getting the most from your SAP Fiori investment which covers what SAP Fiori is at a basic level and how to get started with and implement your SAP Fiori solution.

The next article I'd recommend is SAP Fiori Toolkit which covers the use of an Eclipse plugin which simplifies the standard Fiori development process. To extend Fiori applications I would read Extensibility which outlines the general steps to take, and then for more information, check out Extensibility of SAP Fiori Apps. The SAP Fiori Launchpad is the entry point for accessing Fiori applications on mobile or desktop devices, and it can be customised in various ways. For more details on how to this I would recommend this area of the SAP help websitewhich covers the options available.

It is now time to build some SAP Fiori like apps yourself using SAPUI5. This collection of tutorials will take you through a series of 10 exercises that cover a wide range of key SAPUI5 concepts and Fiori design principles.

Closing comments

Now that you’ve finished working your way through this article, it’s time for a well-deserved rest and a pat on the back! Hopefully you’re now set up with the various technologies which you need and you have taken your first steps into the app building world. Whilst we have only scratched the surface here I hope it has eased you gently into these technologies and you now feel more ready to take on bigger and more complex applications in the future. Let me know in the comments how you got on, or if there is anything that isn’t clear.