SAP FIORI

1. 3/8/2017 Getting started with SAP Fiori, NetWeaver Gateway & SAPUI5
http://www.bluefinsolutions.com/blogs/john­murray/april­2014/getting­started­with­sap­fiori,­netweaver­gateway?cookiesViewed=true 1/3
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

2. 3/8/2017 Getting started with SAP Fiori, NetWeaver Gateway & SAPUI5
http://www.bluefinsolutions.com/blogs/john­murray/april­2014/getting­started­with­sap­fiori,­netweaver­gateway?cookiesViewed=true 2/3
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? and The 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 created JADS 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

3. 3/8/2017 Getting started with SAP Fiori, NetWeaver Gateway & SAPUI5
http://www.bluefinsolutions.com/blogs/john­murray/april­2014/getting­started­with­sap­fiori,­netweaver­gateway?cookiesViewed=true 3/3
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 website which 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.