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.