openSAP

Build Your Own SAP Fiori App in the Cloud 2016

Edition
Week 06 Unit 01
00:00:11

Hello, my name is Ido Shemesh and I'm a product manager in the Cloud Experience
team.Welcome to Week 6 of the 2016 edition of the Build Your Own Fiori App openSAP
course.

00:00:23

So now that youve learned how to create your first Fiori app and enhance it, in this week
we will be discussing and demoing various topics relating to the extension of SAP Fiori
apps.

00:00:34

In this unit, Unit 1, I would like to introduce the concepts and mechanisms of extending and
customizing Fiori applications with SAPUI5.So why is extensibility so important?
It's almost impossible to deliver software that will perfectly fit the needs and requirements of
each and every customer.Especially today when a significant amount of the solutions are
made available through the cloud in a Software as a Service solution model.

00:00:49

00:01:03
00:01:12

00:01:23
00:01:34
00:01:48
00:02:00

Its crucial to provide customers with the tools and mechanisms to personalize, customize,
and extend the standard delivery according to their business scenarios.
From talking to many of our customers and partners, we learn that they would like to
change, extend, and customize the SAP standard delivery and would not likely use it as is.
Extension means things like add a new field, hide a control which is not relevant in their
scenario, or add a new functionality which hasnt been delivered with the standard app.
SAP provides tools, concepts, and mechanisms to support the extension of Fiori apps as
part of SAPUI5 and various tools like the SAP Web IDE.
One of the core concepts of extensibility is to keep the standard delivered application
unchanged with no modifications and build our extension code around it.
So that the standard application can benefit from any future upgrades or service packs that
SAP provides.And that this upgrade to a new version would be done automatically and
without the need for any manual changes.

00:02:21

I would also of course be interested in keeping my own extensions and not having them
overwritten by the upgrade.So for extension, SAP provides various tools and various
mechanisms through SAPUI5 for the various customizing personas.

00:02:42

For the standard business user, the end user, personalization is enabled in his Fiori content,
either through the Fiori launchpad customization options of creating new groups,
adding new tiles from the tiles assigned to him by his administrator, or moving them around,
renaming them, or totally deleting them from his home page.
Additional options exist in SAP Fiori applications with their settings and abilities to hide tabs,
rename fields, etc.The second persona is the business expert, or the key users.
This persona doesn't have any development skills.And he needs the ability to adapt the
applications in runtime and intuitively
to fit the specific business needs and requirements of his team in the line of business which
he is expert in.This is called runtime adaption, and we will elaborate on this in a second.

00:02:54
00:03:03
00:03:22
00:03:33

00:03:45
00:03:59

The third persona we're discussing is the developer.He receives requirements from his
team to adjust and extend the applications and add new extensibility options
and capabilities through coding.And his changes would affect each and every one of the
users in his team.

00:04:08

So runtime adaption: Runtime adaption enables the key users, or the business experts, to
adapt the UI of their Fiori applications during runtime intuitively and without the need to
introduce any new coding because this is not part of their skills.

00:04:24

A major factor of UI flexibility is the ability to change and adapt the UI in runtime by
removing or adding new fields, renaming them, renaming labels and other text
in order to better fit the terminology of the company, totally change the layout, and add
additional UI elements.In addition to UI flexibility, runtime adaption also supports the
extension of OData services,

00:04:39

00:04:57
00:05:11
00:05:22
00:05:34

00:05:53
00:06:02

00:06:20
00:06:34
00:06:47
00:07:03
00:07:12

00:07:23
00:07:34
00:07:50

and the generation of Adobe-based forms and e- mail templates according to these
services.Runtime adaption is supported by a dedicated SAPUI5 library,
which integrates with the SAP flexibility services for layered persistency.The layered
persistency is required here to maintain the basic concept that we talked about earlier
of keeping the standard SAP delivered application unchanged, while persisting the
modifications and adaptions inside this layered persistency.
Runtime adaption is available for Fiori apps running on S/4HANA and the Fiori launchpad
for both of them on cloud and on premise. The key user, or the business expert, is assigned
to a specific key user authorization role,
which enables the runtime adaption.Once the adaption is performed, it's usually performed
on the test systems
and then rolled out to various team users into the production landscape through a transport
mechanism.Now if you want to try out the runtime adaption capabilities, we can navigate to
the SAPUI5 demo kit.
And under the list of available demo apps, we have the option to run the Runtime Adaption
application.Now this application only displays the UI flexibility abilities,
which enable us once we click on the Adapt UI button the application enters into
adaption mode.
Let's refresh this.There. So the application enters into adaption mode where we can hover
over the various fields and groups of fields in this application.
And we can start reordering them and moving them around, either within the groups, or to
other groups.
We can rename the UI elements to fit our business scenarios and business terminology.And
we can totally remove redundant fields that don't fit our scenarios, or add new fields
that are available in our service, or create custom fields and add them to the underlying
OData service.We can create new groups of fields.
Give them our desired name.And add new fields to the group by selecting from the available
or, again, by creating new ones.
Once my adaption is ready and fits my needs, I can transport it to a transport transaction.

00:08:01

And the various adaption changes would be rolled out to my team of users on the
productive landscape. OK Now the third option of extensibility is the extensibility that is
embedded in the SAPUI5.

00:08:23

The basic concept as we discussed is keeping the parent application or the SAP standard
delivered application unchanged.And each and every one of the changes that we apply
would be persisted in the extension project

00:08:39

or the new project that we create for extending the SAP standard application.The extension
project is a lean project, at least at the beginning, and it consists mainly of the Component.js
file,

00:08:56

which is divided into three parts. The first part declares the extension project or being an
extension project.The second part refers to the parent application and loads it in runtime.
And the third part is an aggregation of the extensions that we apply to our new
application.So in runtime, when we launch our extension project, first it loads the parent
applications through the reference it has,

00:09:08

00:09:26
00:09:37

and then it merges the various extensions that we applied in the new project.To dive deeper
into this: To the left, we can see the SAP standard application.
As you can see, it has a lot of files and resources in it.And it has its own Component.js file.

00:09:44

To the right, we can see the extended custom application, and this one is a lean project that
has only a Component.js.And, in addition, we will add additional resources as we extend it.

00:09:58

The Component.js as we described consists of three parts.The load part that loads the
parent application, the declaration of the project as an extension project,
and the customizing configuration part, which aggregates the various UI elements that we
decide to extend.How do we know exactly what is available for extension?
So SAPUI5 applications and Fiori applications in general are based on the MVC
architecture, or the data model-view-controller application.
And we can extend each and every one of these components separately and
independently.The views describe the various screens in our Fiori application.
And is usually written in XML format, but are also available in JavaScript, HTML, and JSON
formats.For view extensions, SAPUI5 provides the notion of extension points.
And these extension points are basically tags that are inserted in key areas inside the
view.And enable the customizing application or the customer that customizes the
application

00:10:10
00:10:27
00:10:39
00:10:50
00:11:03

00:11:16
00:11:29

to inject his own custom UI controls in that specific point. In runtime, SAPUI5 merges these
custom UI controls into the extension point.
A similar concept exists for the controllers: each view has its corresponding controller, which
is basically a JavaScript object.The controller is there to basically control the data flow and
manipulation in the views.

00:11:50

For controller extension, a developer can add what's called a UI controller hook.And this
basically a strategic hook where we can customize and inject our own JavaScript code and
logic

00:12:09

in key areas in the application.The format of these hooks are basically a declaration of a
JavaScript method
that the customizing party would implement and during runtime, the SAPUI5 runtime, would
merge this code into the standard controller.
Now SAP provides a long list of extension points both for views and for controllers available
in the standard Fiori apps.This can be seen in the SAP Fiori apps reference library.
The library, which is available in this link, has a long list of the available Fiori applications,
where each application has a detailed...
has a detailed description of its technical information and the available extension points that
are provided within them.
So, for instance, let's check out the My Leave Requests Fiori application.Now we can see
the various product features
and other information about required back ends, And under the Implementation Information,
we can see an Extensibility tab here.
With a list of the extension points that are inserted into the application's views, which enable
us to inject our own custom UI controls.
And a list of the UI controller hooks or the methods that we can implement in our custom
controller, and inject the logic into the standard controller.
OK. So in addition to the predefined extension points that SAP provides in the Fiori
application within the views or the controllers, views and controllers can also be extended in
other default manners.

00:12:17
00:12:33
00:12:49
00:13:04
00:13:19
00:13:38
00:13:49
00:13:59
00:14:17

00:14:32
00:14:46

A view can be modified, which means that we can basically hide any UI control that is
available within this view.Another option is to totally replace the view.
So if no extension point is available or if it's not sufficient and it's not sufficient to hide a
view, we can totally override one of the views and replace it with our own custom view.

00:14:59
00:15:13
00:15:26

Whether we totally rewrite it from scratch, replacing let's say a form with a table, or copying
the original one and adding our own custom controls to it.
For controller extensions, in addition to the controller hooks, we can add custom functions to
our controllers. So if, for instance, we add a button,
a button to one of the views, we would like to implement a new event handler function, and
we would add it to the customized controller.In addition, we could always override the
methods that are available within the standard controller.

00:15:44

The four lifecycle methods that are available at each controller would be invoked if we
implement one of them either after or before the corresponding lifecycle methods on a
standard controller.

00:16:02

And any other method that we override or implement in our custom controller would totally
override the corresponding method in the standard controller.
So what would this look like, for example, in a Web IDE project? On the left, we can see the
extension project, which is now a bit less lightweight
and has some customization code with some custom views in the custom controller.On the
right, we can see the extension project's Component.js file.
So in this example, we can see that we've replaced the view.And this is mentioned here
under the customizing aggregation,
where the view with the ID S3 in the standard app is replaced by the S3Custom.view We've
also implemented a view extension point.
So the extension point with the ID extContactDataInfo, which is part of the S4 view would be
replaced or merged with the content that is available in the S4_extContactDataInfoCustom
view,

00:16:18
00:16:29
00:16:40
00:16:49
00:17:05

00:17:26
00:17:40

00:18:02

which is part of the extension project.For view modifications, we've described that the
modification means basically hiding any available UI control in that view.
So for the view named S2, we've hidden or made invisible one of the UI controllers with an
ID called page.And in addition, we've applied some controller extensions overriding or
merging the custom provided controllers.
OK. So that's it for this introduction.Join me for the next unit, where I will demo how to
extend Fiori apps with the SAP Web IDE.

Week 06 Unit 02
00:00:11
00:00:22
00:00:32
00:00:46
00:00:56
00:01:06

00:01:21
00:01:35

00:01:48
00:01:59
00:02:15
00:02:34
00:02:43
00:02:55
00:03:07
00:03:21
00:03:34
00:03:44
00:03:59

00:04:13
00:04:25

00:04:41
00:04:50

Hi, welcome to Unit 2 of Week 6 in the 2016 Build Your Own Fiori App openSAP course.In
the previous unit, I introduced the SAPUI5 concepts for extending Fiori applications.
In this unit, I want to show you how this extensibility is supported in the SAP Web IDE.For
this purpose, we will use the Fiori Cloud, demo edition.
Now our Fiori demo edition is made available through a dedicated HANA Cloud platform
account.The Fiori demo contains many SAP Fiori applications.
But they are not hosted or part of my account.But rather they are hosted on a provider
account in a central place and made available to all the Fiori cloud accounts
through what we call a subscription model.So this means that when we launch the
application from our own Fiori launchpad on the Fiori cloud account,
the code is actually being launched from the provider account.But when we create an
extension project for these applications, the extension project is opened in our SAP Web
IDE.
And the extension project code is persisted, deployed and maintained on our Fiori cloud
demo account.OK. So let's see this in action.
So I can start to create an extension project from the homepage of my Fiori launchpad By
clicking on the Develop Apps option, I can choose each and every one of these applications
and create an extension project from them with the Web IDE.Alternatively, I can open a
specific application and create an extension project from within this context.
So let's do that.I'm going to confirm and launch the Web IDE with this suggested project
name.
And now the Web IDE is generating the needed resources for my extension project and
creating a dedicated extension project for the application that I chose.
Great. The extension project is created.And as we mentioned in the previous unit, you can
see that it's a very lean project and it contains very few resources.
And one of them, or the major one of them, is the Component.js file, which contains the
various parts that we discussed declaring the extension project,
referencing the parent application, which will be loaded during runtime, and aggregating the
list of extensions or customizations that we will be creating for this application,
which will be merged into the application in runtime.Now when we launch the application, as
I did, the parent/standard application is launched from the provider account.
For now, no extensions are available, so none are merged and the application is launched
as
Now the SAP Web IDE provides several tools and visual wizards for creating
extensions.One of them is the extensibility pane.
The extensibility pane can open and run the application either with real data coming from
the back end or if such an OData service is not available, we can run it with mock data.
The extensibility pane has two modes - a preview mode that enables us to navigate through
the various screens of the application.and an extensibility mode, which enables us to hover
over the various UI controls
and pick and choose the ones we want to hide or extend.In addition, the extensibility pane
contains an outline pane on the right side.
The outline pane shows the structure of the application's UI elements.We can filter these UI
elements according to the ones that can be extended and to the ones that have already
been extended.
And let's see how that works.So I select the project that I want to open in the extensibility
pane,
which is a project that I created, and then I click on Tools and Extensibility Pane.Or I can
run it alternatively with mock data.

00:04:58
00:05:20
00:05:30
00:05:54
00:06:15
00:06:25
00:06:34
00:06:52
00:07:00
00:07:09

I'll be running it with the real data.The extensibility pane is opened initially in a preview
mode...
...where I can navigate through the various options in the application.And choose the
screens that I want to extend.
And then I can switch to the extensibility mode.This might require a refresh.
OK. Let's try that again, let's open the extensibility pane.OK. And the application is launched
in preview mode.
I switch to the extensibility mode, and there it Now I can hover over each of the elements
and choose to either hide them,
or extend if they are extended.We can see here these icons represent the view extensibility
points
where we can extend the view and integrate our own custom UI controls.Now let's use the
outline pane to hide the date of birth property that is here on the contact info
and which is not suitable for my scenario.So I will go to the ContactDetails view
and drill down to the specific elements that I want to hide.And those would be the date of
birth label and the data of birth input.
I right-click on the label and choose to hide it.Then I would hide the birth date input as well.

00:07:24

Great. Now I chose to refresh the application and we can see that the date of birth label and
input fields have been removed from this view.OK, now I would like to completely replace
the view that represents the list item here and the master list on the left.

00:07:46

Now if I switch back to extensibility mode, I can see that this is the S2 view.So I can choose
this one, right-click it,
and then choose how I want to replace it.Either replace it by a totally empty view, meaning
that I would create the view from scratch,
or I would use the copy of the original one and just add to it. I will choose this option.Now
once this is done, the extension has been created and I can choose to open the extension
code.

00:08:00
00:08:13

00:08:33
00:08:41
00:08:52
00:08:58
00:09:07
00:09:13
00:09:37
00:09:44
00:09:55
00:10:02
00:10:11
00:10:21
00:10:30

So as you can see, I'm moving back and forth from the wizards and the editors to the
code.So they never block each other.
So this is the code of my extended view.And if we look at the Component.js, we can see
that the extensions that I have performed up to
are being aggregated here under the customizing property.So we can see the
viewModifications that I created,
hiding the birthDateLabel and Input, and the replacement of the S2 view.
Now I can code in the changes that I want here, but I can also choose to start working with
the Layout Editor
because I'm sort of lazy and I don't want to code.So I'll right-click on the view, select Open
With Layout Editor.
Great, now the Layout Editor is opened.I can see on the left side I have a palette with all the
available SAPUI5 controls
that I can drag and drop into the main canvas, into the main view.Now before I start
working, I want to make sure that the view has a defined data set.
And I see that in this case, it doesn't.Meaning that I need to bind the data object that I want
to work with...
(sorry, let's... the XML View)...so I choose the XML View, and then I bind the data object
that I want to work with.
So in this case, it's the ContactCollection.Once I've done that, I can bind the various
properties that are part of this collection
into the UI controls of this view.Now... I want to add an additional attribute,
describing the functionality of the contact that is listed.So I can filter the various SAPUI5
elements here on the palette,

00:10:43
00:10:54
00:11:02
00:11:11
00:11:24
00:11:38
00:11:48
00:11:56
00:12:09

00:12:26
00:12:35
00:12:45

00:13:00
00:13:10
00:13:20
00:13:28
00:13:42
00:13:55
00:14:03
00:14:11
00:14:23
00:14:31
00:14:38
00:14:49
00:14:56
00:15:11

and I can find the object attribute that I want to Now by pressing the Control button, I can
see the places that this UI control can be added to.
I'll drag and drop it here, above the company attribute.And now here on the right side, I
have the Properties pane,
where I can edit the various properties of this UI control.So first of all, I will erase the default
text
and then bind the data that I want to show here.Now the data is part of the properties which
are available on the ContactCollection data set.
So I want to show the business function of the contact user that is listed in this contact
list.So I will choose function... and confirm it.
Great, and now this is done, I can always switch back and forth from this place to the code,
from the editor to the code.
And we can see that the code has been generated here according to what I created in the
UI editor.
Now if I refresh the application, we can see hopefully that my extensions have been applied
to the application.
So you can notice that on the contact details, the birthday property has been removed, or
hidden.And in the list item, you can see that the new function property has been added to
each and every one of the list items.
Great. Now Web IDE provides another way for visual extensibility, and this is by means of
wizards.
So all the possibilities that were enabled for me for extensibility using the extensibility pane
are available here in the wizards as well.
But in addition, I can also override the resource texts that are available in the standard
application, and I could also implement the various UI control hooks that are available in the
application.
Okay, so let's try this out.What I want to do here is open the wizard by selecting the project
and right-clicking,
and then selecting New and Extension.Now the extension wizard is open and I can choose
the type of extension that I want to implement.
So I'll confirm that this is a project that indeed I want to create an extension for.And I will
start by extending the view.
What I actually want to achieve now is to add a new capability to...to the creation and
editing form of a contact.
Meaning that I want the ability to add a new button to this Add Photo functionality.So if I look
in the Fiori App Library documentation
and search for the my contacts application, I can see the list of available extension points
View extension points and Controller extension points that are part of this standard Fiori
application.So looking at the View extension points,
I can see that the S4 view has an extContactPicture extension point that allows me to
remove and add UI controls into the photo area.
So this is exactly the extension point that we want to extend.I will choose the Extend View
Fragment option, and click Next.
And now I will choose the view that I want to extend.So that's going to be the S4 view.
And once I've selected that, I need to select the extension point that I want to extend.And
that is the extContactPicture, as we've seen in the Fiori Apps Library documentation.
I'll select that, click Next, confirm.And now the extension has been generated,
and also added again to the extension aggregation in the Component.js file.Now again I can
open the extended view resource with the Code Editor,
or alternatively I can continue working with the Layout Editor.And this is what I'm going to
do. So I'm going to open this extension view with the Layout Editor.

00:15:22
00:15:33
00:15:41
00:15:51
00:16:04
00:16:13
00:16:29

And now what I want to do is add a button. Now I can find it here.I'm going to drag it right
over there.
Great. Now I don't want to use the text that's available here.But instead, I want to show an
icon.
So I have an icon option here.And once I select the list of options here, I can select a
desired icon.
So I'm looking for a camera icon because I want to enable some futuristic mobile
capabilities.And I'll select this icon, and great, it's added.
Now from this point, I want to switch back to the code.And I basically want to add an event
handler
to take care of a select or a click or a tap event that happens on this button.So I can use the
auto-complete here by clicking Control and Space.
So this gives me all the options that I have available for properties for this SAPUI5 control,
the button control.Great. So I've found the tap event, and now I want to create an event
handler method for it.

00:16:44

So let's call it onCameraTap.Great.

00:16:53

00:17:13

So we've completed the extension of this view, but now we need to implement the
onCameraTap event handler method.
So we'll do that by extending the corresponding view, this being the S4 view.So let's use the
wizard again.
Select the project, click New, Extension.Confirm the selected project.

00:17:19

And then select the Extend Controller option.Select the relevant controller, that being S4.

00:17:29

And then choose to either create an empty custom controller, or a copy of the original one.

00:17:37

The difference is that creating a copy would basically override the behavior of the standard
corresponding controller.So we don't want that. We just want to add one additional event
handling method.

00:17:52

So we'll create an empty controller.Now the controller code is being generated.

00:18:03

A new extension is added to the extension aggregation.And we will add our custom code
here.
The function we want to implement is the onCameraTap event handler.Now I've prepared
the code in advance, so I just copy it from here.
Basically, what we're going to do is we're just going to show a message for now, because
we're not going to implement any business logic here.
So we're going to add the sap.m.MessageBox.Add the required reference to it, and that's it.

00:17:04

00:18:13
00:18:29
00:18:44
00:18:54
00:19:22
00:19:33
00:19:48
00:20:00
00:20:08

Now we need to refresh the application.And preview and make sure that the changes that
we applied, the extensions, are working correctly.
Now once that's done, I'm pretty much over with my extensions.I can go ahead and
redeploy the application back to the HANA Cloud Platform account.
Then register it as a new tile to my Fiori launchpad.And just consume this extended
application while the extensions are persisted in the extension project,
and the standard application remains unchanged.Okay, so I'll navigate to the screen that I
extended. And here it is.
We have a new button and the message announcing that this functionality will be available
soon.Great, we're done.
Thanks a lot for listening, and we'll see you again in the next unit. Goodbye.

Week 06 Unit 03
00:00:11

Hi, and welcome to Unit 3 of Week 6 in the 2016 Build Your Own Fiori App openSAP
course.In this unit, I want to talk about the various tools and services that SAP provides to
enable Fiori apps for mobile scenarios.

00:00:27

So, Fiori content can run on any device because of its responsive UIs.The UI responds to
the device resolution and displays data in a way that makes sense on that device.
SAPUI5 Fiori apps are browser-based applications that usually run on browsers.When
running from a mobile browser, the app can't leverage mobile capabilities,
like the camera, contact list, offline, or push notifications.And this is because the JavaScript
coding has no access to the mobile device's operating system APIs when running from a
browser.

00:00:39
00:00:48

00:01:01
00:01:14

00:01:27
00:01:39

00:01:51
00:02:03
00:02:16
00:02:29
00:02:37

00:02:49
00:02:56

00:03:10
00:03:18
00:03:29
00:03:38
00:03:50
00:04:02
00:04:14

So it's necessary to run the applications in a container that acts both as a browser that can
render the SAPUI5 resources, and as a bridge interface to access native APIs.
To support that, we need the ability to first add mobile-specific code to Fiori applications,
and second, have a way to consume Fiori content so that I can make use of the native
capabilities
that aren't available through a mobile browser.Now the SAP Mobile Platform SDK helps us
solve this "bridge" problem.
The SDK is a set of libraries for native development for iOS, Windows, and Android.It
contains a set of dedicated enterprise-ready plug-ins for hybrid apps known as Kapsel SDK.
Kapsel enhances a popular open-source development framework for mobile apps named
Apache Cordova, which enables access to mobile functionality from the JavaScript code.
Together, Cordova and Kapsel libraries enable the bridge for Fiori apps to the device's
native APIs.The Kapsel plug-ins are integrated with the SAP Mobile Platform
to support enterprise features like push, offline, secure onboarding, and others.So this
means that we can define three types of mobile apps.
On the one hand, our Fiori apps are mobile Web-based, developed in UI5, and consumed
with a Web browser on any device.
That's responsive, but it doesn't leverage any of the native capabilities that I have on my
mobile phone.On the other hand, we could do full-blown native development with our SAP
Mobile SDK.
While this provides for good performance, it requires a lot of in-depth knowledge to develop
on these native platforms.
And you would need to write it separately for each and every platform in its own native
language.So in the middle, a nice in-between hybrid approach takes the ease of mobile
Web,
but gives us the access to native device functionality using Cordova and Kapsel enterprise
capabilities.
So for developing hybrid Fiori apps, we will be using the SAP Web IDE and the Hybrid
Application Toolkit, which is an add-on to SAP Web IDE,
enabling developers to enhance and test Fiori Web apps with mobile device functionalities
and create hybrid applications.
The add-on consists of three separate components.First is the SAP Web IDE plug-in, which
adds development features for hybrid apps in the Web
The second component is the Hybrid App Toolkit Connector, which is basically a local
server process that enables Web IDE to connect and perform a local build on our PC
by pulling down the Web IDE project resources and adding the Kapsel and Cordova plugins that we add to our applications and bundling them up together.
The third component is the Companion application.It's a native mobile application that
enables easy testing of hybrid apps from the Web IDE directly on our mobile device.

00:04:30
00:04:40
00:04:51

00:05:04
00:05:18
00:05:29

00:05:41
00:05:55
00:06:06
00:06:15
00:06:23
00:06:35
00:06:44
00:06:54
00:07:04
00:07:19
00:07:29
00:07:38
00:07:49
00:07:57
00:08:06
00:08:16
00:08:25
00:08:30
00:08:40

Once the Hybrid Application Toolkit otherwise known as HAT plug-in is enabled on our
Web I get a lot of useful features for hybrid app development.
I can create a new hybrid app project by using a set of Kapsel Fiori app templates for
generating project code that is automatically enabled for mobile capability APIs.
I can also create a new hybrid application as an extension of an existing project either
pulled down from an ABAP repository, a HANA Cloud Platform repository, or from my local
workspace.
I can also convert an existing project into a Kapsel project and easily add mobile features to
Now this last feature is a beta feature, which is available for now on the trial landscape.
Enabling Hybrid Application Toolkit adds other development features like code completion
and API reference to Cordova and Kapsel APIs.
Another feature is a device configuration option which is added to my project settings, which
enables me to configure the application ID, the devices I want to support in my application,
and the list of Cordova and Kapsel plug-ins that I use in the project.This is required when I
want to build my hybrid app into a deployable native application.
Another feature that is enabled by HAT is the Cordova Facade live preview feature.It's a
runtime container that emulates many of the Cordova and Kapsel plug-ins
so that I can easily preview and test native capabilities directly from the Web IDE without
actually building the application.
If you want to build a hybrid app into a standalone native deployable, it can be done locally
from the Web IDE.
The Hybrid Application Toolkit Connector downloads the Fiori resources with the included
Kapsel plug-ins and creates the deployable.
The third component we mentioned is the Companion application.The Companion
application is a native mobile app and a Cordova, Kapsel runtime container.
It enables a live preview of the app created with Web IDE.I can use it to preview my hybrid
application on my device
or on a device simulator instead of wasting time building it.You can download the
Companion app directly from any of the app stores.
To test the hybrid app, you scan the QR code directly from the Web IDE preview tab and
your hybrid application is loaded right into the Companion app on your device.
OK, now that we've developed and tested a hybrid application, how would we consume it?
Using the browser as we said is an option,
but we won't be leveraging any native capabilities.Also, I could register the hybrid
application to my Fiori launchpad.
And instead of using the mobile browser, I could use the SAP Fiori Client, which allows me
to use the native capabilities embedded in my Fiori apps.
And we'll be talking about that a bit later.A third option would be to use the Hybrid
Application Toolkit with Kapsel SDK
and to build a standalone native application from my hybrid app.I could leverage enterprise
mobile capabilities from SAP Mobile Platform
and roll out my hybrid app using the SAP Mobile Place app store.We'll elaborate on these
options now.
OK, so let's discuss the SAP Fiori Client.The Fiori Client is a mobile app based on Kapsel
and Cordova APIs,
and is intended for consuming a Fiori launchpad.It's available for download in the various
app stores,
and once I've downloaded it, I set it up by configuring the URL of my intended Fiori
launchpad.There are many reasons for doing so.
The Fiori Client, first of all, is based on Cordova and Kapsel plug-ins and services as a
container which acts both as a browser to run and render my Fiori resources

00:08:50
00:09:00
00:09:10
00:09:19

00:09:33
00:09:45
00:09:55
00:10:07
00:10:19

00:10:33
00:10:43
00:10:56

and as a bridge interface to access the native APIs of my device.It improves the
performance of Fiori content by caching the resources on my mobile device
and reducing redundant calls to the Fiori front- end server.Users can clear the cache
whenever they need
Also, the Fiori Client provides an improved in- place viewer for attachments that are
available in the various Fiori applications.
The SAP Mobile SDK includes an executable build script for developers to create a
customized Fiori Client application.You can customize the application's icon, title, and the
initialization code,
and add other customization capabilities.OK, now if we want to extend the mobile offering of
my Fiori app,
I can use the SAP Mobile Platform, the on- premise version, and its cloud version, the
HANA Cloud Platform mobile services, also known as HCPms,
which is part of the services offered by the HANA Cloud Platform.Registering my hybrid
application to HCPms gives my app enterprise-level capabilities.
I can securely onboard my users and authenticate them against my back ends.I can add
push notifications and offline capabilities to my hybrid application as well.
And I can also view usage analytics, which enable me to learn and understand how users
are using my application.I can centrally enable or disable mobile capabilities in my apps
from the HCPms,
and I have the ability to update the version of my application.So once I build and deploy a
new version of my application and deploy it to HCPms,
the new version can be automatically pushed into the user's devices.An additional solution
is SAP Mobile Secure.
It's a cloud-based mobility management platform for securing and managing mobile
devices, apps, and content.It includes a bundle of solutions like mobile device management,

00:11:07

which is an MDM solution for securing and managing your company's mobile devices.It also
includes the SAP Mobile Documents for securing mobile content and file management.

00:11:19

And the SAP Mobile Place: a secure enterprise app store which IT administrators use to
publish, manage, and monitor mobile apps,
and end users use it to discover and download relevant apps published by their company.In
addition, we also have the Keynote Mobile Testing integration with Mobile Secure.

00:11:28

00:11:40
00:11:55
00:12:06
00:12:13
00:12:22
00:12:37
00:12:48
00:12:55

Keynote is a cloud-based solution that enables testing and previewing of hybrid and native
applications on a wide array of smartphones and tablet emulators.
Now, to put all these pieces together, SAP now offers the Fiori Mobile Service.This is the
new cloud offering that harmonizes all the various mobile services and components
under one admin environment and user experience.It's offered as a service on HANA Cloud
Platform
and leverages all the underlying technologies, like the SAP Mobile Secure, the HCPms
Runtime, the Keynote, and others.
They're all used for creating a coherent workflow for mobilizing Fiori content without the
need to interact with several different products, which may require a different set of skills.
So Fiori Mobile Service ties the various mobile services together.A developer builds a hybrid
application with the Web IDE and the Hybrid Application Toolkit,
and deploys it to the Fiori front-end server.The Fiori Mobile Service connects to the frontend server,
using the Cloud Connector if it's on-premise, or directly if it's deployed to HANA Cloud
Platform, and pulls the Fiori content from there.

00:13:05

Now admins can wrap a whole Fiori launchpad with all of its Fiori apps, or just wrap a
subset of these apps to create a unique native application around the specific business
scenario.

00:13:18

Then admins can go on to customize and brand the new application by adding a splash
screen or an icon,
and add additional mobile features like push notifications and offline OData, which are
enabled by the underlying HCPms Runtime engine.
Then admins can go on and manage data security, user authentication, and single sign-on
on the device and on the application through Mobile Secure.
We can use the Keynote integration for testing the application on various device
simulators.And finally, we can publish the app to the company's Mobile Store and roll it out
to our users.

00:13:25
00:13:36
00:13:48

00:14:02
00:14:10
00:14:22
00:14:33
00:14:41
00:14:52

End users can discover the app in the Mobile Store and install it to their devices without any
further configuration.
And then admins can finally monitor and get insights on usage statistics.So it sort of puts
everything together in a simple workflow that walks you through the entire lifecycle
of rolling out a native application as an IT admin or publisher and discovering and
consuming these applications as an end user.
OK, so we went through a lot of topics relating to mobilizing Fiori content.For a deeper dive
and real hands-on experience,
I encourage you to check out the openSAP course called Developing Mobile Apps with SAP
HANA Cloud Platform.It's available in the link here on the slide.
Thank you for watching, and see you in the next unit.

Week 06 Unit 04
00:00:11

Hi, and welcome to Unit 4 of Week 6 in the 2016 Build Your Own Fiori App openSAP
course.In the previous unit, I described the various tools and services that SAP provides to
enable Fiori apps for mobile scenarios.

00:00:26

In this unit, we'd like to showcase some of these tools and see how, quite easily, we can
add native capabilities to our Fiori apps.
So what we want to do initially is develop a hybrid application using the SAP Web IDE
Hybrid Application Toolkit plug-in.Now we're going to use the same application that we used
in Unit 2 of this week,

00:00:37

00:00:53
00:01:02
00:01:11
00:01:24
00:01:34
00:01:43
00:01:59
00:02:14
00:02:24

which was the CRM My Contacts.If you can remember, we extended that standard
application and we added a button.
We didn't implement the event handler of the button, and now we want to add mobile
capabilities to that button
and enable uploading of a picture for the contact profile.Once we've done that, we'll test and
preview the results using the Cortova Facade
and the Companion app, which we will download from the app store.Then we will deploy the
applications to the SAP HANA Cloud Platform,
register it to our Fiori Cloud edition, and finally consume it using the SAP Fiori Client.
Okay, so let's start.So we have the application that we developed last time in Unit 2 of this
week.
Now in order to start developing hybrid applications, we need to enable the Hybrid
Application plug-in for the SAP Web IDE.This is done through the Tools and Preferences.
Now mine is already enabled, but it's available under Optional Plugins, where you need to
check the Hybrid Application Toolkit, and enable it,
save, and then refresh the browser or the Web IDE for the changes to come into effect.Now
once you've done that, you get this new entry here in the Preferences for Hybrid Application
Toolkit settings.

00:02:37

What you can do here basically is you can test the connection to your Hybrid Application
Toolkit Connector.The Connector, as we described in the previous unit, enables us to build
a deployable from our hybrid application

00:02:52

and basically connects our Web IDE account to our local PC environment and assists us in
pulling down the resources of our Fiori project,
combining it with the resources from our Cordova and Kapsel plug-ins that we included in
our project into one deployable.Now in addition, in order to enjoy the Cordova Facade
Preview feature, we need to enable it here, which I just did.

00:03:03

00:03:21
00:03:34
00:03:48

00:04:03
00:04:17

00:04:38
00:04:51

Okay, great. Now once this is enabled, we have several capabilities that are enabled in our
environment for supporting us in hybrid application development.
One of them is a set of new Kapsel project templates.So if I create a new project from a
template, I can filter that to see the SAPUI5 Mobile Applications.
And I have several templates available here for generating an application from a
template.Now in addition, we mentioned that there are two new features, which are currently
available on a trial landscape.
These features enable us to create new hybrid mobile projects, either from an existing
project, meaning convert the project to enable mobile capabilities in it,
or to create a hybrid mobile application project as an extension of an existing SAP standard
application.Now for this demo, we've converted our project into a hybrid application,
and currently I've added no hybrid capabilities, but once we preview this, you can see that
the application displays the list of contacts...
let's change the resolution here...displays the list of contacts in my account.

00:04:57

And what we want to do is we want to use the button that we've added to the profile form for
creating and editing the profile. We've added a button that currently displays a Coming
Soon message for the capability.

00:05:15

Okay.So let's add this mobile functionality now to the event handler that we've added to the
S4Custom.controller.
Now I've prepared this code in advance, so I'll copy & paste this into the proper method.

00:05:30
00:05:41
00:05:59

Now what this code does, basically, is using the Cordova and Kapsel API, it uses the
camera capabilities to get a picture directly from the mobile device.
Now we can define the source and the type of picture. Here, we've defined the camera as
the source of the picture.However, thanks to the code completion capabilities that were
added to our environment through enabling the Hybrid Application Toolkit,

00:06:20

I can view the various Cordova and Kapsel APIs that are available in my workspace.So here
we see the camera and the battery APIs, the compass, connection, contacts, device,
etcetera.

00:06:34

I can see them in the code completion, and also in the API Reference here on the right side
panel.Okay, so once my mobile code is ready,
I want to test my changes, so let's refresh the application.And navigate to the screen where
we have the button.
Great. And now the Cordova Facade preview emulates the abilities of a mobile phone.

00:06:49
00:07:05
00:07:16
00:07:30
00:07:37
00:07:54

00:08:10
00:08:20
00:08:33
00:08:45
00:08:57
00:09:04

So I'll take the picture using the camera of my laptop.And the picture is persisted into the
application.
Great, so the preview is working, but now I want to actually test this using my mobile device.
So we've mentioned the Companion app that is available to download from the app
stores.Now I'm going to download this app using my Samsung S5.
So I'm going to open the Google Play Store, and I'm going to look for the Hybrid App
Toolkit.The first option is the SAP Hybrid App Toolkit Companion application, so I'm going to
install this.
And once it's ready, I can scan the QR code that is available here in the preview tab of my
Web IDE.
Great, so let's open the application.And when the application first loads, it offers me the
chance to set up a passcode for security reasons.
I'm going to disable this passcode for now and move directly to the application.Once I
double-click it, I get the top-level menu options,
which enable me to reset the application or scan in the QR code of the application that I
want to preview.So let's scan the QR code here.
There we go.Now I'm going to put in my SCN credentials.

00:09:55

The same credentials I use to log in to my HANA Cloud Platform account.Okay, now it's
loading the application resources right into the Companion app.
And there we go. Now the My Contacts application is running within the Companion
app.And I want to test the new native functionality that I've added.
So I'll navigate to the screen. I'll open one of the contacts.Open it for edit... and press the
button.
And take a picture of chocolate Santa.Very well.

00:10:08

Great, now I'm going to save the picture.And it's uploaded into my device...

00:10:16

into my application, sorry.Now I'm going to save this and refresh.

00:10:36

Okay. Now if I introduce new changes to my code, for instance, I want to change the source
from which the picture would be coming in my device,
I can change it here using the autocomplete, and instead of the camera, select the
PHOTOLIBRARY.I can save the changes, and then just refresh my application...
or just rescan.There we go. Now it's loading.

00:09:31
00:09:42

00:10:51
00:11:13

00:11:43
00:11:52

Okay, so the picture has been loaded last time, but now we want to create a new profile,
and the picture would be coming from my gallery.
So if I open this, I access the pictures in my gallery, and upload the picture of my rented car.

00:12:01

Or the headlight on my rented car.And save this. Okay.

00:12:08

So the picture has been uploaded to the application.Now let's switch this back to CAMERA.

00:12:20

Now I'm happy with my changes.As we described last time, we can now build the
application into a deployable
and roll it out to our users using the SAP Mobile Store.or HCPms to update the version of
the application if it already exists on our user's phone.
But we also mentioned that we can deploy it to the Fiori launchpad, or to our Fiori account
and then consume it through the Fiori Client, and this is what I want to do now.
So what we're going to do is we're going to deploy this application first to the HANA Cloud
Platform.Put in my credentials.
I'm going to confirm that this is the latest version of my application and I want it
activated.Now the application is being deployed to the Cloud Platform HTML5 application
repository.

00:12:29
00:12:42
00:12:53
00:13:11

00:13:31
00:14:03

00:14:23
00:14:38
00:14:50
00:15:05
00:15:15
00:15:30
00:15:44
00:16:02

00:16:18
00:16:30

A dedicated versionized Git repository is allocated for this specific application.And once this
is done, I can go ahead and register it directly from the Web IDE into my Fiori cloud.
Okay, deployment is done, and now it's offering me to register to the SAP Fiori
launchpad.So this is the general information of my application. Let's add a description:
Mobile Contacts.
And now I'm going to design the tile for my application.So I'm going to choose a static tile.
I'm going to call it Mobile Contacts.
No subtitle this time.And choose an icon.
And then assign it to any one of the catalogs and groups that is available from which I can
choose. I've only defined two in my Fiori cloud.So I'm going to register it and click Finish.
Great. So now this is finished.And now we want to view our launchpad through the mobile
phone's Fiori Client.
Because we can consume the Fiori from our mobile browser, but then we won't be able to
activate or use any of the native capabilities that are embedded in our Fiori applications.
So this is my Fiori Client, which I downloaded from the app store.And I can see that my
application has already been added because I've just registered it.
So let's open it.So now all the resources of the application are being pulled into the Fiori
Client, which is caching it.
I can always remove the cache by double- clicking on the header.And then the Fiori Client
menu is opened, and I can refresh the view to bring in the resources freshly from the server.
Okay, so let's check our mobile capability.Yep, and the camera is opening. And let's take
another look at Santa.
Good.And yep, the picture is uploaded to the application.

00:16:44

Okay, so for a deeper dive and a hands-on session experience on Fiori mobility, I do
encourage you to check out the openSAP course called Developing Mobile Apps with SAP
HANA Cloud Platform.

00:17:02

Now it's available already on the openSAP Web site in this link, so check it out.And thank
you for watching, and see you next time in the next unit.

Week 06 Unit 05
00:00:11

Hi, and welcome to Unit 5 of Week 6 in the 2016 Build Your Own Fiori App openSAP
course.In this unit, I would like to introduce the concept of HANA Cloud Platform as an
extension platform,

00:00:23

and showcase the scenario of creating an extension for SuccessFactors, the SAP HCM
solution in the cloud.Cloud-based solutions probably won't have every single functionality
feature built into them,

00:00:41

and probably won't fit the exact business needs of all of their users and customers.The
concept of cloud extensions can fill in these gaps.
The HANA Cloud Platform is SAP's in-memory platform as a service, and is the extension
platform for the various SAP cloud offerings like Ariba, S/4HANA, SuccessFactors, and
others.

00:00:51

00:01:03
00:01:13
00:01:23
00:01:35
00:01:47

00:02:00
00:02:10

It enables customers and partners to build new applications and introduce new functionality
while integrating with the cloud solution and other back-end systems.
The extension is then seamlessly integrated into the cloud solution.SuccessFactors is
SAP's cloud solution for
HANA Cloud Platform extensions enable customers and partners to introduce new HCM
and HR-related capabilities integrated seamlessly into SuccessFactors.
In the overall extension scenario, HANA Cloud Platform plays the role of a dedicated and
isolated secure application container.It provides API-level access to the extended solution
and other cloud or on-premise SAP or third-party back-end systems.It provides a
development and runtime environment together with lifecycle management tools for the
extension applications.
for Java and SAPUI5-based Fiori applications.The extension applications leverage the
various HANA Cloud Platform services,
such as persistency, in-memory computing, analytics, authorizations, and others.And in
addition, single sign-on is enabled with the extended cloud solution through the integration
with its identity provider.

00:02:27

Integrating the extension into SuccessFactors is enabled by the HANA Cloud Portal service,
available on HANA Cloud Platform.The portal is a service for creating external and internalfacing business sites,

00:02:39

and for the extension scenario, is embedded into the SuccessFactors solution.Cloud Portal
supports extensions with a seamless UI integration experience through the dynamic shell
alignment.

00:02:51

The extension inherits the SuccessFactors header and footer and the selected
SuccessFactors theme.It also includes the Extension Designer for designing the layout and
content of your extension.

00:03:04

The Extension Management console is also included to manage the extension lifecycle,
resources, and usage analytics.And finally the Extension Marketplace, which is an
extension catalog integrated in SuccessFactors,

00:03:19

listing the available extensions provided by SAP and SAP partners.In this unit, I want to
showcase the creation of a SuccessFactors extension site.
For that, I will be using a preconfigured HANA Cloud Platform extension landscape, which
consists of the following components:
a SuccessFactors company account provisioned with HANA Cloud Platform extension
account, a trust set up between the HANA Cloud Platform account and the SuccessFactors
identity provider,

00:03:31
00:03:39

00:03:51
00:04:02

and connectivity to SuccessFactors OData endpoints.For further information about the

available HCM OData endpoints,
you can follow the link here on the slides to learn more about the endpoints, which are
available in your data center.As you can see, each data center has the endpoint URL for the
OData, and we're going to use this in the demo.

00:04:22

So what we're going to do in this demo is I'm going to generate a Fiori application using the
SAP Web IDE, we're going to consume OData coming from SuccessFactors in this
application,

00:04:34

then we're going to deploy the application to the Cloud Platform, we're going to design the
extension and add the application to it,
and finally integrate the extension into the SuccessFactors navigation shell.The HANA
Cloud Platform also supports creating extensions with Java code and by deploying a Java
Web application,

00:04:41

00:04:55
00:05:07

or a combination of two where we can have our Java logic deployed to the Cloud Platform,
and connecting to the UIs that we create with the SAP Web IDE.
Okay, so let's start.So my entry point is the HANA Cloud Platform account

00:05:16

which is associated with the SuccessFactors company account in this extension

landscape.Now the first thing I want to do is configure the connection between my Cloud
Platform account

00:05:29

to the SuccessFactors OData endpoint.So for this purpose, I will import a destination file,
which I've prepared in advance.
The file points to one of the OData URL endpoints.It describes the authentication method
that I'm going to use together with the user and password credentials.
And the various additional properties that are required for configuring this connectivity in the
Web IDE as an OData provider.Great, so let's save this destination.
And... let's open the Web IDE to generate the application.Now what we want to do is we
want to create a Fiori-like application
that consumes OData coming from SuccessFactors, and in this case, we want to use data
about users in my team and display their data.
And then add that as an extension application to SuccessFactors.So I'm going to create the
project, the application,
by right-clicking on the root folder Local, clicking New,

00:05:42
00:05:57
00:06:14
00:06:27
00:06:38
00:06:46
00:06:53
00:07:09
00:07:19
00:07:29
00:07:43
00:07:55
00:08:03
00:08:16
00:08:25
00:08:35
00:08:54
00:09:04
00:09:21
00:09:31

and selecting Project from Template.Now I'm going to look for the Fiori Master-Detail
Application.
I'm going to call this project "users".Now I'm going to select the Service URL
according to the destination that I configured earlier, and this is the successfactors.eu
destination.Great. Now according to the documentation,
the endpoint ends with the URL "odata/v2".So I'm going to add that here to the URL suffix of
my destination.
And when I click on the play icon, I will be able to view a list of all of the available OData
sets,
or the data sets available from the SuccessFactors OData endpoint.Great. So now I'm going
to click Next,
and we're going to bind the various properties coming from this data set into our UI.So we'll
start by adding a title and then selecting the OData collection.
Now all the OData collections are available here in the dropdown, but I can also start typing
it in
and using the autocomplete to select the values that I want.Now the title, I want it to show
the first name,
and then use the second field in the list item to show the last name.And I'm going to add
some details for each user.
Perhaps select the married status, and then add the user's title,
and perhaps the department that he's working in, and the division.Now I want to show in this
second tab some HR-related data or some contact information.
So I'm going to add the user's e-mail, and perhaps his business phone.
And if he's not available there, maybe his home phone as well.Great. Now I'm done binding
the properties to the UI.

00:09:42
00:09:56

00:10:11
00:10:26
00:10:43
00:11:13

And now the application will be generated, once I click on Finish.Now we've seen in the
previous weeks and in this week how to enhance our Fiori applications in the Web IDE,
and how to extend them using various tools, like the Layout Editor and the various
extension tools.So what I want to do now, I've actually enhanced this application also in
advance,
so I want to import some of the files for this enhancement, just to make it fit my
needs.Great. So I'm going to import the files. They're going to overwrite any existing files.
And now the project is complete. I can preview the application.Now I've mentioned this
before, but for the extension scenario, we can also add Java Web applications
to complete any functionality that may be missing or lacking.Okay, so the application is
rendering. There.
So I can see the list of available users in my team.I can see their profile picture,

00:11:20

and I can see their title, the division, the location, and some contact details about each and
every employee in my team.Now this is all OData coming from the SuccessFactors back
end,

00:11:33

which I configured in my destination file.Okay, so now I'm satisfied with my application,

00:11:41

and before I deploy it, I need to create a spec.xml file, or a specification XML file.This
enables my application to run within the extension site, the Cloud Portal extension site,
and enjoy the single sign-on that is enabled through the integration with the SuccessFactors
identity provider.So in order to do that, I need to first enable the Cloud Portal plugin in the
Web IDE,

00:11:53

00:12:09
00:12:18
00:12:28
00:12:39
00:12:53
00:13:07
00:13:18
00:13:30
00:13:42
00:13:52
00:14:03
00:14:15
00:14:27
00:14:37
00:14:43
00:14:55
00:15:11

which in my case is already enabled.So you enable it by marking the checklist here and
refreshing the Web IDE.
And now I right-click on users, New, and create a spec.xml for Cloud Portal Widgets.
Great. Now I get a list of all the available OpenSocial widgets, and I select the UI5
integration for the SSL.And I click Finish, and the spec.xml file is generated.
We will use the URL of this file in order to create the widget in the extension site.Okay, so
now I can go ahead and deploy my application to the HANA Cloud Platform.
So I right-click on the project root folder, click on Deploy, and Deploy to SAP Cloud
Platform.I put in my SCN credentials.
And I confirm the deployment.Now the deployment is going to create a Git repository for my
application.
It's a versionized repository with the default version as mentioned here.And it'll activate the
application once it's deployed so users can start using it.
Great, so the deployment succeeded.And if I go to my Cloud Platform account,
I can see it added here.And if I click on it, I can see the various resources and destinations
that it's using,
and the versionized Git repository with the latest commit that I performed.Okay, great. Now
we want to go ahead and create the extension site from it.
And we will be doing this from within the SuccessFactors home page.So I log in to
SuccessFactors
using my admin credentials.And when I log in, I enter the home page,
which is available here.And in order to configure my extensions, I open the module picker
and I navigate to the Admin Center.
Great. Now under Company Settings, I have the option to navigate to Extensions.
I've added all the links that I want by marking them with a star into the My Favorites
panel.So I click on the Extensions,
and I'm navigated into the Extension Management console.Now the Extension Management
console is enabled by the HANA Cloud Portal service
from the respective Cloud Platform account, and it enables me to create and import, delete,
and publish new extensions.

00:15:23
00:15:43
00:15:55
00:16:10

00:16:32
00:16:47
00:16:57
00:17:11

00:17:24

It has an analytics capability of showing me the various usage and statistics data regarding
access to my extensions,
a document repository for storing any documents or resources that I would use in my
extensions, also images and HTML snippets.
And a marketplace showing me all the available extensions coming from SAP or from thirdparty SAP partners.So I want to go ahead and create my extensions.
I go to the Extensions tab, click on the plus, create a Freestyle Extension. I'm going to call it
"My Team".I'm going to click on Create and Open and the extension designer is opened in a
new tab.
As you can see, I have the same look and feel I have from within SuccessFactors.So I get
the same header, the same footer, the theme of SuccessFactors.
So this is part of the seamless UI integration.Now before I design my extension,
I would like to add the UI5 application, the Fiori application that I created, into the content
that is available for me.So for that, I'm going to create a new widget.
So I'm going to click the Add New Widget, I'm going to create an OpenSocial widget to
enable the single sign-on.And I need to configure in the URL of the spec.xml that is part of
my application.

00:17:48

So the URL is comprised of the relative path to the spec.xml which is part of my project, and
the URL of the application as it's stored in the Cloud Platform, the Application URL.
Okay, so I'm going to go ahead and create the widget.I'm going to call it "My Team".

00:18:01

Create a category for this.Great, so the widget is created.

00:18:15

And now I can go ahead and add it to my extension using the extension designer.So on the
right side panel here, I have various options for configuring and editing my extension.
I can add new content from this content panel.This enables me to drag and drop the various
widgets
that are either any one of the SAPUI5 applications that I deploy, like the one we just or
applications coming from any Java Web application that we deploy.
So let's drag and drop the users, the My Team widget that we just created.Let's make it full
page.
Great. Now in addition, there are also out-of-the- box widgets that are provided with the
extension designer.So I can add widgets for documents, for images, for videos, for rich text,
and for HTML snippets.

00:18:26
00:18:34
00:18:47
00:18:59

00:19:23
00:19:35
00:19:51
00:19:59
00:20:11
00:20:21
00:20:33
00:20:49
00:21:01
00:21:12

So I can design my extension as I desire.And now I can also create new pages, and add
additional content as I please.
But I would like to make this extension pretty simple, so it's going to be a one-page
extension.I'm going to give it a short name: myteam.
Great. Now that it's ready, I want to publish it.So it'll be available for my users.
And I want to access the published site to see what it looks like.Great, so my application is
rendering.
The same look and feel as if I'm still in SuccessFactors, with the same header and the
navigation options to navigate me into the SuccessFactors.
Okay, so now my extension is created, I can close the extension designer, and I can
navigate back to the SuccessFactors Admin Center
to add the extension to the SuccessFactors navigation.So this is enabled by the option for
configuring custom navigation, which I've added to My Favorites.
I'm going to click that.What we're going to be doing here actually is adding the extension to
be part of the module picker navigation of SuccessFactors.
So I'm going to call this extension My Team. I'm going to give it an ID.Now I want this link to
be in the same browser,
so my extension will render within the same browser and not as a new window or a new
tab.I'm going to paste in the URL to the runtime of my published extension.

00:21:25
00:21:38
00:21:46
00:21:54
00:22:04
00:22:15

00:22:30

I'm going to state that I want to add it to the top navigation of the module picker.Now I can
allocate this application to specific groups of users in my SuccessFactors company,
but for this one, I'm going to leave it open for all.And then click Save.
Great, so my changes have been added.And now you'll notice that I'm navigating back to
the home page,
and if I want to navigate to my extension, it's added right here into my module picker and I
can select this: My Team.
And now I'm basically in the same window with the same look and feel, and I'm running a
HANA Cloud Platform-based application inside my SuccessFactors solution.
And I can navigate back and forth to it as if it's part of the original cloud solution.Okay, now
the last thing I want to do is I want to add a navigation option for my extension from the
home page.

00:23:25

So I want to add a new tile.So this is enabled by going to the Admin Center again and
clicking on Manage Home Page.
Now this is where I'm adding a custom tile.A tile can be either an image or some HTML
markup, or it could also be an application
that we can deploy to the HANA Cloud Platform and consume here through an iframe.Now
I'm going to give it a name.
I'm going to choose a size, now a title: My Team Members.Some description: Team
Members extension.
Great.Now this is where I can add the content to my tile.

00:23:31

In this case, I just want to add an image, which I've prepared in advance as well.

00:23:39

00:24:04

I'm going to set the width for this to fit the tile size.And I'm going to create a link to my
extension,
so by clicking the tile, we will navigate to the extension site.Great, now I can preview this
and see what it looks like.
It looks pretty decent.Perhaps we can reduce the width a bit.

00:24:12

Never mind. Let's save this.And now I'll navigate back to my home page.

00:24:27

And now you'll notice that my new tile is down here. I can drag and drop it to wherever I
please.And by clicking it, I'm navigating again to my extension,
showing OData coming from SuccessFactors.The extension itself is a navigation deployed
on the Cloud Platform.
Okay, great. So this is what we wanted to achieve.Now for a deep dive and hands-on
experience with cloud extensions,
I do encourage you to check out the latest openSAP course called Extending SAP Products
with SAP HANA Cloud Platform.It's available on the openSAP Web site at this link.

00:22:46
00:22:58
00:23:08

00:23:54

00:24:42
00:24:49
00:24:59

00:25:19
00:25:30

In this course, you'll get the opportunity to create your own extension for SAP cloud
products, like the SuccessFactors, Jam, and Cloud for Customers.
Okay, thanks for watching, and see you in the next unit.

www.sap.com

2016 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.