-
openSAP Build Your Own SAP Fiori App in the Cloud
WEEK 5, UNIT 1
00:00:07 Hello and welcome to Week 5 of this openSAP course.
00:00:15 In the previous weeks you created your first Fiori app
and enhanced it with a number of
features.
00:00:22 The topic this week is SAP Fiori Extensibility, meaning
how customers can extend SAP's
standard apps.
00:00:31 This first unit is an introduction to Fiori
extensibility with SAPUI5.
00:00:38 We are going to cover the scenarios for extensibility
and the features SAPUI5 has to offer.
00:00:46 So in this unit we are going to focus on the UI and in
another unit discuss the extension of a
data service.
00:00:55 So let's start by explaining what extensibility
means.
00:01:05 Here you have an example of a Fiori application. It is
showing quotations. And if a customer or
a partner
00:01:15 wants to use that app, often the customer would like to
change the app, to extend the app. It is
not very likely that the customer will use the Fiori app
00:01:27 as it is, as it has been delivered by SAP, but wants to
do some changes, for example, adding a
new field to this Details screen here.
00:01:37 Another example would be to hide some controls which
are not relevant in the specific
customer's scenario. Or the customer
00:01:47 might want to add a new function, to add some new
functionality which has not been delivered
by SAP.
00:01:59 Here is another example. This is a time sheet approval
application. Again you can see here
some screen elements
00:02:08 where you might want to hide some controls, add
additional labels on the screen, and put in
some customer-specific functionality.
00:02:18 And from talking to many customers, partners, and also
consultants,
00:02:26 for example, we learned that practically all customers
extend the SAP standard delivery.
00:02:35 So what does it mean for us? Of course we need to
provide tools to support these scenarios
and concepts and mechanisms
00:02:46 to support that on all the different levels, on the UI
and on the data, the data section of the
applications.
00:02:56 So it's very important scenario and it affects the
application from end-to-end. You can see here
the different application layers.
00:03:06 It starts from the UI layer. This is everything dealing
with SAPUI5. So you would, if you want to
-
2
do an extension, you would want
00:03:17 to touch the UI layer. Assuming that you have some
back-end logic for your extension for
example, if you want to add a new field,
00:03:26 you have the new field in your back end and you just
need to expose that to the UI to make it
visually, to make it appear on the UI.
00:03:37 Another layer which might need to be touched is the
gateway layer. So if you have the data
available in your back-end system
00:03:46 but it's not yet exposed via a gateway service to the
Fiori application, you would need to
change something,
00:03:55 make an extension to the gateway service. The next
layer would be the Business Suite, that is
the application layer.
00:04:01 So here you are usually in an ABAP system and you might
want to add a custom field to that.
00:04:09 So you would need to touch ABAP. You might want to add
a field to a database table in ABAP
and add some business logic to that layer.
00:04:20 In SAP HANA you have a similar situation. If you want
for example to have a completely new
field,
00:04:28 you would want to change the HANA data models and all
of the related things necessary for
that.
00:04:37 You have another table here on this slide which is
giving you information on which skills you
would need on the different levels. And as you can see here,
00:04:47' depending on whether you are doing a change in the UI
or in the Business Suite, it's different
programming languages, different skills that you would need for
that.
00:04:57 For example, for the UI layer it's good to understand,
of course, SAPUI5, OData, JavaScript,
HTML,
00:05:06 and you could make use of Fiori-specific knowledge for
UI development.
00:05:14 If you want to touch the back-end system, the gateway
service or the Business Suite itself, of
course ABAP is a skill you would need.
00:05:23 So you can see here extensibility covers many different
layers and quite some skills are
needed to do that.
00:05:33 And of course SAP needs to provide tools to support
this and with the SAP Web IDE you have
several
00:05:44 integrated tools to work on the extensibility scenario.
And you
00:05:54 also have in Web IDE, you also have visual tools for
extensibility, so you can get pretty far
doing
00:06:04 extensions without the necessity to actually touch
coding and understand the individual coding.
But we will see that a bit later.
00:06:15 So how do we do Fiori extensibility with SAPUI5.
Focusing on the UI layer,
00:06:25 we assume that I'm a customer and I want to add a
specific field to my application,
-
3
00:06:34 for example to my business object, to my sales order
header or sales order line items. And
what options do I have?
00:06:41 I could modify the standard SAP coding. Obviously this
is not what I want because if I modify
standard coding
00:06:50 I would have problems if SAP provides a new support
package or a new release, I would then
have to merge
00:06:59 my changes with SAP's delivery, and that's not what I
want. The other extreme for that is I
copy the full application.
00:07:09 Then it's easy I can do all of the changes in the code.
But by copying, I'm losing the
connection to the SAP standard application.
00:07:19 So if SAP provides new functionality, my extended app
still has the old status of what I initially
copied.
00:07:29 So this is also something which I do not want to do. So
what I want is to have a concept and
mechanisms that I keep
00:07:39 SAP standard unchanged, not do any modifications, but
enable that my custom extensions
would survive future standard deliveries,
00:07:52 and also that my extension app can benefit from future
upgrades and support packages.
00:08:00 That's the intention of this concept, of the SAPUI5
extensibility concept. Let's see how would I
know which are the parts,
00:08:13 the pieces in the Fiori application which I can
extend?
00:08:20 There is the SAP Fiori apps reference library, and that
was mentioned earlier in this course. It
also contains specific information on the extension points:
00:08:31 the areas in the Fiori application where you can put in
some extensions.
00:08:39 So let's have a look. This is the Fiori apps reference
library, and let's assume that I want to
extend the purchase order approval app.
00:08:51 So let's search for that. I search for purchase, and
this is my approve purchase order app.
00:09:02 I get a number of information, and I also have a
section here on the implementation
information.
00:09:11 And here specifically important is the Extensibility
section of that, and you can see here you
have the technical name of the application.
00:09:25 It is stored in the SAPUI5 ABAP repository. You can see
here it says BSP. That's a bit
misleading.
00:09:36 So it's not a Business Server Page-based application,
it's just the database tables where Fiori
apps are stored in an ABAP system.
00:09:46 With that, we can use transport mechanisms or Notes
support and get all of the functionality
that exists for BSP,
00:09:55 but it's not a BSP application. And then here you have,
you see the extension points which are
available in that specific application.
00:10:05 You can see the different views for the Master and the
Detail screen, and the different areas of
-
4
the applications, for example,
00:10:15 where you can add additional fields. And here you also
have controller extensions, so it's not
just the UI elements
00:10:26 which you can extend, but also the controller behavior.
For example, if you want to do
searches or
00:10:35 change the initialization of the controller to, for
example, fill your own fields, then you can use
that.
00:10:43 So lots of information and documentation is provided
here.
00:10:49 So let's go back to my slide and see what are the
concepts in SAPUI5 to handle that,
00:11:01 to handle the standard application versus the custom
application. You can see here on the left
is the SAP standard application
00:11:09 with the standard code, and we want to leave that
untouched. On the right, we have an
extension project.
00:11:17 We are going to create this extension project with SAP
Web IDE. The extension project
contains only your extensions, nothing else.
00:11:27 It's not a copy. It contains only the delta to the SAP
standard delivery, and you can see here
the component.js file
00:11:37 defines the component, the extension project being a
component, an application. And there
are 3 different sections in there.
00:11:47 One is to declare the component, meaning to define the
extension project. Second one is to
load the standard application,
00:11:58 because when executing the extension project, we want
to load the standard application
00:12:05 and leave the functionality untouched. And then as a
third aspect we do the extensions.
00:12:13 On top of that, we want to execute the extension that
we have defined. So let's look at that a
bit more in detail.
00:12:22 You can see here the component.js file. At the top you
see the declare statement,
00:12:29 where the component of the custom application is being
declared.
00:12:36 You can see here the load of the parent application,
because we need that to execute the
extension project.
00:12:43 And in the lower section here you can see the
extensions.
00:12:49 You can see the specific area here called customizing.
This is where the extensions will be
defined.
00:12:56 Currently it is empty, and as we do extensions, for
example in Web IDE, you can see here that
coding is being generated here.
00:13:06 The term customizing is a bit misleading. It has
nothing to do with IMG, for example.
00:13:12 It is where the extensions are being defined.
00:13:20 So let's have a look from a different perspective. You
can see here on the left the SAP
standard application
-
5
00:13:28 and how it is being visualized in the workspace of the
SAP Web IDE. You can see there is a
component.js file as I mentioned earlier.
00:13:39 On the right side you can see the extended custom
application. And the first thing that you see
it's smaller. And that's the idea.
00:13:49 It just contains very few files which are necessary to
run the application.
00:13:57 There is no real business content in it, at least not
yet. And it has a component.js file, and that
file is loading the parent application.
00:14:11 And on top of that parent application, we define some
extensions in the area here at the
bottom of the file.
00:14:22 This is where new fields are being defined, or controls
are being hidden,
00:14:32 and all the changes are being defined here.
00:14:39 So this is the last slide to explain the concepts in
SAPUI5. As you know, SAPUI5 structures it's
applications with the Model View Controller concept.
00:14:52 So first thing is you have data model. We talk about
the data model and extending the data
model
00:15:00 in another unit of this course. And we have the view
implemented as an xml view layout, and
we have a controller implemented in JavaScript.
00:15:11 And the controller is handling all the data binding,
the data flow between the views and the
data model.
00:15:19 And as we concentrate here on extensions in the UI, we
can see what is possible for the view
layout, for example.
00:15:30 We have view extensions. So just like in ABAP with
customer extensions, we also in the view
have defined extension points
00:15:41 where you can put in your coding. You've seen these in
the documentation, or you can see the
extension points in the tools
00:15:50 that we provide in SAP Web IDE. So predefined extension
points where you can put in your
custom coding.
00:16:00 The second option is a view modification. So it's not
really a modification, because the whole
point here is that we are not modifying the SAP standard, but we
are changing it.
00:16:11 There are certain properties for UI5 controls which you
can change; for example, the visibility.
00:16:18 Here you can change or set the visibility to false and
then certain UI elements will disappear at
runtime.
00:16:26 And the third option is the view replacement. If you
think that the view extensions, the
extensions points are not sufficient for your use case,
00:16:36 or that hiding controls is also not sufficient, because
you want to completely change the layout
of that view,
00:16:44 you can do a view replacement, meaning you keep the
whole application and just for this
single view you want to replace that,
00:16:52 take out the SAP standard and put in your own custom
view where you can do whatever you
-
6
need.
00:17:01 These are changes on the view layout side, and also on
the controller side, changes are
possible. So we have controller extension hooks
00:17:11 where you can add some JavaScript coding to actually
execute what is necessary for your
extensions.
00:17:20 For example, if you have new functions, a new button,
which needs an event handler, you can
add JavaScript coding for that here.
00:17:30 You can also override standard functions here, for
example to initialize your data which is
needed for your extension.
00:17:39 So this is a short summary of the extensibility
features in UI5
00:17:49 and in the next units, we will see how you can work
with this in SAP Web IDE.
00:17:56 Thank you for your attention.
-
7
WEEK 5, UNIT 2
00:00:08 Hello and welcome to the second unit of the Fiori
Extensibility topic.
00:00:17 In the previous unit we introduced you to the
extensibility features offered by the SAPUI5
technology.
00:00:25 We now want to have a closer look at how SAP Web IDE
supports you with the
implementation of extensions.
00:00:32 You will notice that the tools guide you through the
required steps and help you to concentrate
on your business scenario.
00:00:40 So let's start by quickly repeating the main idea of
the previous unit.
00:00:47 Imagine that you have an idea for a business scenario
that you want to implement with the
Fiori application.
00:00:56 And as you know, you can create a new application for
that Fiori application based on a
template.
00:01:04 Or, if you think that an existing standard application
comes very close to what you have in
mind, you can also use extensibility features
00:01:14 to extend the standard application. And for me it's
always helpful to keep in mind where things
are physically stored.
00:01:24 So for example, in the extensibility scenario you have
the parent project that is the standard
original SAP application.
00:01:35 You have that stored for example either in the ABAP
system or on SAP HANA Cloud Platform.
And that application remains untouched.
00:01:45 We do not modify that, and when we create an extension
project for that, that is being created
in the SAP Web IDE workspace.
00:01:54 And once you run the application of course, it's
pulling the original application from either the
ABAP system or HANA Cloud Platform and adds the extensions on
top.
00:02:07 What does that look like? In the workspace that you see
in Web IDE on the left, you see the
standard application,
00:02:16 the parent application. It has the usual files for the
views, for example. Once you extend that
you are getting an extension project
00:02:26 that is quite small. It just contains a basic frame and
the extensions that you implement on top
of the parent application.
00:02:33 At runtime, it's pulling the original application and
using that.
00:02:43 And have a closer look at how this looks like in the
coding. We've already had a closer look in
the previous unit on the component.js file.
00:02:54 That is the file which contains the individual
extensions that you are making. For example on
the lower left here,
00:03:01 you see a screenshot of an approval app. If you, for
example, want to hide a button, there is a
share button here at the bottom right.
00:03:10 If you want to hide that, you can do that with Web IDE,
and the result is the lines here in the
-
8
component.js.
00:03:18 You can see that in this specific view it is here the
Purchase Order Details view and
there is a button share and you can see here
00:03:28 that the visibility is set to false. And that is
everything that is needed to hide that button.
00:03:35 So these are the basics. And now finally, how do we
work in Web IDE with extensions?
00:03:44 So first we need to create the extension project. And
the normal scenario as I've mentioned
before is we want to refer to a remote app.
00:03:54 So the parent app is a remote app (remote means in an
ABAP back-end system or HANA
Cloud Platform).
00:04:02 And that's what the usual scenario is, because we want
to leave that untouched, not modify
that.
00:04:10 The second option is to refer to the workspace. That is
what we want to do here in this course,
because we want to avoid complexity
00:04:20 with regard to using back-end systems, so that you can
concentrate on the actual extension
mechanism which we deal with here.
00:04:31 So what we are going to do is use the Fiori reference
app.
00:04:39 We talked about that last week. With a sample app
mechanism we can import them into the
workspace of Web IDE
00:04:47 and use them as the original standard app. So all of
the features are the same.
00:04:55 The only difference is that the app is physically in
your workspace and not, for example, in an
ABAP back-end system.
00:05:03 So let's see how this works in Web IDE. You can see
here my workspace, and I have the 3
sample apps,
00:05:15 the Fiori reference apps, already in my workspace.
00:05:21 So the first option is, we create an extension project
just to show you how that works with the
remote parent.
00:05:31 So we have the two options: ABAP repository or HANA
Cloud Platform.
00:05:39 Let's choose the ABAP repository here. And again, we
have to select which back-end system
00:05:47 do we use in this case the GM6 system and now it's
checkin and listing all of the Fiori
applications, all the SAPUI5 applications
00:05:57 stored in GM6. And in this case, we want to look at a
purchase order approval app,
00:06:05 because what I have in mind is very similar to the
standard app. So I'm filtering this list for PO,
00:06:13 and you can see here one of the results is the standard
Approve Purchase Orders app.
00:06:19 I click OK, and the system suggests a name for my
extension project.
00:06:28 It's the same as the standard project plus extension
here. And I also have options to import the
parent application,
00:06:37 which is exactly what I do not want to do now. I want
to leave it in the remote back-end system.
-
9
00:06:46 Next and Finish, and it takes a second and you can see
that a new project has been created.
00:06:56 And you can see it's only a very few files. And if we
have a look at the component.js file
00:07:06 you can see that it loads the standard Purchase Order
Approval app and then there will be
some extensions stored in this place here in the file.
00:07:19 So this is an example with the remote parent
application, and
00:07:27 for the sake of simplicity here in this course we are
going to use the sample apps. So this
Purchase Order Approval
00:07:36 app will play the role of my standard app. The steps
are basically the same with new
00:07:45 extension project. I refer to a parent in my workspace
and here I can see again
00:07:55 my workspace. I pick the Purchase Order Approval app as
my parent, click ok.
00:08:04 Same thing, the name is suggested. I click on Next and
Finish,
00:08:13 and you can see here another extension project has been
created.
00:08:20 If I open that you see the same files. And now lets see
what happens if I run that project.
00:08:30 In this case I want to run it with mock data. You know
that the reference apps, the Fiori
reference apps,
00:08:39 come with mock data. And again, I want to avoid using a
back-end system in this scenario
now, so I run this with mock data.
00:08:48 The previous screen opens. Now it's pulling the
original app,
00:08:56 and you can see I have the full app: It is showing the
mock data and is running currently
without extensions.
00:09:07 So my idea is now to add some extensions. This is a
purchase order approval scenario, so
somewhere here in the Details screen,
00:09:17 I want to add a message that the user completes and
approves the purchase order before the
month end.
00:09:26 So I want to add a text here. So how would I do that?
Let's go back to the slide and see the
different options for that.
00:09:37 We have two options. One is extensibility with
wizards,
00:09:45 and the second one is use a visual editor. So the first
one is a wizard, you can see here, just
like the other wizards in Web IDE
00:09:54 it guides you through the necessary steps. And with the
wizard, you can create an extension
project we have just seen that.
00:10:02 You can hide a control, you can extend a view, you can
replace a view, extend a controller, all
of the different options that we have seen before.
00:10:12 So let's do that in Web IDE. I select my extension
project,
00:10:23 and I now want to add an extension to it.
00:10:30 I choose New Wxtension, which is being generated into
the extension project. Yes, this is my
-
10
00:10:39 extension project, that is correct. And now I have the
different options.
00:10:46 In my first example, I want to extend a view so, in the
Details screen I want to add something,
and I want to make use of an extension point implemented in
UI5.
00:10:57 I click on next, I choose the view that I want to
extend, that is the Purchase Order Details view,
00:11:06 and it gives here me the available extension points.
You can see here there are two. One is
after the object header
00:11:16 in the upper area and there is one after the form.
There is a form in the Details screen, a bit in
the middle area.
00:11:26 So I just pick the first one, click on Next and
Finish.
00:11:37 And what happened? Just to see where this came from, I
just opened the original app and see
the view in the original app.
00:11:48 There is the Details view and you can see here in the
Details view SAP has provided an
extension point.
00:11:57 That is the extension point after object header. And we
are going to put in some logic into this
extension point.
00:12:05 So again I'm closing the standard app and in the
extension app, we have in the component.js
files
00:12:15 we have now a couple of lines here which reflect the
extension. There has been a fragment
being added
00:12:25 which is then being loaded at runtime into that place.
And if we check the view folder here, you
can see a new file has been created.
00:12:35 This is for this extension point, and currently it is
empty. So let me add something here.
00:12:43 I want to just give out a text.
00:12:53 And I just enter a text Please approve before month
end.
00:13:05 That's it, so just a single line here.
00:13:11 I save that and I'll switch to the preview, refresh the
preview.
00:13:19 You can see here currently there is no text.
00:13:29 I refresh the preview and now we have the text here on
the screen. It's not properly formatted
yet but just by adding a single line,
00:13:38 you have implemented the extension point. So this is
how you do it with the wizard.
00:13:47 Let's now go back to the slide and see how this can be
done with the visual editor. This is the
second option.
00:13:56 We have the Extensibility Pane, and as you can see
here, it looks very similar to the preview.
00:14:04 It has two modes. It has a preview mode. Then it
behaves just like the preview screen.
00:14:10 You can click through your application and navigate to
the respective screen area where you
want to do some change.
00:14:17 Once you are there, you toggle to the Extensibility
mode and then the behavior has changed.
-
11
00:14:24 The buttons, for example, are not working in a normal
mode, but now you can select individual
screen elements.
00:14:33 You can select them and extend them. Let's have a look
at this a bit more in detail.
00:14:40 You can see here, there is the Preview screen. On the
right you have an outline view.
00:14:47 You can see the hierarchical structure of all of the UI
elements. You can see the extension
points, which objects can be extended,
00:14:57 or which objects already have been extended by you. You
can toggle that here on top of the
screen.
00:15:04 You can also do the extensions here then either with a
right mouse click or with the options
given here at the bottom of the screen.
00:15:14 So you can implement, for example, extension points and
also navigate to the respective
coding and then the code editor opens.
00:15:24 So let's have a look. I now want to implement
00:15:34 a simple extension hiding a button. So let's see how
that works with the Extensibility Pane. You
can open that here, Tools, Extensibility Pane.
00:15:48 And in my case I want to open that with mock data.
00:15:56 You can see here on the right the structure of UI
elements. You can see the application here,
and as I am in preview mode, you can see that here,
00:16:06 I can in a normal way navigate through my different
screen areas. So let's assume I have now
reached the screen area.
00:16:16 This is the share button that I want to remove. It does
not make sense in my scenario. Now I
toggle here
00:16:25 to the Extensibility mode and you can already see by
hovering the mouse, it selects the
different screen elements ,
00:16:34 and I now move the mouse to the share button. You can
see it selected on the right and I can,
for example,
00:16:45 with the right mouse, choose an option to hide this
control. I click that,
00:16:54 I get a message that the control has been hidden. Do
you want to refresh the application? Yes.
Let's see what happens.
00:17:01 Currently the button is there and if I refresh you can
see the button is hidden.
00:17:13 Let's implement a second Extension here with that
editor. You can see here, let me select the
elements which can be extended.
00:17:26 Show extensible elements. And you can see here the two
extension points.
00:17:33 There is one extension after object header that already
has been extended. I did that before
with the wizard.
00:17:39 But there is another one, extensionAfterForm. So that
is somewhere here below. There is a
form here on the Details screen
00:17:47 and there is another extension point here. So let me
implement that. I can use, for example,
-
12
the selection down here, the Possible Extensions,
00:17:57 Extend View, OK. Extension point has been extended.
00:18:10 And now I can also from here navigate to the respective
coding. Again in the background this
page fragment has been created.
00:18:18 I Go to Code, Extension Code. I want to implement that.
The Extensibility Pane closes.
00:18:28 You can see here in the workspace a second fragment has
been created, and currently it's
empty.
00:18:37 And I can just in the same way
00:18:48 implement that and put just some simple text to the
screen.
00:19:03 I saved that and can go back to my Preview screen,
refresh that, wait a second.
00:19:15 And here you can see the second text is also
implemented. This time with the visual
Extensibility Pane.
00:19:24 Let's go back for my last slide.
00:19:31 So what we've seen before now are two ways to actually
implement extensions and you've
seen the extension points which are available.
00:19:42 There is lots of documentation for the Fiori apps to
help you, to support you with which
extension points are available
00:19:51 and how you can make use of them. What is always
possible here is that you do extensions
just by working on the code.
00:19:59 So if you have the feeling that SAP does not provide
extension points in the right place where
you need them, or you have the feeling that the Extensibility
Pane
00:20:09 or the wizard does not offer enough functionality for
you, you can always work in the code.
That is the general principal in Web IDE:
00:20:18 If the functionality is not yet sufficient, you can
just in the plain easy way work with the code.
You can create folders,
00:20:27 you can create files, work with the editors and adapt
the application to your needs according to
what SAPUI5 offers, or whatever you want to implement.
00:20:38 So you are not limited to what the tools or wizards
offer at the moment.
00:20:45 That's it. Thank you very much for you attention.
-
13
WEEK 5, UNIT 3
00:00:08 Hello and welcome to Unit 3 of Week 5 on Advanced
Topics of UI Extensibility.
00:00:19 In this unit we want to have a closer look at the other
extensions, like view replacements and
controller extensions.
00:02:27 We also want to finalize our extension project by
moving it into its runtime environment.
00:00:33 Let's start with the overview of the SAPUI5 extension
features that you already know.
00:00:44 This is a slide showing you the different extension
features of UI5. We've seen that in the
previous unit.
00:00:51 You see the Model View Controller parts of a UI5
view.
00:00:58 You can see the XML view layout. You can see the data
model which we are going to handle
in the next unit, and you see the controller implemented in
JavaScript.
00:01:08 And for the view and for the controller you see the
possible extension options: The view
extensions meaning implementing an extension point;
00:01:18 the view modifications for example changing the
visibility of the UI element, and the view
replacement, which we are going to cover in this unit.
00:01:28 And for the controller, the controller extension, which
we are also going to look at now.
00:01:38 This is a picture to visualize that you can handle the
different parts of a UI5 view separately.
00:01:48 So if you have the standard SAP app, you use Web IDE to
build your custom app.
00:01:55 And the standard SAP app consists of the view, the data
model, and the controller, and each
can be extended individually.
00:02:05 So if it is only a visual thing you want to extend,
then you extend the view or you replace the
view.
00:02:13 If it is the controller, so you need some different
behavior of your view, you would extend the
JavaScript controller. And if changes
00:02:23 to the data model are necessary, of course, you would
need to enhance the data model. But
each of the extensions can work separately.
00:02:33 So you only touch those elements which you actually
need to change and the rest remains
unchanged, unmodified.
00:02:40 So let's now have a closer look at more extensions; in
this case the replace view extension.
00:02:51 So far, we looked at hiding a control, for example. You
see a screenshot here on the left.
00:02:58 There are individual UI elements. We looked at the
button before, the same is valid for a label,
an input field, any UI element. And you can hide that.
00:03:10 Another option here, you can see here at the bottom, is
the view extensions: Implementing
extension points by adding a couple of UI fields
00:03:19 and predefined slots in the extension points. We can do
that. But what happens if this is not
sufficient?
00:03:29 You do not want to add or remove single files but you
want to have really a completely new
view. So here in this case, you have a form in this view.
-
14
00:03:40 What happens if you want to have a table instead or a
graphic, some analytics, a completely
different thing? In this case you would rather replace the whole
view.
00:03:51 So then you use the view or controller replacement,
meaning replacing the view layout in XML,
00:03:58 or the controller logic implemented in JavaScript; and
that affects the full view.
00:04:07 Let's have a look at how you do that in Web IDE. This
is the extension project I created in the
previous unit.
00:04:17 This is the extension of the purchase order approval.
In this case let me just start that so we
can again see the application.
00:04:31 I run this with mock data.
00:04:41 And what you see is the list of purchase orders on the
left, which will come up in a second, and
the detail of the purchase order on the right.
00:04:52 And what I want now to do is to add an additional
button. So here in this case, at the top of the
list, I want to add a button so that this list shows only
00:05:03 some purchase orders, only the pending purchase orders
of the last week, for example.
00:05:11 So I want to add a button here and also an event
handler to react if the user clicks on the
button.
00:05:19 So I want to put an icon here. So first I have to
select an icon.
00:05:25 How do I do that? There is an Icon Explorer of UI5
which is giving you all of the icons. You can
see here there are categories of icons.
00:05:36 You can also use the search feature. And I know my icon
has something to do with time.
00:05:45 So I'm selecting the time category here, and I can see
there is an icon pending, which is the
one that I want to use.
00:05:56 Okay, now let's do an extension and use that icon. I
select my extension project and open the
Extensibility Pane of mock data.
00:06:15 Now I want to have a look at the list on the left, so
in the Outline view, I choose all elements
which can be extended.
00:06:25 And I can see here there is the view S2_PurchaseOrders,
that's the master list on the left. And
I want to
00:06:35 replace that assuming that I want to do some bigger
changes to it. And with the right mouse I
see the different options that I have.
00:06:46 I can replace that with an empty view if I want to
start from scratch. In my case I want to start
the copy of the parent view.
00:06:54 I choose that and I get a message that the view has
been replaced by a custom view.
00:07:05 Okay, now I need to put in some coding. I have the
option, for example down here, to go to the
extension code.
00:07:14 So I can implement the button. You can see here in my
workspace
00:07:22 an additional file has been created, and the content is
a copy of the original view.
00:07:29 So what I'm going to do now here is in the header
section, where we already have a button to
-
15
switch on the multi-selection option,
00:07:39 I want to add another button.
00:07:50 I put in the button and I have to fill in the icon. I
use an SAP icon,
00:08:00 and that is the pending icon that I've selected
earlier. And if I tap on the button, I want to
execute a function named pending.
00:08:14 That's it. I put the button on the view layout with
this line.
00:08:26 I save the coding, switch to the preview and click the
Refresh button.
00:08:34 Currently there is just the multi-selection button here
and if I refresh we should see the new
button.
00:08:43 You can see here there is the new button. Oh, it's
here, that's the new button.
00:08:50 We have the icon we've selected, and if I click on the
button, nothing happens because it has
just been added to the view layout.
00:08:58 We can see it but now we want to add an event handler
to actually execute some logic for it.
00:09:07 To do that, we want to extend the controller. Again, I
select the extension project.
00:09:16 This time I'm not using the visual editor but the
wizard. I create a new extension.
00:09:30 Yes this is the correct extension project, and I want
to extend the controller this time.
00:09:40 Extend Controller. Next I have to select which
controller to extend. I know that the S2 controller
for the list of purchase orders,
00:09:50 I select that, and here I can choose, I want to replace
that with an empty controller. And in this
case,
00:10:00 I just want to copy the parent controller and do some
changes there.
00:10:09 I choose Next and Finish, and you can see here another
file has been created,
00:10:19 which is my custom controller implementation. So let's
keep everything as it is and just add
00:10:30 the function for my new button. So the function is
called pending,
00:10:46 and that function just for simplicity now should just
raise an alert. Of course, here you would
put in your logic to work on the list of purchase orders.
00:10:56 So let's just give an alert here. You clicked on the
pending button.
00:11:09 Okay, what does the editor tell me here? There is a red
marker here at the front.
00:11:18 If I hover with the mouse, I can see it's saying there
is a missing semicolon. Okay, I must not
forget that,
00:11:27 put a semicolon here and the marker changes to yellow.
Okay, let's accept that.
00:11:34 It seems good. I save the coding, and let's see what
happens in the preview.
00:11:43 Again, I click the refresh, and you can see that we
have a new button.
00:11:54 And now if I click on it, you can see there is a
message from the browser: You clicked on the
pending button.
-
16
00:12:00 And now I would go on and implement the necessary
business logic.
00:12:08 So this was implementing and view replacement, and also
a controller replacement. Let's go
back to the slide to see another possible extension.
00:12:21 Just again an overview to see which files correspond to
which extension.
00:12:36 We've seen the component.js file before. You've seen
the coding to hide the control.
00:12:44 To extend the view we've seen that as well, where a new
fragment is being created and that
creates a new XML file here, marked
00:12:55 in light blue, to implement the view extension. Or if
you replace a view,
00:13:05 that is what we just did, in the same way, there is a
new file with the XML view layout for the
custom view.
00:13:14 And what we did just before this slide was extending a
controller, and also for this there is a
new file which contains the custom controller code in
JavaScript.
00:13:26 So what other options do we have? We talked about the
view and the controller.
00:13:36 There is also text, language-dependent texts which
appear in the application. And if we want to
change those texts, the customer wants to
00:13:46 put in some individual text, change the terminology or,
for example, add another language.
00:13:53 This is the place to do that. So the language-dependent
texts are implemented in property
files.
00:14:00 You can see there is a list of texts here with the key,
and the text itself, and for each language
there is one file. There is one file containing all of the
English text,
00:14:11 one file containing all of the French text, and so on.
So for the extension it is also possible to
extend those texts.
00:14:22 So again, just like before, we have an SAP standard
text definition, and if we extend these, a
copy of those
00:14:31 is being put into the extension project, and they can
be changed. And the advantage is that the
text usage in the view,
00:14:40 so the individual places where those texts or labels
are being used in a view, that remains
unchanged.
00:14:49 So the key of the text remains unchanged. It's just
that in the extension project, it's getting
overridden so to speak.
00:14:59 So let's do that in Web IDE again. I select my
extension project,
00:15:10 create a new extension. That's the correct project.
00:15:21 And this time I select the i18n resource text
customization.
00:15:28 i18n is for internationalization resource text
customization.
00:15:35 Next and Finish, and you can see what happened here is
there is a new folder named i18n,
00:15:45 and in here there are properties, you can see. Those
are the texts in English, and
00:15:54 you have a fallback also for text if the application is
used in a language
-
17
00:16:00 and there is no property file for that language. So we
have the texts here, and let's see what do
we want to change?
00:16:09 For example, there is a placeholder text here in the
search field. It currently says search. So
just let's change the text.
00:16:18 That is somewhere here. Let's use the search
functionality, control F to find that. I search for
search,
00:16:28 and you can see here there is a text search
placeholder, and currently, it is search.
00:16:36 So let's just enhance that search for purchase orders.
So we changed... purchase orders...
00:16:48 we changed the text. We can also create new property
files for different languages, for
example.
00:16:57 I'm saving that again, going to the preview, refreshing
that,
00:17:07 and you can see here it now says search for purchase
orders. So a simple way to also change
the language-dependent texts
00:17:18 of an application. And let's just have a short look
what happened while we did all of those
extensions in the component.js file.
00:17:30 You can see here there are the two fragments for the
view extensions. They have been
created.
00:17:38 We have the button share visibility set to false, and
we have down here the view replacement
and the controller replacement,
00:17:49 all contained in the component.js file. Good, so let's
go to my last slide.
00:18:03 We are done with our extensions, the custom application
is working fine, and now as a last
step we would want to deploy that into its runtime
environment.
00:18:13 So just like in previous units, where you created a new
application, you would now deploy the
custom application to either
00:18:22 the HANA Cloud platform or to the ABAP back end. So
it's a new application which is referring
to the parent application
00:18:31 and adds custom extensions on top of that. And with
that mechanism we achieved the goals
00:18:39 that we had at the beginning, so we keep SAP standard
app unchanged, and if SAP delivers
more support packages
00:18:49 or more additional versions in the future, our custom
app would benefit from them.
00:18:58 That's it for this unit, thank you for your
attention.
-
18
WEEK 5, UNIT 4
00:00:08 Hello and welcome to Unit 4 of Week 5 on the topic of
Data Extensibility.
00:00:17 After learning how to extend the UI of a Fiori
application, we now want to have a look at the
required changes to the data model.
00:00:26 We will see how you can extend a data service with a
new field, for example.
00:00:32 Let's again have a quick look at the different layers
of a Fiori application.
00:00:40 Here you can see again the different layers,
specifically the UI layer and the gateway layer with
the Business Suite underneath.
00:00:49 So for performance reasons, usually a Fiori application
uses a single data service.
00:00:56 So if we want to extend the Fiori application with an
additional field, for example, we would also
want to extend the underlying OData service,
00:01:05 and by that, using SAP Gateway to extend the respective
service. So let's have closer look at
the OData service.
00:01:18 So just like what we've learned for the UI ,also for
the service, we can redefine a gateway
service,
00:01:28 and with that make use of the standard service, of the
standard data, and on top add, for
example, a specific file
00:01:37 and fill that with custom data. So you can see here how
the data model is structured. And there
is an SAP-delivered OData project
00:01:47 and a custom OData project which refers to the original
SAP project. And within
00:01:55 the custom project you can, for example, add custom
entities to your OData model or add
properties to existing entities.
00:02:08 So this is to visualize the different layers. On top
you have the IU layer, the consumption layer
that is the Fiori application using the service.
00:02:19 You have the service model of the OData with the
definition of the data model, and you have
the provisioning side,
00:02:28 meaning that is the implementation of the service
within gateway and within your business
logic,
00:02:36 and the respective data tables, for example in your
Business Suite. And those two parts can be
handled separately.
00:02:48 The definition of the data model is the interface
between the two, and this is used from the UI,
00:02:56 and it is used to define the data service. And, for
example, it is possible that you develop the
UI,
00:03:05 the UI5 application, even though the gateway service is
not yet defined. You will see in this unit
how you can do that.
00:03:14 The main idea is that those two are decoupled, not only
from the software but also from the
development process.
00:03:22 So it is possible to develop a UI, for example, a
prototype even though there is not yet a
developer working on the gateway service.
-
19
00:03:31 This is a visualization of the definition of the data
model.
00:03:41 So within Eclipse, gateway offers tools to define the
data model in a graphical way. Or in the
SAP GUI
00:03:53 there is the gateway service builder available to work
on the data model and redefine an
existing data model, for example, to add a new field.
00:04:04 So let's quickly see, have a quick look on how that
works.
00:04:12 We assume that we are having a sales order tracking
application and the sales order tracking
application
00:04:21 is displaying a list of sales orders, giving the
details of the sales orders and the status. And
00:04:30 we would like to enhance this application with an
additional field. But how do we know which
gateway service is used for the application?
00:04:40 We can find out by using the Fiori apps reference
library. So let's have a look.
00:04:49 We've seen that before when we looked at the different
documentation for extensibility.
00:04:57 So let's filter that list to find the sales order
tracking application. This is it, track sales order, and
I have the section here on implementation information.
00:05:11 We've looked at that in a previous unit. Here is the
section on extensibility information for
example, with the extension points.
00:05:23 What is also available here is a link to the
extensibility documentation.
00:05:29 Let's have a look what's contained in there. You can
see here specifically for the sales order
tracking app you have information for front-end
00:05:40 and back-end extensibility. For example, here you can
see that the gateway entity used is a
specific service here.
00:05:50 It's the SO tracking service. That's the service used
in this application and that's the service we
would need to enhance.
00:05:58 Now, let's have a look, this is the gateway service
used in these units,
00:06:10 The GM6 system, and I want to start now the SEGW
transaction.
00:06:18 That is the gateway service builder. And to enhance the
service, I'm creating a new project
here.
00:06:26 And that project I'll call the Z_SO_TRACKING_EXT.
00:06:36 Give it a description, and I create the project.
00:06:46 So the project is here and the data model currently is
empty. Of course I want to refer to the
existing
00:06:56 data model and for this, I redefine an existing OData
service.
00:07:05 I use Redefine OData Service, and here I can select the
respective service.
00:07:18 And here is the service for the sales order tracking.
It is version 1. I want to extend the next
screen.
00:07:28 I can see all of the entities of that service. Let's
assume that we want to take all of those
-
20
entities.
00:07:36 And I click on Finish, and I can now see that here I
have the respective entities
00:07:46 in my new custom project and for example, for sales
orders, I can see all of the properties for
sales orders.
00:07:56 And here I can now add a property specifically for this
extension. I can append the property
here.
00:08:07 Let's assume I'll add a status field to the sales
order. I'll call it StatusEXT,
00:08:18 It has a type string and a couple of other properties
like the field length and a label:
00:08:31 Status extension, and also a field name.
00:08:45 That's it. And I can now use this Generate button here
to generate the respective data
structures and ABAP coding for that.
00:08:55 Here you can see it's a number of classes being
generated and they are inheriting from the
standard classes.
00:09:04 What you can see here, down here is a section on the
service extension. There is an option to
override the base service.
00:09:13 What does this mean? So if I don't flag this, it means
that an additional service is being
created.
00:09:22 So I have the standard service and I have a new one
which is extended with the new field.
00:09:29 This means I have 2 services and I would also need to
change the UI in the Fiori application
because it is now another service which should be used.
00:09:39 If I select this field here, I override the existing
service. That means I'm not creating an
additional service URL,
00:09:49 but I'm using the existing one. But internally, it uses
the new data model and gives data for the
new field.
00:09:59 What does this mean for the Fiori application? Let's
again have a short look here on my slide.
00:10:10 On the top you can see the OData client that is the
Fiori application using a gateway service.
00:10:17 You can see the gateway server with the respective URL
used in that application and in the
standard there is a base service here,
00:10:26 and in the back-end system that is implemented by a
certain service providing the data.
00:10:33 And if I extend that, it is another service and also
another URL from the gateway server.
00:10:41 So we would need to change the Fiori application. We
still have the old service available with
the original data.
00:10:50 The other option is that we have a single service URL.
So we have the same URL but now
after extending,
00:11:00 it's not using the original back-end service, but the
new extended one.
00:11:08 The advantage is that there is no change in the Fiori
application necessary. It is still using the
same URL.
-
21
00:11:15 So that was a quick look at how you can change a
gateway service
00:11:23 and how to add, for example, a field to an existing
standard gateway service.
00:11:33 If we use the option that we create a new service, I
mentioned that we need to change the Fiori
application
00:11:42 and make it point to the new service. How can we do
that? That is also supported by SAP Web
IDE;
00:11:51 if you remember the selection of all of the different
extensions you can create, there is also one
called replace service.
00:11:58 If you choose that, you replace that with a new
service. And the effect is not only that there is a
respective entry in the component.js
00:12:10 file and the new service is used, but also that the
definition of the data model is changed. So in
each project there is a metadata xml file
00:12:19 and that contains the structure of the data model with
its entities
00:12:27 and properties. And if you replace the service then
also the content of this file is being
changed.
00:12:38 So this is how you deal with changes to the OData
service. If you assume that the change of
the OData service did not yet happen maybe it's another
developer working on that
00:12:53 how could you still proceed developing your Fiori
application or extending your Fiori
application
00:13:00 but not having to rely on a back-end service which is
available? That is possible. As we did in
the past, you can work with the local mock data,
00:13:10 also if you change the data model. For this in SAP Web
IDE, we offer an OData Model Editor.
00:13:21 Currently this is a text-based editor and that helps
you changing and defining your OData
model.
00:13:29 This editor has specific features to work with the
OData model file.
00:13:39 For example, it has code completion to help you with
that, and it has validation features to
check whether the syntax and the content
00:13:49 of the data structure is correct. So the idea is that
we change the model definition and also, for
example, for a new field,
00:13:59 we can edit some mock data, put in mock data and then
run the application. So the application
can be executed.
00:14:09 You could show it to the end user, get feedback to it,
see the mock data. All of this without
having real back-end access.
00:14:21 How do you do that in Web IDE? So we have a specific
OData Model Editor, as I mentioned
before,
00:14:30 with a couple of features to support that. And the
result is a modified data model which you can
use in your extension app,
00:14:40 or which you can also use to create a new app. If you
create a new app, you can instead of
selecting a gateway service,
-
22
00:14:48 you can also select that file and create a new app
based on a template and based on your new
data model.
00:14:56 So let's have a look in SAP Web IDE. First, I need to
enable the OData Model Editor.
00:15:11 The OData Model Editor was developed by the gateway
team and here in Web IDE, if you
select Tools External Plugins,
00:15:21 you can see a number of plugins which were provided by
other teams within SAP.
00:15:27 So they are not coming from the core Web IDE
development team. In here you can see for
example the OData Model Editor.
00:15:35 I want to enable that. Click OK. Now I have to refresh
the Web IDE because an additional
plugin needs to be loaded into Web IDE.
00:15:47 Okay, it should be available now, so let's have a look.
This is our extension project and we
have the metadata xml file here.
00:15:58 And if we want to edit that we can now open it with the
OData Model Editor.
00:16:06 So with the right mouse select Open With OData Model
Editor.
00:16:12 You can see here the data structure, and I now want to
enhance that.
00:16:19 You can see here there are a number of properties here,
for example, the purchase order ID.
And I am now going to add another one.
00:16:30 I start typing and I can see the type ahead to define a
property.
00:16:41 I give it a name, let's say StatusEXT.
00:16:49 I give it a type; let's see which types are available.
I use control space and I get a list of types
which are available here.
00:16:59 To keep it simple, I choose the string type and that's
it. Let's see what other code completion
features
00:17:09 are offered. For example here, if you see the property
ref pointing to a property, I can also
place the cursor here,
00:17:18 press control space and I can see other properties of
this data model. There is also validation
functionality that you can see here
00:17:28 to support changes to the data model. So I added the
field.
00:17:37 I can save the data structure. Now I want to put in
some data, because if I test run the
application I want to see some data.
00:17:45 I use the mock data editor for that. I open that, I can
see the different
00:17:56 entities in my data model, and specifically, I worked
on the purchase order entity. And you can
see here that there is an additional column in my data
model.
00:18:06 You can see the mock data we've seen in the previous
units, and I can now just enter some
mock data which makes sense for my end users.
00:18:18 So a status might be approved, draft,
00:18:28 new. Okay, I filled in the mock data.
-
23
00:18:38 Click OK and now it's stored in the local data model
files in the local data files.
00:18:48 So I've extended the data model, entered some mock
data, and now I just want to make sure
that the new field appears on the UI.
00:18:56 So looking at the application here, I want to have the
new field here in this list somewhere.
00:19:06 So let's open the view layout for that.
00:19:13 This is the view we replaced, so we have the view
layout here,
00:19:24 and I just put that here in this section and add an
object attribute
00:19:35 text and do a data binding
00:19:45 to the new field. Slash,
00:19:57 close and that's it. So I added it to the individual
items of the list on the left and I just need to
00:20:07 add the new field also here to this list so that the
actual data is being pulled from the data
model.
00:20:24 Okay let's save that and in the preview again I click
Refresh.
00:20:43 There is some error in my application. Let me quickly
check.
00:20:51 Oh I missed the curly braces here, that's it.
00:20:58 Again save and refresh and you can see here
00:21:08 the application as we had before but now we have the
new status field here with values like
approved, draft,
00:21:17 new and all of this working locally. No back-end call.
No gateway service involved so far.
00:21:24 That's it for this unit. Thank you very much for your
attention.
-
24
WEEK 5, UNIT 5
00:00:08 Hello and welcome to Unit 5 in Week 5 of Build Your Own
Fiori App in the Cloud.
00:00:17 This week we are talking mainly about extensibility,
and in this section I want to talk with you
about a topic highly related to extensibility,
00:00:25 which is mobile extensibility, and a new offering from
SAP called the hybrid application toolkit.
00:00:32 We all know that Fiori as a set of applications can run
on any device.
00:00:39 Fiori can run perfectly on a desktop computer. It runs
very nicely on a tablet similar to the way
it runs on the desktop, and it also runs perfectly on mobile
devices.
00:00:50 The screen might look slightly different when running
Fiori on mobile, tablet, and desktop but
the functionality is always the same.
00:00:58 We talked about a responsive design. We talked about
responsive tables, so the nice idea is
out-of-the-box, Fiori
00:01:08 can run on any screen size and on any device. But in
many cases, I do not necessarily want to
have the exact same experience on different devices.
00:01:18 There are certain things that I might be able to do on
a mobile device that are impossible on a
desktop.
00:01:25 Mobile devices have all kinds of extra functionality. I
know the location of the mobile device. I
have a camera on almost any smartphone today.
00:01:35 I have my contact list. I have my e-mails. I have the
ability to access data from other
applications.
00:01:45 Sometimes when I'm using my mobile device I'm not
connected, or I'm occasionally
connected, and I might want to have an offline capability and be
able to work,
00:01:55 even if I'm in an area without good thorough coverage.
And one of the things that we are all
familiar with and I don't hate or love, is the ability to get
notification.
00:02:06 The mobile phone always tells me what is happening. I
keep on getting alerts. Something that
is less common on the desktop.
00:02:13 So why won't I have all of those features also as part
of my Fiori applications?
00:02:20 So if I have an application, in which I need to get a
bar code, well I can use the camera for
that. If I have an application which I need to send information
to someone,
00:02:30 I might want to access my contact list. In many
applications I want to have geolocation, so this
functionality might complement many Fiori applications.
00:02:39 And for that, we need to have the ability to add
mobile-specific functionality to existing Fiori
applications.
00:02:50 Now when we look at mobilizing Fiori, there are
different levels for that. As I mentioned, out-of-
the-box Fiori using SAP NetWeaver Gateway
00:02:58 in our front-end server is capable of running on any
device. But if we want to run it on a mobile
device, we might want to have additional functionality,
00:03:08 but we might want also to have some additional
performance features. And with Fiori today,
we have a set of additional offerings.
-
25
00:03:19 One of them is called the SAP Fiori client application
that enables me to improve the
performance of Fiori on a mobile device and get some extra
features.
00:03:31 We have another set of offerings which is a combination
of the Fiori client with additional APIs,
00:03:39 and that enables me to actually enhance the
functionality of a Fiori application running on a
mobile device. I will try to explain those different offerings
in the next few slides.
00:03:51 So the first thing I mentioned was the Fiori client
application. Why do we need something like
that?
00:03:58 The Fiori client application is available from the
Apple Store. You can download the application
from there or from the Google Store.
00:04:07 And you can run it either on an Android or an iOS
device. And that application improves the
performance of Fiori. How do I achieve that?
00:04:16 When we run in a browser on a mobile device, we don't
have full control on the way that the
browser is caching the information.
00:04:25 So many times we need to do extra round trips between
the application and NetWeaver
Gateway in order to fetch the information over and over
again.
00:04:36 The Fiori client acts like a browser or an enhancement
that improves the performance by
caching the information on the mobile device.
00:04:46 So the first time I actually run the application I need
to fetch all of the data from the back end,
but on subsequent calls, in most cases,
00:04:54 I will be able to get the information from the cache
and save the round trip to the back end, and
by that I actually improve the performance.
00:05:02 Since I'm able to run a Fiori application inside a
client that I control, I can also handle some
other limitations that happen on a mobile device.
00:05:13 Not only performance. One of the limitations is how do
I handle an attachment? If I open an
attachment in a Fiori application on a mobile device,
00:05:21 it will replace the screen or it will appear in a full
screen and I might have problems going back
to the application.
00:05:29 I want to be able to access the device capabilities
like the camera, and I want to have a better
security when I'm running on a mobile device.
00:05:37 So out-of-the-box, the Fiori client provides some of
this functionality. It provides me with
improved caching. It provides me with improved attachment
handling.
00:05:47 It provides me with an improved viewer for some of the
attachments, and it also provides an
out of the box connector to some of the device features,
00:06:00 like the camera, like persistency, offline persistency,
like the contact list. Not all of the features
of every device are available with the Fiori client,
00:06:10 and if I do want to get additional features, I might
need to develop them on my own. The Fiori
client application is based on Apache Cordova and Kapsel.
00:06:21 Apache Cordova is a set of device APIs that enables
mobile developers to access the mobile
functionality,
00:06:29 the same set of functionality that we mentioned before.
And this is an Open Source offering,
-
26
and anyone can use that and many companies are using the Cordova
API
00:06:39 to actually create mobile applications. SAP enhanced
the functionality of Cordova by creating
a set of SAP-specific plug-ins.
00:06:47 These plug-ins enable us to connect with SAP Mobile
Platform, to connect with the SAP back-
end system, as well as to do many other activities that are
required by SAP applications.
00:06:59 So we are looking at the Kapsel as a set of plug-ins
that provide the enterprise capabilities to
Apache Cordova and enrich the functionality that Cordova
provides out-of-the-box.
00:07:10 Now the Fiori client is based on those specific APIs:
the Cordova out-of-the-box API with some
of the Kapsel plug-ins.
00:07:19 But you can also create your own client. You can create
your own Cordova application that is
using those APIs with the Kapsel extensions,
00:07:29 replacing the standard Fiori client if you need
additional functionality.
00:07:36 In order to achieve that, we provide today a tool
called the Hybrid Application Toolkit which is
part of the Web IDE.
00:07:43 Now we are not going to cover all of the functionality
of the Hybrid Application Toolkit in the
scope of this course, because it requires some additional
context
00:07:54 and some additional knowledge that is beyond the scope
here. But in the future, we are
planning to provide a dedicated session specifically
00:08:03 on this tool. But since it is already available on the
Web IDE and each and every one of you
can actually create those types of applications,
00:08:12 if you want to try it, you are more than welcome, and I
will try to explain briefly what this toolkit
provides you in addition to what you have today in the Web
IDE.
00:08:22 So first of all this toolkit provides a connectivity
between the Web IDE and my Cordova
development environment.
00:08:30 The Cordova development environment in the APIs are not
available on the cloud today, so I
need to install them on my own personal computer.
00:08:39 But in order to use them from the Web IDE, I need a way
to connect the Web IDE with those
APIs that I have on-premise on my computer.
00:08:47 So the Hybrid Application Toolkit provides a connector
to my local build environment. It
provides me with a plug-in for the Web IDE that guides me
through the process of
00:08:58 developing a hybrid application, and it also provides
me with a companion Cordova application
that I can use to test what I'm creating.
00:09:06 When I start to work with the Hybrid Application
Toolkit, it is similar to any other development
project with the Web IDE.
00:09:15 No different than a project that you created for Fiori.
We have a template similar to the Fiori
templates: one for a standard Kapsel application
00:09:23 and one for a Master Detail Kapsel application. They
are very similar to what you have with
Fiori, but they provide the connectivity to Kapsel
00:09:33 and the needed functionality that can enrich the
application with mobile capabilities.
-
27
00:09:39 Once you choose the type of project, I need to make
sure that I connect securely to the
Cordova API, because
00:09:48 it's not a good idea to have two sets of APIs or two
systems, one calling a remote API without
actually identifying myself that I'm allowed to use that API
00:09:59 and that this is the correct API. So the first step is
actually to create an API key that will enable
me to securely call and use the Cordova API
00:10:08 that I have on my on-premise system. Once I have that,
I can start to build my application. And
one of the things that the Web IDE plug-ins, as part of the
Hybrid Application Toolkit,
00:10:17 provide is the ability to choose which device
capability I want to use. I can use the standard
out-of-the-box Cordova plug-ins,
00:10:28 and then I have something like a compass, device
information, geolocation, and a whole list of
out-of-the-box device-specific capabilities that Cordova
provides.
00:10:41 I can also pick any Kapsel plug-in that exists today or
I can even enhance it in any way. And
once I choose Kapsel,
00:10:49 I will see a list of plug-ins that are more appropriate
for the creation of enterprise applications.
And of course I can use the camera,
00:10:58 I can use the contact list, I can use my geolocation
and GPS, all of those plug-ins are now
available for me in my Web IDE development environment
00:11:07 to actually consume the information coming from the
device itself and inject it into my
application, whether it's a UI5 application or of course a Fiori
application.
00:11:18 Some additional functionalities that the Hybrid Toolkit
provides, as part of the assisted
development capabilities of the Web IDE, is actually the ability
to do code completion.
00:11:31 We know that we can do it with control space when we
use the Web IDE, but all of the code
that is Cordova-specific and Kapsel-specific is now
00:11:39 also a part of this assisted development mechanism. We
have a layout editor, a what-you-see-
is-what-you-get editor,
00:11:47 as part of the Web IDE. And now also the controls that
are required for the development of
mobile applications that are enriched with Cordova and Kapsel
plug-ins
00:11:57 are now part of this layout editor. So you can actually
drag and drop a user control and in
many cases, many mobile applications can be developed with very,
very little code
00:12:07 by just using the layout editor. And of course I need
to try and test it. So we have an emulator.
00:12:16 We can emulate an Android device, we can emulate an iOS
device, and then you can actually
run the application not inside the standard test harness of the
Web IDE
00:12:26 but in a test environment that is more appropriate for
testing mobile functionality.
00:12:34 After I am actually testing that and I use the
out-of-the-box companion app that is part of the
toolkit to actually wrap the application
00:12:44 with something that is more of a mobile application,
and test the functionality that I want to
have, I can deploy it back to my Cordova development
environment.
00:12:56 So I can, from the Web IDE, send my application and
download it to my local machine, and
then I can actually embed the Cordova API
-
28
00:13:06 and use the Cordova API as part of my project. So I can
create integration between what I
created in the Web IDE
00:13:14 and what is available to me in the Cordova development
environment on my computer. And
I'm now actually creating that specific application,
00:13:23 and once I finish this process, I can go and try the
application which is now complete with
mobile functionality
00:13:32 as well as the UI5 functionality that I created in the
Web IDE. I can now test this application,
00:13:37 either in an emulator or send it to a mobile device and
actually see it in action. The last thing
that I need to remember
00:13:48 is that if I really want to deploy this application,
I'm not going to deploy to the HANA Cloud
Platform. I'm not going to deploy it necessarily to the
launchpad. I might want to deploy it
directly
00:13:57 to a mobile device, because it can be a real mobile
application that can run perfectly on a
mobile device. And in order to do that
00:14:07 one of the options I have is actually to convert this
application from the Web IDE into a mobile
application,
00:14:16 and then I can sign that application and upload that
through SAP Mobile Secure Management
System into the Mobile Place.
00:14:26 The Mobile Place is SAP Application Store, and once I
actually sign the application and put it
in the Mobile Place, you can download that directly to your
mobile device
00:14:35 and use it like any other mobile application. So with
the Hybrid Application Toolkit, you can use
the Web IDE in the cloud together with the Cordova development
environment
00:14:46 that you have on your own personal computer to create
native mobile applications, or to
extend an existing Fiori application
00:14:56 with functionality that can enrich the application when
running in a mobile device. You will hear
a lot about this toolkit in the future
00:15:06 once we have more and more functionality embedded into
that together with SAP HANA Cloud
Platform mobile services,
00:15:13 and I suggest that from time to time you check how this
toolkit evolves, because it can really
help you create amazing mobile applications.
00:15:23 Thank you.
-
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.