Post on 24-Sep-2015
description
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.