openSAP

Developing Mobile Apps with SAP HANA Cloud

Platform
Week 3 Unit 1
00:00:09
00:00:20
00:00:29
00:00:38
00:00:51
00:00:59

Hey there, Dhimat here. Welcome to Week 3 Unit 1 SAP Fiori Client Overview. Last week,
we discussed SAP Web IDE, how to develop applications, deploy applications.
This week, we're going to turn our attention to all things SAP Fiori Client. Let's get started
with an overview.
So, the SAP Fiori Client is available in your standard app stores or you can build your own
and customize it using the mobile SDK.
It features caching capabilities, integration to SAP Mobile Platform as well as HCPms. It's
based on Apache Cordova. You can also use Kapsel plugins with it.
You can access device functions such as camera, GPS, barcode scanning and other
functions depending on the platform.
The standard SAP Fiori Client that's available in the app store also comes in a demo
mode. So, demo mode allows you to interact with live applications running on SAP Fiori
Clients, SAP Fiori Launchpad.

00:01:17

This is where you can get the standard SAP Fiori Client, so you can get it from Google
Play, Apple App Store, Microsoft App Store. Simply go there, download the SAP Fiori
Client.

00:01:31

Here's looking at the platform and version support matrix. So, for Android you have
support for 4.1.3 through 5.1.
For iOS 7.1. through 8.3. And for Windows, you have support for 8.1 as well as Windows
Phone 8.1.
Here's looking at some of the plugins that are available for Android and iOS as well as
Windows 8.1 and Windows Phone
So if you're building a custom Fiori Client, then obviously, you'll be able to incorporate
additional plugins in your app as well. So, the SAP Fiori Client can access cloud or onpremise Fiori data.

00:01:40
00:01:52
00:02:00

00:02:16

If you're only using an on-premise system and you want your SAP Fiori Client to access
that, simply use reverse proxy. If you're using SAP HANA Cloud Platform to access either
cloud-based Fiori data or on- premise data,

00:02:32

then simply use the SAP HANA cloud connector to accomplish that. Either way, first time
when you use the SAP Fiori Client, the content's going to be cached once it accesses the
application URL.

00:02:47

Alright, so, what can I get if I integrate it with SAP Mobile Platform or HCPms? You can
get additional security options, you'll get greater insight into user analytics.
Greater logging capabilities as well as tracing capabilities if you need to troubleshoot the
application ever. How do I use the standard SAP Fiori Client?
Right, we already download it from the app store, we install it and we open it. So, here
either you can use it in a demo mode, or if you have access to an application URL, and
you want to use that, simply click Log In.

00:03:01
00:03:14

00:03:27
00:03:38

Once you click Log In, you'll have ability to enter that Fiori URL. You enter it, click OK,
then optionally set a passcode for the application
and simply log on using your user name and password. Once I'm using the application,
should I need to access the menu to modify any additional settings, how do I do it?

00:03:54

Simply double-tap the screen, then you can access the menu system to do a variety of
things. So, I can clear cache, reset the application, set different log levels, I can change
the URL and so on.

00:04:13

How do I get the best mobile qualities without having to build a mobile application? Simply
use the plugins that are available.
If you're building a custom client, incorporate additional plugins, if you need to. You won't
require any additional coding. Plugins are automatically used when they're available.
How do I build my own custom client? Simple. In week 0, you already installed all your
SDK. Simply go to the Kapsel SDK and create your own SAP Fiori Client.
We provide a build script to do that. Simply run that script and you can customize your
SAP Fiori Client. Once you are done building this client, simply host it on a public app
store or internal app store

00:04:21
00:04:35
00:04:48

00:05:06
00:05:14

00:05:29
00:05:39

00:05:57
00:06:06

and deploy it via MDM and that's it. Of course, don't forget, there are many plugins out
there.
You can incorporate a lot of them depending on what level of functionality you want to
achieve with your app. Alright, let me quickly show you how you can download this
application and use the SAP Fiori Client application.
So in this demo, I'm going to show you where you can find the SAP Fiori Client. I am using
an Android device so I have the Play Store on my phone.
If you are using an Apple device, you'll have the app store, and Windows you'll have the
Microsoft store. So, I'm just going to navigate to the Play Store, look for <sap>, <space>,
<fiori>, and there's my SAP Fiori Client.
Click on it and then simply install the client. It takes maybe about 15 seconds to install the
client.
Once the installation's done, it'll be ready to be used. If you run into any issues
downloading, simply check your Play Store settings to make sure that it's not restricting
you to download that app.

00:06:22

OK, so it looks like it's installing here and once it's installed, I'll open it and to show you
what you can expect in the next unit. So, I'm going to be presented with a landing page
here and I have an option to either log in or use the app in demo mode.

00:06:39

Now in the next unit, we'll use the demo mode and then the unit after that, we'll use the
log in to a Fiori application and then we'll use the SAP Fiori Client then.
OK, that's it for the demo. Thanks, see you in the next unit.

00:06:49

Week 3 Unit 2
00:00:10
00:00:19
00:00:29
00:00:37
00:00:41
00:00:50
00:01:00
00:01:11
00:01:17
00:01:26
00:01:36
00:01:46
00:01:53
00:01:59
00:02:10
00:02:18
00:02:26
00:02:35
00:02:42
00:02:52
00:02:59
00:03:10
00:03:16
00:03:27
00:03:36
00:03:46

Hello, Dhimant here. Welcome to Week 3, Unit In the last unit, I provided a nice overview
of the SAP Fiori Client.
In this unit, we will explore the SAP Fiori Client in demo mode. How do you get started
with the SAP Fiori Client in demo mode? It's simple.
You download the SAP Fiori Client from the app store and install it. Once you open it,
you'll be presented with two options:
Log In and Demo Mode Click the Demo Mode button.
At the landing page, you'll see another button to see the demo in action. Click that button
and you'll be presented with the SAP Fiori launchpad.
Here you will find many applications that you can interact with. So what are some of the
benefits of using SAP Fiori cloud edition?
Simple; a simplified Fiori implementation with minimal installation and configuration. You
can leverage your existing business processes.
You can easily integrate on-premise to cloud systems as well as cloud-to-cloud integration
is available.
And then you can also leverage HANA Cloud Platform services. You can give it a test
drive today.
SAP Fiori demo cloud edition is open to anyone for a 30-day trial. You can log in and
simply create your own prototype
and have it ready for productive usage. So, again, today it's free for 30 days, you can set it
up, customize it.
Later this year you can use it for production. And integrate it with your on-premise
landscape as well.
In Q1, we'll have additional functionality added as well. This is a pretty short unit.
I'm going to give you a quick demo of the SAP Fiori Client in demo mode. OK. So in this
demo, I'll show you how you can use the SAP Fiori Client in a demo mode.
First thing that I'll have to do is download and install the SAP Fiori Client. I've done that.
Next I'll open it.
And then here you have two different options. One is to log in using a Fiori application
URL.
Or second is the demo mode. Now, of course, when you first download this, you may not
have your SAP Fiori URL available.
And then if you want to simply just experience the Client, again, so a Fiori launchpad or a
Fiori application,
that's why we have made this Client available in a demo mode. So let's go ahead and
click that.
The tip here is to double-tap the screen to bring up the toolbar. So once you're in the
application, you want to clean out the cache or anything like that.
If you want to do any type of resetting there, you'll be able to do so. OK. So here I have
the SAP Fiori demo cloud edition page,
some information about it. And then the See it in action is going to launch the SAP Fiori
launchpad.
So let's go ahead and click that. Now before it goes into the launchpad, we'll be presented
with the terms of use.
Simply click I agree to accept the terms. And then after that, you'll be able to use the SAP
Fiori launchpad applications.
So as you can see, I have some categories and tiles, CRM, and then Cross, Retail,
Logistics, Travel and Expenses,
and then Human Capital Management. So a variety of different applications available here

00:03:52

that you'll be able to interact. The data is live data, it's dummy data

00:03:58

so you won't be able to break anything on the launchpad. Feel free to go ahead and try
out different applications.
And kind of get the feel of what the applications perform like in the Client. Let's see if we
can demo here the Simulate Sales Pipeline app.
Again, when you access some of these applications first time, they will perform a little bit
slow. But, there you go, here's my Simulate Sales Pipeline app.
And then I can change the size here and we can say Exclude Lost or Exclude Won.

00:04:07
00:04:25
00:04:37
00:04:48
00:05:02
00:05:11
00:05:22
00:05:29
00:05:39
00:05:51
00:05:58
00:06:04
00:06:12
00:06:20

And then we can look at it by monthly, yearly or annually. Again, just to kind of give you a
little bit of experience on using the SAP Fiori launchpad
and the different applications that we have made available here. Go ahead and give this a
try. And then if you have any questions,
definitely post them to our openSAP forum for this course. So this one is a travel request
that I can go in and approve or reject.
So let's go ahead and approve this travel request. And that's pretty much it.
Again, you know, this should give you some idea of when you're starting to think about
mobilizing your Fiori applications.
You'll be able to have a better idea on the experience. And soon we will have the
productive version of this that you can use.
That is coming in 2016. Now if you wanted to get a 30-day trial of the SAP Fiori launchpad
and do some additional customization, you'll be able to do so by clicking on the cloud
menu link
and then getting started here. So you'll be able to sign up for a 30-day trial. And then do
re-branding. You can manage different application versions.
And then here again as I mentioned you'll be able to connect to your on-premise system
very soon.
So, OK. If you have any questions, again, post them to the openSAP forum for this
course. I'll see you in the next unit. Thanks.

Week 3 Unit 3
00:00:09

00:03:40

Hey there. Dhimant here. Welcome to Week 3, Unit 3. Using the SAP Fiori Client with
your own SAP Fiori apps.
Now in the previous unit, we used the SAP Fiori Client in a demo mode. In this unit, we
will configure it to use against an SAP Fiori application URL.
This is a very short unit, so let's get started. Alright. In order for you to configure the SAP
Fiori Client to use a URL,
all you need is a single SAP Fiori application URL or an SAP Fiori Launchpad URL. And
that's it.
You type in the URL into the URL box and click OK. That's pretty much all it takes to
configure the SAP Fiori Client.
Now we also support using your e-mail address. And this can be integrated with SAP
Mobile Place, so when you use your e-mail address,
the SAP Fiori Client will download the application configuration information and then
authenticate you into that Fiori application.
This is the process where you can configure the SAP Fiori Client using an application
URL. Simply obtain the SAP Fiori Client from an app store.
Install it, open it. And then once you open the client, click Log In and then provide your
SAP Fiori application URL. Click OK.
Either set or disable the passcode and then provide the user name and password and
click Log On. And that's pretty much it.
There is no port configuration that the user has to do or any type of other settings that the
user has to input manually. Everything is done automatically using the URL.
And then you'll be able to enjoy the SAP Fiori Client with the Fiori application content.
Alright. So, like I said, a very short unit. I'll do a couple of demos for you.
Hopefully you'll be able to set up your client using the application URL from our Week 2.
As well as use our SAP Fiori Launchpad URL from Week 2.
Alright. See you soon. Thanks. In this demo, we're going to use the SAP Fiori Client in
Log In mode.
Basically, we're going to bring in content from our SAP Fiori application URL. So I'm going
to open up the SAP Fiori Client. Again, click the Log In mode here.
So previously you saw we used the demo mode. And here simply type in your SAP Fiori
application URL.
Again, you can also use the SAP Fiori Launchpad URL as well. Now, the URL is kind of
long. You can use the URL shortener to make it short.
And I've done so here. Simply paste that in, click OK. And I'm just going to disable the
passcode.
Now it takes a second here to get going. Double-tap the screen to bring up the toolbar. I
think you already know that.
And I'll show you that as well once we get our app running. You may get a notification that
no certificate was found.
The client is trying to basically look for a certificate for the HTTPS site. Simply cancel that.
It's fine. If you do want to install it, you'll have to download the certificate
manually and then install it locally. Alright. So here it's going to try to log us in.

00:03:53

Sometimes it does take a second or two. Because it's still looking for a certificate.

00:04:01

OK, here we go. If that happens, simply bring up the menu, reload the page, and then go
ahead and proceed.
Here, if we had the certificate, we wouldn't have to worry about logging in. So this is where
you're going to be using your trial account.
I'm just going to type my user name and password in here. And then I am going to click
Remember Me because I don't want to retype my password in there.

00:00:17
00:00:28
00:00:37
00:00:47
00:00:56
00:01:04
00:01:15
00:01:27
00:01:37
00:01:46
00:01:56
00:02:08
00:02:22
00:02:31
00:02:45
00:02:53
00:03:04
00:03:15
00:03:21
00:03:29

00:04:10
00:04:19

00:04:38

00:05:07

So, again, it's looking for a certificate. Just click Cancel. Proceed. And then now we
should be close to getting our Fiori application URL content.
Now I'm using a public gateway here to bring the SFLIGHT data, this is an SFLIGHT
application URL. And then it will ask me to use that public
user name and password for that. So thats P1940454050. And the password is Initial123.

00:05:26

Alright. So now I'm going against the gatway there and

00:05:36

there we go, there's my application running in the SAP Fiori Client. Now if I wanted to go
to the settings, I'm simply going to double-tap on the top there where the flight details are.
And click the menu, go to Settings. And then now you can clear all application settings
here. In addition, you can also set a different log level.
And then also you'll be able to clear the cache if you need to. If you just want to reload
new data, you can do that as well.
Alright. Simply click Clear All Settings there and then now I'm going to go out and simply
kill that client from the memory.
And then restart it. And it should bring us back to our Log In screen. And there you go.
Now, what I'm going to do is use my e-mail address to bring in SAP Fiori content.
Now this is going against an SAP Mobile Place instance so I'm going to simply use my email address from there. .com. And then disable the passcode again.
Right, so in future you'll be able to simply use your work e-mail and download the Fiori
content based on roles and responsibilities
that you have. So here, give it a second and it should connect to the demo cloud Fiori
Launchpad. So there you go. We used the SAP Fiori application URL to demonstrate the
Fiori content running in the SAP Fiori Client.

00:04:53

00:05:50
00:06:03
00:06:13
00:06:26
00:06:45
00:07:10
00:07:20

00:07:40
00:07:50
00:08:00

And then we also used an e-mail address to bring in the application configuration in the
SAP Fiori Client. OK. That concludes this demo.
If you have any questions, again the openSAP forum is there for you for this class.
Definitely put any questions there or comments that you have and we'll
be happy to address those. Alright, I'll see you in the next unit. Thanks.

Week 3 Unit 4
00:00:09
00:00:17
00:00:23
00:00:31
00:00:39
00:00:47
00:00:57
00:01:05
00:01:16
00:01:29
00:01:37
00:01:44
00:01:53
00:02:03
00:02:15
00:02:25
00:02:33
00:02:43
00:02:53
00:03:03
00:03:13
00:03:21
00:03:28
00:03:39
00:03:49
00:04:01

Dhimant here. Welcome to Week 3, Unit 4. Configuring SAP HANA Cloud Platform mobile
services for SAP Fiori content.
In the last unit, we consumed the Fiori content using our SAP Fiori Client.
And then we configured it with SAP Fiori application URL. In this unit, we will configure
HCPms.
Then again use our SAP Fiori Client to consume Fiori content. Now the reasons for using
HCPms are simple.
We'll get a lot more insight and control of our application. Let's get started.
So some of the things that you'll get when you route your application through HCPms are
user analytics, you'll get logging and tracing capabilities,
different performance metrics, and then you simplify user onboarding as well as you'll
have different security options.
The features that I like are that we have ability to manage mobile device features. So we
can turn on or off the camera function.
In addition, we'll have capabilities of adding push notification to the app. Now, none of
these things are possible when a user simply downloads the SAP Fiori Client
from the app store and then configures it with the SAP Fiori app URL and consumes the
content.
The application configuration is pretty simple. One, we have to enable the HANA Cloud
Platform mobile services.
And then once we do that, we add the application. The Overview screen here shows
where you're adding the application.
And then the Primary Connection screen here is where you're configuring the application.
As you can see, we only need to specify the Backend URL, the Rewrite Mode.
And then we're going to access the content via SAP HANA Cloud Platform. So we're
going to enable the Via HCP HTML5 checkbox there.
For SAP Fiori Client to consume content via HCPms is simple. We're going to provide the
HCPms hostname, and then we're going to pass a couple of parameters.
One is the appid And then the other one is the fioriURLisSMP=true
So both of these parameters are passed in the URL itself. So here's looking at the feature
restriction policy screen.
As you can see, all of the Kapsel plugins are automatically checked into configuration.
And then there's no additional coding that you require here.
You can manually turn the plugin on or off for usage in the application. And that's pretty
much it.
I'm going to show you how we can configure our application in HCPms. And then go
through different options on managing that application.
OK. Let's start the demo. In this demo, I'll show you how you can configure your SAP Fiori
application
in the SAP HANA Cloud Platform mobile services cockpit. Now, the reason for doing that
is simple, right.
So today when an application is being consumed in the standard SAP Fiori Client, the
administrator has no insight into the application usage.
Mobile services will give us ability to see the registration information, active connection,
logging. And then it will also give us ability to manage device functionality
such as camera, accelerometer, or other plugins that you might have coded in your
application. Alright. So before I do that, let's jump to SAP Web IDE
and make sure that this application is deployed to SAP HANA Cloud Platform as well as
registered to the SAP Fiori Launchpad.

00:04:09

00:04:48

Now those are the two requirements. You click Deploy. And then, for me, I'll just look at
the status.
I already deployed it. So I just want to see if it's still active. Now, of course, you can go to
the SAP HANA Cloud Platform Cockpit
in the HTML5 Applications, and look at the State here. But, of course, for the Launchpad,
it won't give you that information here.
So in SAP Web IDE, it provides that information here as well. So as you can see, it's
active in the HANA Cloud Platform as well as registered to the SAP Fiori Launchpad.
Let's jump back here. So for you when you go and create this new configuration,

00:04:56

it'll be a new application configuration. For me, it's already there.

00:05:01

I'm simply going to show you the values that you need to use. Also, one important thing to
remember is that
in your trial account, you can only add two applications to the mobile services cockpit. So
keep that in mind.
OK. So there is my application: com.sap.fiorimasterdetailapp Now I will go to configure
here and show you the
information about the application as well as the backend information. The rest of the
settings here are really optional.
So for me, again this is a small demo of how you can route an application through HCPms

00:04:17
00:04:28
00:04:36

00:05:10
00:05:18
00:05:28
00:05:38
00:05:47
00:05:55
00:06:02
00:06:11
00:06:16
00:06:24
00:06:34
00:06:43
00:06:52
00:06:58
00:07:07
00:07:17
00:07:25
00:07:32
00:07:42
00:07:51
00:07:56
00:08:07

when it's being consumed in the SAP standard Fiori Client. So provide the Application ID
here.
So, com.sap.fiorimasterdetailapp Version information, Name, and then the Type is Hybrid,
and now Basic is for the security configuration for this application. And that's using the
standard SAP Fiori Client authentication method.
So, that's pretty much it for here. And then the Backend information.
This is where you'll provide your backend URL is your Fiori application portal URL. Now if
you don't know how to get that,
if you go into the HANA Cloud Platform Cockpit Subscriptions, and if you haven't added it,
then simply click New Subscription
to add the flpportal application. You can give a friendly name if you want. And then you
can access the application using the application URL
within the flpportal application overview page. OK. So Proxy Type is Internet, No
Authentication.
The rest of it is default. The only thing you'll have to change is the Rewrite Mode here.
Rewrite URL on the Backend.
And then Via HCP HTML5 App. So make sure that is enabled as well. Simply click Save.
And then once it's saved, now the application is ready to be consumed via HANA Cloud
Platform mobile services.
So I'm going to go home here real quick and show you other functionalities that you can
also take advantage of.
So, again, as I said, when the user registers, you'll be able to see that information here.
You'll be able to see active connection information here.
And then you'll be able to see the logs here as well. Now if your application has ability to
interact with device functionality,
you'll be able to manage those plugins right here. So for example, if I want to enable
camera or disable camera,
I'll be able to do that from here. In addition, I can add new functionality as well.
So if I want to add an accelerometer, for example, I'll be able to do that as well. So here
you can see the plugins, the ID,
and then whether or not they're enabled. To disable, simply select a plugin, click No.

00:08:15
00:08:23
00:08:31
00:08:40

And then, of course, you'll have to update the application before that feature is enabled or
disabled.
So in this case, disabled. So, now, what I'll do is show you how you can add a new plugin,
right.
Click the plus sign here. And then the Accelerometer is the plugin we'll use. Alright.

00:09:03

Now the only thing you'll have to provide is the JavaScript Modules and the ID. Now if you
go to Apache Cordova documentation,
you'll be able to find the information on the Accelerometer plugin. OK. So the name is
org.apache.cordova.core.device-motion
So I'll put that for my ID. And then now, the modules are these.

00:09:10

So the methods are the JavaScript modules that are required here.

00:09:17

And I'll just copy that from my text file. And you'll have to separate them up by comma and
no space.
So as you can see, I've pasted that in here. And then now, I can save that. And now this is
enabled.
And then simply to update your application, click update apps, and then select the right
app, and then click Apply.
So now when the user consumes this application, we'll be able to get all of their
information.
And then we'll be able to better manage the application as well. Now once the plugin has
been added, or if you modify any existing ones,
for example disable camera or calendar, you need to update the app.

00:08:51

00:09:26
00:09:35
00:09:43
00:09:51
00:10:02
00:10:08
00:10:17
00:10:28
00:10:38
00:10:47
00:10:55
00:11:06
00:11:17
00:11:21
00:11:30
00:11:43
00:11:52
00:11:58

So the way you do that is simply click update apps. And then choose your application and
click Apply changes.
OK. So now when the user consumes the application, you know, depending on whether
the plugin has been added or disabled,
those actions will take place at the device level. Now for a user to consume this
application through HCPms,
you will have to provide a custom application URL. So that application URL is this - this is
something that you saw in the slide.
So provide them with your HCPms_Hostname>/sap/hana and this long URL.
And this siteId is your Fiori Launchpad ID. And then your appid is going to be com.sap. (in
my case it was) fiorimasterdetailapp
And then this fioriURLisSMP=true OK. So you pass both of these parameters here, appid
and fioriURLisSMP.
As well as the siteId. Now to obtain your siteId,
you'll have to go to the SAP Fiori Launchpad. Make sure you are in the admin mode, so at
the end just append mode=admin
And then go to the Configure Site Settings. Now in the Site Settings, you'll be able to find
your SAP Fiori Launchpad site ID.
OK. So, again, that's how you configure the application in SAP HANA Cloud Platform
mobile services.
So you can administer that application that's being consumed by the standard SAP Fiori
Client.
If you have any questions, go ahead and post them to the openSAP forum for this course.
I'll see you in the next unit. Thanks.

Week 3 Unit 5
00:00:09

Hey there. Dhimant here. Week 3, Unit 5. Building your own SAP Fiori Client.

00:00:17

Now in the last unit, we configured HCPms to get Fiori content. In the earlier units, we've
been playing around with the standard SAP Fiori Client.
We used it in a demo mode, we used it against an SAP Fiori launchpad, an SAP Fiori
application URL.
And that showed you a demo of how to use the SAP Fiori Client with an e-mail address as
well. Today, we're going to change our focus on
using the mobile SDK and building our own SAP Fiori Client. Alright. So let's get started
here.
So how do we make an SAP Fiori Client? So we need some build scripts; they come as
part of the SAP Mobile Platform SDK.
We can brand the Client with our own media elements, so multimedia elements, icon, we
can add a splash screen if we want to.
We can add external plugins or additional plugins, I should say. And then we can host this
on public app stores.
Or we can host it on an internal app store, like SAP Mobile Place. In addition, you can
deploy it via MDM as an enterprise app.
You can host it on an Intranet. You can send it out as an e-mail.

00:00:29
00:00:37
00:00:47
00:00:54
00:01:05
00:01:17
00:01:24
00:01:34
00:01:42
00:01:50
00:01:59
00:02:10
00:02:17
00:02:25
00:02:38
00:02:48
00:02:56
00:03:07
00:03:15
00:03:26
00:03:35
00:03:42
00:03:50
00:04:00
00:04:05

So you have different options there as well. In addition, you can also protect this client
using
app protection in SAP Mobile Secure as well. OK. So there are a few things that you need
to build your own SAP Fiori Client.
Obviously, we need SAP Mobile Platform SDK. That has all of the tools for us to make our
own SAP Fiori Client.
Now if you're going to build it for Android, then you need Android. If you're going to build it
for iOS, then you need Xcode.
So for Android, you can use Android Studio, or you can download the standalone SDK.
You'll also need Apache Ant.
You'll need Node.JS, you'll need GIT, and then you'll need Apache Cordova. You will also
want to make sure that you can configure your proxy settings if you need to using npm.
This is all documented in your setup guides. So make sure you review that before you go
ahead and set this up.
For Mac, there's an install script that's available. You simply run node install from the Build
Script Directory.
For Windows, you simply need to run Node create_fiori_client.js file. But we'll get to that a
little bit later here. Alright.
So the configuration file is found in your fiori_client folder. Where is your fiori_client folder?
That's located in your SDK. So wherever you install your SDK, there is
mobileSDK/KapselSDK, apps and then fiori_client folder.
So there's a file called config.json. This is your configuration file. This is where you define
your packageName, targetFolder, appName,
platforms that you want to build this client for. And you can do it for multiple platforms, you
don't have to just do it for one.
So you can do it for Android, iOS, and so on. Crosswalk - this is replacing WebView.
It helps render the pages faster. I would say, if you're going to do it, make sure you look
up the instructions on how to install and configure Crosswalk.
You need Python for that as well. For this course, I did not use Crosswalk.
But if you're planning on using it, just go to the Crosswalk website, and look up the
installation document. Or have a look at SCN, they have a lot of documents on there

10

00:04:17
00:04:25
00:04:34
00:04:40
00:04:52
00:05:00
00:05:09
00:05:18
00:05:32
00:05:40
00:05:47
00:05:56
00:06:04
00:06:11
00:06:17
00:06:26
00:06:35
00:06:51
00:07:02
00:07:11
00:07:17
00:07:30
00:07:38
00:07:46
00:08:00
00:08:12
00:08:22
00:08:32
00:08:40

referring to how to install and configure Crosswalk with SAP Fiori Client. OK. So once you
configure your file,
you'll be ready to simply create the client. But before you do that, make sure you, you
know, incorporate extra plugins
that you need to for your app. If you want to change the icon, the default stuff, go ahead
and replace that.
That's located in your fiori_client_assets and it's by platform. So for Android replace
whatever you need to, for iOS replace whatever you need to.
And then once the project is created, you need to modify the appConfig.js.
This is where you're going to configure the appID if you're using it for proxying through
HCPms or SAP Mobile Platform.
And then you need to point a Fiori application URL there. Either your Fiori application URL
or the launchpad.
And then set a flag true for fioriURLisSMP if proxying through HCPms or SMP. And then
optionally passcodePolicy.
This is used when not proxying through HCPms or SAP Mobile Platform. So you can set
that as well. Alright.
So once you've got all this stuff set, you're ready to build and deploy this, right? For
Android, a couple of commands you need to run.
So, first one is a Cordova build Android. This builds our project.
And then simply you can run it. So run Cordova run Android, and this deploys to a
connected device.
Now if you want to show it on an emulator, then you can run it Cordova emulate Android.
And this deploys the application to an emulator, given that you have the emulator
installed.
For iOS, pretty simple, open up Xcode. And then you have the build/deploy option from
there.
That's pretty much it. Very simple. Again, I've documented the instructions as far as the
installation of prereqs,
creation steps, and then deploying it to either an emulator or a device. Alright. So now I'm
going to show you how to do a step by step.
So let's get the demo started. In this demo, I'm going to show you how you can build your
own SAP Fiori Client.
Before we start, I want to make sure of a couple of things. One, that you have your
environment properly configured.
So that means you have mobile SDK, latest one downloaded, installed and passed.
Second, you have installed the build tools that are necessary to build our project. Once
you have that set, we can start with customizing the SAP Fiori Client.
Now if you run into any issues, definitely post questions to the openSAP forum.
OK, let's go ahead and start. So, first thing you need to find out is the path to the Fiori
Client directory.
Now that's in your mobile SDK, Kapsel SDK directory. So mine is installed in C:
\SAP\MobileSDK3\KapselSDK\apps\fiori_client
So this is what we'll base our custom Fiori Client off of. So, first thing you need to do is
open the config.json file.
Now here we're going to provide our packageName, targetFolder, appName, and
platforms that we want to build the project for.
OK. So, once you do that, save it, and that's it. Now if you are running Crosswalk, you'll
have to define that here as well.
So you'll have to define the path for that. Next, if you want to change the icon,
or a background or any type of those multimedia properties, you can do so. So here I've
provided the path to where you can change the app icon.

11

00:08:53
00:09:03
00:09:14
00:09:26
00:09:38
00:09:47
00:09:54

If you want to change the background, I've provided the path for that as well. Now, one of
the beauties of building your own client is that
we can preconfigure it with our Fiori application URL. So to do that, open up your
appConfig.js file.
Now that's located in your fiori client, fiori client, fiori client app www directory. There's a
file called appConfig.js
Now you can change this later on too. But why not simply do it the first time and that way,
we don't have to rebuild our Fiori Client.
Alright. So open up the file and, you know, browse through it, read the comments on what
the file is about and all that stuff, and what else you can do here.
So I've provided the appID. So com.sap.opensapfc

00:10:07

And then .myopensapfc And then in the Fiori URL, I've created a sample app which we'll
use here.
So simply put this Fiori app URL, or you can put cloud demo SAP Fiori launchpad URL
here as well. And then we're not going to be running this in SMP, so we don't have to
change that value.

00:10:23

We'll leave everything else default. Alright. So next, we're ready to build the client.

00:10:31

So what you need to do is give the command node create_fiori_client.js Now I ran all this
and captured the output right here.
I'm starting off at my cd fiori_client directory. And then basically right here, I'm running this
command.
OK. So once I run the command, it's going to go out there and fetch all the plugins.

00:10:47
00:11:00
00:11:08
00:11:18
00:11:29
00:11:37

So as you can see, it's going to get the plugins, and then it installs them. OK. So once we
are done with that process,
we're going to change the directory to our openSAP Fiori Client directory. So if you named
it something else, then move into that directory.
Once you do that, we're going to basically prepare our platform. In this case, it's going to
be Android.
This is an optional step, I guess, because if you wanted to further modify it, you can do so
at that stage. So once I prepare it for Android, I can bring this project in Android Studio or
Eclipse, or so on.

00:11:50

Alright. So once you do that, you can go ahead and give the build command.

00:11:56

So, cordova build android And then if you have iOS, cordova build iOS

00:12:05
00:12:16

So once you do that, it's going to build our project, our APK. And then we'll be ready to run
either in our emulator
or on our device. So here you can give a command if you have an emulator set up.

00:12:24

cordova emulate android And that's pretty much it. If you want to run it on the device,

00:12:30

simply do cordova run android So now that's what I'm going to do.

00:12:36

So I have my device here. And then I'm going to give cordova run android

00:12:44

So this will take a second or so, and what it's going to do is install this openSAP fc app on
my device.
So let's check out the progress here. So fairly quick on the device, on the emulator it's
fairly quick as well.
If you run into any issues, definitely post questions on the openSAP forum for this class.
So here you see that it built the project successfully.
And then now it's going to install the app on my device. So it's installing, and there you
see it.
So I didn't change the splash screen there, but there you go. So you can see the
background there of openSAP.
I didn't disable the passcode option, but I'll go ahead and disable it right here. And then
the Tip right here.

00:12:55
00:13:08
00:13:22
00:13:35
00:13:44

12

00:13:53
00:14:01

Now this is customizable even to the screen and the button and so on. I'll just click to
continue.
Alright. So now this is going to go against my application that I published on HCPms.

00:14:11

So here I'm going to use my trial account to log in. Put my password in here.

00:14:32

And I'll just say remember me. And then click Log in. Now had I had the certificate already
installed on here it wouldn't be asking me.
I'd simply be able to log in. So that's something that you can play around with.

00:14:42
00:14:46

00:15:04

So all you have to do is browse to that Website to the app URL basically from Chrome on
your device, and then save it.
Save the certificate, you'll install it basically. And then when you use it with SAP Fiori
Client,
then you won't have that option anymore. OK. So there's my app.

00:15:11

Again, we bypassed the whole user putting their URL in or do any type of configuration.

00:15:21

And that's it, they can start using this app. So OK. That's pretty much it for this demo.

00:15:30

So that pretty much wraps up Week 3. Hopefully you were able to follow all the content,
the demos,
as well as got some hands-on experience in using the SAP Fiori Client. Perhaps you built
your own SAP Fiori Client as well.
So we, you know, saw how SAP Fiori Client can be used from the App Store against an
SAP Fiori app URL or in a demo mode.
We saw the different mobile qualities that you can incorporate in your mobile application.
And then we saw the integration with HCPms giving you a lot more control over your app.

00:14:57

00:15:38
00:15:46
00:15:57

00:16:08
00:16:20
00:16:27

And then, of course, we can build and customize our own SAP Fiori Client as well.
Continuing on to Week 4 with Jeff on mobilizing Fiori apps.
Good luck with that. If you have any questions, definitely post them on the openSAP
forum for this class.
I'll see you next time. Thanks.

13

www.sap.com

2015 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form
or for any purpose without the express permission of SAP SE or an SAP
affiliate company.
SAP and other SAP products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of SAP SE (or an
SAP affiliate company) in Germany and other countries. Please see
http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for
additional trademark information and notices. Some software products
marketed by SAP SE and its distributors contain proprietary software
components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for
informational purposes only, without representation or warranty of any kind,
and SAP SE or its affiliated companies shall not be liable for errors or
omissions with respect to the materials. The only warranties for SAP SE or
SAP affiliate company products and services are those that are set forth in
the express warranty statements accompanying such products and services,
if any. Nothing herein should be construed as constituting an additional
warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue
any course of business outlined in this document or any related presentation,
or to develop or release any functionality mentioned therein. This document,
or any related presentation, and SAP SEs or its affiliated companies
strategy and possible future developments, products, and/or platform
directions and functionality are all subject to change and may be changed by
SAP SE or its affiliated companies at any time for any reason without notice.
The information in this document is not a commitment, promise, or legal
obligation to deliver any material, code, or functionality. All forward-looking
statements are subject to various risks and uncertainties that could cause
actual results to differ materially from expectations. Readers are cautioned
not to place undue reliance on these forward-looking statements, which
speak only as of their dates, and they should not be relied upon in making
purchasing decisions.