openSAP Build Your Own SAP Fiori App in the Cloud

WEEK 4, UNIT 1

00:00:11 Hello and welcome back. In the previous unit you learned how to create a Fiori app from a Fiori

Master Detail template, bind it to an OData model.

00:00:21 You also learned how you can test it within the SAP Web IDE with real backend data or with

mock service.

00:00:30 In many cases the apps created with the template will not 100% fit your needs. You will

probably want to do some enhancement to the app generated with the template.

00:00:43 In this unit we will go a little bit deeper and show how a Fiori app project is built and how you

can enhance the app created by the template to adjust it to your needs.

00:00:53 We will also present how to deploy the app to SAP HANA Cloud Platform and create a version

in Git,

00:01:03 as well as how to deploy an app from the SAP Web IDE into the SAP ABAP SAPUI5 repository

on premise.

00:01:14 Let's start. So the key steps, as I mentioned, are, first we will enhance the app we created in

the previous unit with both, layout editor and code editor.

00:01:29 Then we will test the result app. When we are happy and ready, we will deploy it to SAP HANA

Cloud Platform, create a version in Git,

00:01:37 and also I will show you how to deploy an app to the SAPUI5 ABAP repository on premise.

00:01:49 Okay, so this is the SAP Web IDE and this is the application that we created in the previous

unit.

00:01:57 Let's look at a little bit at the project and the file structure here. So, this is like a typical Fiori

project or even SAPUI5 project.

00:02:11 You can see here the CSS, the internationalization configuration, the model, you see the MVC

structure with the model and the EDMX file

00:02:22 You see, under the View folder, the controller and the views. The SAP Web IDE template

generates XML views,

00:02:36 which is the recommended view type, and we see that the SAP Master Detail template creates

like three views with controllers, an App, a Master, and a Detail.

00:02:55 We can see also the Component.js which encapsulates the app and contains some metadata

information like name, configuration information like the dependencies,

00:03:12 we will see it later on in the Extensions Unit, some routing information and also initialization.

00:03:22 The Component.js is a major component in the SAPUI5 framework.

00:03:31 Maybe another interesting file here is the neo-app.json, which contains the destination

information and enables working with SAP Web IDE on the SAP HANA Cloud Platform.

00:03:49 Okay, so now let's just run the application. So, we remember how the application looks like,

2

and we will start our enhancement from there.

00:04:04 Okay, so we can see here the Master Detail application with the sales order.

00:04:09 And, here we have one tab with additional information, the second tab is used, as you

remember, we left it free since in the service we used we didn't have one-to-one navigation.

00:04:25 Okay. Let's open now the view, the Detail view. We will open it with both, the code editor and

with the layout editor.

00:04:45 I will show you how you can work simultaneously with the code editor and with the layout editor

00:04:50 and really enjoy the best of two worlds and optimize your development experience.

00:04:57 So, I have already introduced the layout editor, but let me do a short recap. So here we have

the palette with the different SAPUI5 controls.

00:05:10 This is the canvas, which actually shows how the application looks like. This is the Properties

and Data panel,

00:05:18 which presents the visual properties of the control. And we have here the Outline pane, which

actually shows how the XML view is outlined.

00:05:35 And as you can see, when I choose, when I select the different controls in this view,

00:05:43 the Properties panel is updated based on the control that I choose, and also the Outline is

updated,

00:05:51 and the right node in the Outline is selected based on the control that I selected.

00:06:00 Let's do some changes now. So, for example, let's change this icon tab filter, let's change its

icon.

00:06:14 In the exercise, we included a link for the SAPUI5 Developer Guide, and here you have like the

list of icons that are available.

00:06:26 Let's look here for some Documents icons, and we will choose the document icon.

00:06:40 So, okay, just a second here. So, you see here we have the Icon field, and I will change the

value to document.

00:07:01 And, the icon is changed. If you go now to the code editor, and this is the page,

00:07:15 this is the IconTabBar, you can see it here. And this is the IconTabFilter, and you can see that

the icon was changed.

00:07:31 Let's do some more changes and then run the preview to see how the application looks like

with these changes.

00:07:39 Let's now try to change the binding of the information. So, I choose here an ObjectHeader

control.

00:07:49 You see that the right node in the pane was selected. I will now choose the property,

00:08:00 and when I choose the right property, I can see the data binding and change it.

00:08:06 So, here I choose the property of the title. You can see here that it's already bound, and we

can change here the binding.

00:08:23 So if it was OrderId, we can now change it to something else, let's say, change it to

CustomerId.

3

00:08:39 Okay, now we can save the changes. Again, we can run the application in the preview to see

how it looks.

00:08:55 Okay, so we see here the updated icon. And, this tab is still empty.

00:09:08 And you see that the data binding here is now presenting the CustomerId and not the sales

order.

00:09:20 Let's continue. It's important when you work with the layout editor to select the Outline pane

here.

00:09:37 Okay, let's do some more changes. Let's also remove... You will see how easy it is to delete

code with the layout editor.

00:09:46 So, let's remove this empty icon tab filter. If I go now to the code editor, you can see that we

have only one icon tab filter now.

00:10:06 So, you see the IconTabBar and you can see that we have now only one IconTabFilter.

00:10:15 We are scrolling down, you see that we have only one. Okay.

00:10:23 Now let's add another icon tab filter which contains the sales organization information, like the

sales organization and the division.

00:10:34 So, we will choose from the container an Icon Tab Filter control. We will select it with control

and bring it to the icon tab bar.

00:10:50 Let's change now the icon again. First let's change the... I should select it of course, sorry.

00:11:06 And now I can change the different properties. So the icon color, we can change it to default,

00:11:14 we can remove Count information, and I can change the text here.

00:11:27 Okay, I can remove here, I can change it to Sales Org; and let's choose another icon here.

00:11:50 Okay, so we will go now to People, and let's choose the company-view.

00:12:07 Okay, so now I will add some content to this icon tab filter. I will go to the layout, and I will

select a Simple Form.

00:12:20 I will remove one field here. Let me just change the title. So I'll put Sales Org details.

00:12:42 Here I will put the Sales org and here... So, I'm selecting the control that I want to change,

00:13:02 and then with the Properties panel I just change the Text here. Let's do it here: Division.

00:13:10 And now let's do the data binding. So, I choose this input control. You see it was selected in

the Outline.

00:13:21 Let me open it, let me open the properties. I will now choose the value property and there I will

do the binding.

00:13:32 So here I will choose the SalesOrg, and you can see here now the indication that it is actually

bound. You see it here.

00:13:43 And for this field I will add the division information. I will bind it.

00:13:56 So, you see this is the OData collection associated with this view, and let me choose Division.

00:14:05 Okay, and you see the binding is done. Okay, good. So let's look how it looks in the code

editor and run it and proceed from there.

4

00:14:22 So, you can see that now I have another IconTabFilter here with the company-view icon, and

you can see here the SimpleForm that I just added.

00:14:40 Let's now run it. Okay. So if we switch, you can see the new icon tab filter that we added. Just

a second, I did here a small mistake, let me fix it.

00:15:03 So, here in this icon tab filter, let me delete this one. Let's now run it to see the results.

00:15:21 Okay, so you can see the new icon tab filter that I just added with all the information and the

data binding.

00:15:32 Okay. Now that I'm happy with it, maybe one last thing.

00:15:38 I want to show you that you can switch between using the layout editor and the code editor. So

until now I did all the changes with the layout editor.

00:15:48 Let me do a small change here with the code editor just to present how you can work with this

tool.

00:15:59 So, for example, a change we can do is we can remove from the first IconTabFilter the

CustomerId information.

00:16:13 Okay, so this is the IconTabFilter, the first one, and here you can see the CustomerId

information.

00:16:29 So, let's remove it and run it again. Okay, so you see that it was updated.

00:16:50 Okay, now the next step. Let's say we are happy with new application, with the enhancement

that we did.

00:16:59 And we want to deploy it into the SAP HANA Cloud Platform so we can share it with others

and also publish it and also create a version in Git.

00:17:15 So based on this version, we can now create more versions and do some version control

management.

00:17:24 So, we have various deployment options in the SAP Web IDE, and now I will show you how to

deploy an application into the SAP HANA Cloud Platform.

00:17:38 Before you do that, you have to verify that your Git Settings were updated or set.

00:17:51 So, you go to the Preferences, you select the Git Settings and you need to add your email

address and user name.

00:18:00 These are the credentials that you use for the SAP HANA Cloud Platform and, for the trial, it's

the same as your SCN credentials.

00:18:12 Okay, so now I will deploy the application to SAP HANA Cloud Platform. So, I choose here

Deploy to SAP HANA Cloud Platform.

00:18:32 Okay, I have to add my password to the Git, which is the password to the HANA Cloud

Platform.

00:18:42 I will create now a version, I will call it 1.0 and I will activate it. So, it's actually deployed on

HANA Cloud Platform and not only to the Git.

00:19:03 Okay, so it should take a few seconds and it will be deployed. Let's look a little bit in the

meantime on the cockpit.

00:19:20 So this is... I have to refresh my cockpit here. Okay, the HTML5 Applications in my account

5

which are deployed to the HANA Cloud Platform, you can see them here.

00:19:37 You can see I have many applications. So, let's look at the application that I've just deployed.

00:19:50 Okay, so let's look at the latest deployed version of the application, which I've just deployed.

00:20:02 Okay, so here I can see actually how it runs. Okay, let's go now to the SAP HANA Cloud

Platform cockpit.

00:20:17 So if we select here the HTML5 Applications, you can see all the HTML5 applications that you

deployed to the SAP HANA Cloud Platform from your account.

00:20:36 We see here the salesorder that we've just deployed. Let's select it. Okay, and you see here

it's available and you can see here the Application URL.

00:20:54 If we go back to the IDE now and we open the Git History pane, you can see that we created a

new version.

00:21:06 And when we do more changes and create some new versions with the Commit and Push, we

will see how the versions are evolving.

00:21:15 The last thing that I would like to cover in this unit, is to show you how you can also deploy the

applications

00:21:24 developed with the SAP Web IDE into SAP ABAP SAPUI5 repository on premise.

00:21:34 So, to do that, since the SAP Gateway demo system that we use for this course doesn't

provide deployment permissions,

00:21:46 I created exactly the same application but connected into an SAP OData service that I do have

access to and to a system that I can deploy to.

00:21:58 I will show you this application. It's this one: salesorder_gm6. Let's just run it. So you see it's

the same application that we created from the template.

00:22:14 Let me just add my credentials for this system.

00:22:26 Okay, so this is the original application that we created from the template without the

enhancement that I did during this unit.

00:22:39 And now let me show you how I deploy it into the ABAP SAPUI5 on-premise repository.

00:22:49 So you see here I have the Deploy. I will now choose Deploy to SAPUI5 ABAP Repository.

00:22:58 I have to choose here the system, and its using again the same destination mechanism.

00:22:58 So I have here a destination for the GM6, it's an internal system, 001. Let's select it, and then

again... Okay.

00:23:30 We have the options to either deploy a new application or update an existing application. I will

choose the Deploy a new application option.

00:23:39 Now let's give it a name. I should start it with the z, and let's call it salesorderos for the

openSAP, sales order deployment to on- premise, okay.

00:24:07 I will use the default values here. Confirm, and you can see here that the deployment is now in

process.

00:24:20 Once it will be completed, I will show you the actual application on the ABAP Workbench.

00:24:36 So, okay, we are done. Let's go now to the ABAP Workbench through the SAP GUI.

6

00:24:46 So, let me look for the application. So, you see here BSP Application. It's not that we are using

the BSP. The application is not a BSP application.

00:25:06 We just leverage here the BSP technology in order to reuse the ABAP transport system and

the notes support.

00:25:19 Okay, so let me choose zsalesordero*. Okay, so you see this is the application. Let's open it,

let's look in the Properties tab here

00:25:41 so you can see that you don't have the date but you can see that I've just deployed it.

00:25:48 You can see here how the project looks like. So now, let's open the folders here and you can

see the project with the files.

00:26:04 If I choose now the index.html, I can actually test it, and you can see here the app.

00:26:16 You can see it's running on the ABAP machine. So, once you use the SAP Web IDE on the

SAP HANA Cloud Platform for the development of the application,

00:26:31 when you deploy it back into the ABAP SAPUI5 on-premise repository, it's disconnected from

the cloud and everything is available for you on premise.

00:26:45 So you can see here like the application and the data is provided from the backend system.

Thank you.

7

WEEK 4, UNIT 2

00:00:11 Hello and welcome back. In the previous unit you learned how to enhance your Fiori app with

SAP Web IDE code editor and layout editor

00:00:22 and deploy the app to the SAP HANA Cloud Platform or ABAP SAPUI5 repository on premise.

00:00:31 In this unit I will demonstrate a more advanced enhancement to your Fiori app.

00:00:38 If you are familiar with SAPUI5 routing concept, everything in this unit will be very clear to you.

00:00:46 If you are less familiar with that, you can use the documentation that was provided in previous

units in order to learn a little bit more about it.

00:01:00 So let's start. What we will do in this unit is I will add to our Sales Order app, which we created

from a template, a new icon tab filter and we will add a table to this icon tab filter.

00:01:16 This is useful, for example, for cases like in our case where we have an OData service with

different data collections.

00:01:23 One is for sales orders and the other one is for the items which are associated with the specific

sales order.

00:01:32 The table will contain the items which are associated with the specific sales order which is

selected.

00:01:40 If one wants to see some more information about the specific item, he can navigate from this

table entry into a new view using the SAP Fiori routing navigation mechanism.

00:01:54 Let me show you how to do that.

00:01:57 The first thing that we will do, we will use the Sales Order app, which was created with the

template, and add a table.

00:02:08 Okay. So I created here an application based on the SAP Fiori Master Detail app that is very

similar to what we did in previous units,

00:02:21 and I added an icon tab filter with the layout editor in a similar way like we did in the previous

units. So let me just show you how it looks.

00:02:34 Okay. So you see here, these are the items and these are the icon tab filters. So we have one

icon tab filter with the information that we filled and the second one is empty.

00:02:47 We will now use this icon tab filter and add the table with the items.

00:02:57 Okay. Let me open... In this unit we will work a lot with the code editor and I will open here the

API Reference pane.

00:03:09 So it will help us during the development. Okay, before we start, let me open our metadata file.

00:03:20 So we see here this is the... You can see here the data collection of the SOHeaders with its

properties,

00:03:34 and we see here that it has a NavigationProperty to SOItems, which is the second data

collection

00:03:43 which you can see here, which holds the items associated with this sales order.

00:03:53 You can see here that we have a one-to-many relation between the sales orders and the order

items.

8

00:04:03 Let's now got to the Detail view to edit a table.

00:04:09 You can see the IconTabBar. This is the IconTabBar and the two IconTabFilters.

00:04:24 So this is the first one that we have, and this is now the second one, that I just added.

00:04:44 Okay, so this is the second one that I have, which is still empty. And I will use it now to add a

table. Okay.

00:04:54 So if I want now to add a table, I just start typing and I can see that I have here the code

completion.

00:05:06 Okay. And from here, I can either choose the API Reference. Here I have some reference,

some information about API of this table.

00:05:17 If I want to get some more information, full information, I can browse to the SAPUI5 SDK Demo

Kit directly from the SAP Web IDE.

00:05:28 Another option is to use the code snippet like this.

00:05:34 For the interest of time during this unit, I will use some code examples that I already prepared.

And you have the same code examples in your exercise.

00:05:46 Okay. So let me copy, let me show you the code. So what we see here is we see the table, the

columns, the definition of the columns.

00:06:01 The interesting thing here is the context. I set here the context for the data binding to the

SOItems navigation property.

00:06:11 So this table will be bound to the items data and not to the sales order data with the

SOHeaders information.

00:06:24 Okay, I copy the code, here. Okay. I save it. Let me run it.

00:06:38 There is problem. Something is wrong. It seems I copied it to the wrong place.

00:06:57 Okay, I put it here. Let's try again. Better.

00:07:14 Okay, now you can see the icon tab filter with the information about the items.

00:07:24 If I change here the items, the selection of the sales order, you see that the associated items

are changed accordingly.

00:07:35 Okay, let's continue from here to the next step.

00:07:49 Okay. What we will do now, we will add a new view to present the specific table entry details

that were selected.

00:08:02 So, go to the Detail view again. So, what I will do now I will add a new component, a new view

component to my application.

00:08:17 So I open a New, Component. Okay. I will choose the SAPUI5 View.

00:08:33 I will call my view ItemDetail. Okay. Now I press Finish.

00:08:50 Let's see how it looks. What I see here is that a new view and a new controller were added to

this folder: ItemDetail view and ItemDetail controller.

00:09:08 Okay. What I will do now is we will add the new view, that was just added, to the routing of this

app.

9

00:09:26 So we go to the Component.js. You can see here the routing.

00:09:38 One of the roles of the Component.js with an SAPUI5 app is the navigation, the routes.

00:09:46 You see that there is already a subroute for the Detail view, and now I will add another

subroute for the ItemDetail.

00:10:15 So I'm going to the Component.js.

00:10:26 Okay. I want also to show you the alert mechanism. If, for example, I forgot to add a comma, I

got it here: an alert that something is wrong, and I add now a comma.

00:10:40 I can use the beautifier to make it look good, okay.

00:10:48 And now I press save. Okay. So you see I have here now, I added a new route for ItemDetail.

00:11:03 Let's continue now to the next step. What we will do next is I will add to the... Let's go to the

presentation.

00:11:13 Okay. So I added a new view which I will use to present specific table entry details.

00:11:23 The next step is to change the Detail view controller to navigate to the new view once I select

an entry in the item of the icon tab filter.

00:11:34 Let's see how to do that.

00:11:40 So I'm going to the Detail view.xml, to my table, to the table that I added.

00:11:48 And you see here that we have an option to add a function that will be called when the event of

itemPress has happened.

00:12:09 So let me now add a function for this event.

00:12:18 I will call it onItemDetailPressed.

00:12:29 Okay, I'm adding it here. Okay, so we will now copy the function to the Detail controller.

00:12:43 No, it's not this function, okay.

00:12:54 Okay. I have an alert. Probably I forgot a comma.

00:13:07 Yes. And now let me Beautify it.

00:13:15 Save. Okay. Additional two things that we need to do:

00:13:22 We need to update the name space for the ItemDetail view and controller with the name of the

application, so salesorder_w4u2,

00:13:49 and also the controller: salesorder_w4u2. Okay.

00:14:06 Now I will copy the Init function to the ItemDetails controller.

00:14:28 Okay. Let's try it to run now.

00:14:38 Okay. So here is our icon tab filter. Let's try to select an item and navigate.

00:14:47 I have a problem here. Let's see what the problem is.

00:15:03 Okay. I forgot a dot here.

00:15:12 Let me Save and Run again.

10

00:15:20 Okay, let's try it again. Here we go.

00:15:27 We navigated. Now we want to add here the button to navigate back from the ItemDetail view,

back to the Detail view.

00:15:36 Let me do that. So, I'm going to the ItemDetail view. I will look for the page.

00:15:48 Okay, and here I have to add,

00:15:57 I have to have the property of navButtonPress to give a function when the event of navigating

back is raised and also to show the navigation button.

00:16:18 So let me copy that. I will copy it here.

00:16:30 Okay. Now we will have the navigation back button, and when I will press it, I will navigate

back, no.

00:16:45 In order to enable navigation back, I have to add the function to the ItemDetail controller.

00:16:57 So when the function is raised, when the event is raised, this function will return the user from

the ItemDetail view to Detail view.

00:17:11 So let me just copy this function.

00:17:17 Okay, so this is a simple function that just navigates back to the Detail view.

00:17:32 Okay, I see I have an alert. I will add a comma.

00:17:42 Okay. Let me now try to run it.

00:17:50 Okay, here we go. We change the icon tab filter, we select an item, we navigate to the

ItemDetail view.

00:17:59 And now, when we press the button, we navigate back to the Detail view. Okay.

00:18:04 Let's go back to the presentation. So we completed this phase. So we changed the Detail view

controller to navigate to the new view.

00:18:17 We also added the capability to the new ItemDetail view to enable navigation back to the Detail

view.

00:18:27 And now we will continue to the last step of this unit. We will add a simple form to the new

view.

00:18:36 So you have already seen in previous units how to add a form either with the layout editor or

with the code editor.

00:18:45 So I'll just do it now quickly. I go to the ItemDetail view and just add a form. Okay.

00:19:00 I have to define it here to add this name space first and then to add the SimpleForm that will

just show Item, Material and Description information.

00:19:20 So let me first add this name space.

00:19:34 And now I will copy the function, the SimpleForm.

00:19:52 Let's run it.

00:20:00 I choose the item in the table, I navigate to the Item Detail view. You see here the data for the

item, and now I will navigate back.

11

00:20:13 Okay, so we completed this unit. We managed to add an icon tab filter with a table, select an

item in the table

00:20:26 and then navigate to a new view that shows the Item Details and then navigate back to the

Detail view.

00:20:34 You have all the code snippets that are used during this video in your exercise. Thank you.

12

WEEK 4, UNIT 3

00:00:12 Hello and welcome to week 4, unit 3, which is going to be an introduction to the SAP Fiori UX

Design and Build Challenge.

00:00:21 We've hinted at this throughout the earlier weeks and sessions, and today I'm going to give

you an overview of what this challenge is and

00:00:30 how it relates to the course and what you need to know to get started.

00:00:36 First off, you should be aware that it's worth one-third of your final grade, so clearly you're very

interested in understanding what's required.

00:00:47 And it's meant to give you an end-to-end hands-on experience of combining all of the

components that we've talked about throughout the entire course, from design to development

of your own Fiori app.

00:00:59 There's also a peer review process involved, and what this means is that your work will be

reviewed by several other participants in the course

00:01:10 who will make sure that you've adhered to the requirements of this challenge. And you also will

participate in reviewing your peers' submissions,

00:01:20 so you both get reviewed and you review.

00:01:23 One thing I want to make clear is that a working, fully production-ready app is not required to

get the full points.

00:01:31 We have specific criteria which will be listed on the Web site now, on the course page, which

explains specifically

00:01:39 how much you have to complete in order to get the full points. But we don't want you to be

scared or think that this has to be something that is completely ready to go.

00:01:49 We just want to make sure that throughout the course you've learned enough that you can feel

comfortable doing your own design of an app and then starting the process of building your

own app.

00:01:59 So we'll discuss some of those details.

00:02:02 Another thing to clarify is that as we mentioned earlier on in the course, there are prizes

involved, and we're giving away three MacBook Air laptops.

00:02:14 However, the criteria for winning one of the prizes is somewhat different from the criteria of

what you need to do to get the full points.

00:02:23 So everybody is entitled to the full points. It's not something that's meant to be super difficult.

00:02:29 If you follow the instructions and have been learning along the way through these first few

weeks, you're well equipped to get the full points.

00:02:39 But of course, since there are only three winners that can get the MacBook Air laptops,

00:02:45 you'll have to do quite a bit more, potentially, in order to compete and get a prize.

00:02:53 So first up, here's a checklist of the different components you should be aware of and have

finalized by the end of the course.

00:03:04 You need to make a case, which is tell a story. We talked about segmentation and targeting

and positioning. Your app can't be everything to everyone.

13

00:03:13 It has to be for a specific use case for a type of user or personal in a particular industry.

00:03:20 So you'll want to describe that and explain why you've chosen to build and design what you've

chosen to design and build.

00:03:27 Along with making that case, you need to create a persona and show us how you've done that.

This persona needs to have his or her own sets of needs or goals,

00:03:38 pain points that you're addressing, those sorts of things as we've discussed in earlier sessions.

And you need to map out a user experience journey

00:03:46 and explain what this particular persona does throughout this particular scenario and what's

top of mind for them, what the touchpoints and actions items are

00:03:56 that they go through as they're trying to accomplish what they're trying to accomplish for the

scenario that you're covering with the app that you're designing and creating.

00:04:04 And you also need to mock up this app. We've given you access to some resources that

you've now seen. The Fiori Prototyping Kit.

00:04:14 You have at your fingertips a lot of things that you can really use to make your own mockups

very easily and effectively.

00:04:24 You don't have to be a graphic designer. We've given you a lot of graphics that you can drag

and drop and make your own.

00:04:30 And then you can also add your own flair to those mockups and show us your unique

interpretation of what the app needs to be.

00:04:41 And then finally, you need to start the app creation process using the Web IDE, which we've

already started to show you how to do in the previous week and this week, and you'll learn

more by the end of the course.

00:04:52 The important thing here is that when you start the app process again, and it doesn't haven't to

be a fully completed, fully functioning app that can run in any landscape.

00:05:01 It's just here for you to show us what you've been able to learn and you just need to show

00:05:09 two different design components in that creation of the app that you've done in the Web IDE.

00:05:15 And on the Web site, we have instructions of how you're going to go about submitting your

work and showing that along with the mockups.

00:05:22 Okay, here's the same checklist just with some hints or tips for how to submit or how to format

potentially the different components as part of your submission.

00:05:31 When you're making a case, this can be written or visualized. It doesn't need to be more than a

couple of paragraphs.

00:05:37 Or if you want to visualize it, you can do like a storyboard format, like cartoon characters,

whatever you feel comfortable with.

00:05:44 But again, it's fine if it's written. That meets the criteria.

00:05:49 When you create a persona, we've given you a template. If you go back to week 2, unit 1, we

discussed how to do that and the template is on the course landing page.

00:05:58 Same goes for mapping out the user experience journey. There's a template from week 2, unit

1. You can feel free to fill that out and use that as part of your submission.

14

00:06:09 And the mockups, we encourage you to use the Fiori Prototyping Kit because it's really

important that you adhere to the Fiori design principles we've talked about,

00:06:18 and it's more likely that you're able to do that if you start from the starting point of the Fiori

Prototyping Kit.

00:06:25 You can add your own graphics or components, but again they need to adhere to the Fiori

design principles, so make sure to work on that as you put together those mockups.

00:06:35 And then as far as starting the app submission process, we have instructions on the course

landing page, but you'll do that through the Web IDE.

00:06:43 And you just need to show two different design components from your mockups and from your

user experience journey and persona

00:06:51 that have been implemented and are part of that initial app creation process.

00:06:59 Okay. As far as the points criteria. Again, this is for getting points. We'll talk about the prizes

later.

00:07:05 Here's—in kind of a big-bucket overview way of looking at it—here are the three categories of

points.

00:07:12 The first is did you submit all the components in a coherent format? Is there a story, is there

the persona, the user experience journey, the mockup,

00:07:22 and have you submitted the initial creation process through the Web IDE? Have you shown us

that you've done that?

00:07:29 The second category is did you follow all the Fiori design guidelines and principles?

00:07:34 Is your app, and the mockups along with it, simple and focused on the importance?

00:07:40 Is it user-centric and intuitive? And does it leverage the SAP Fiori look and feel?

00:07:46 And then finally, did you complete the peer review process? This is important because

obviously if you don't do the peer review process, then you won't receive peer feedback

yourself.

00:07:57 It's important that everybody participates so that all participants in the course get feedback

from others participating.

00:08:06 So if you complete these three broad categories as part of your submission process, you'll be

able to be eligible for the full points involved.

00:08:14 And again, this is worth one-third of the total points for the entire course.

00:08:22 So what's different from points versus competing for the prize?

00:08:27 As part of the peer review process, you'll be able to flag some of your peers' work if you think

it's extraordinary and worthy of being considered for the prize.

00:08:38 This isn't the only way that somebody gets considered for the prize. There are internal judges

from SAP who are looking at the work of all the submissions.

00:08:47 But if you want a particular submission that you're peer reviewing to be considered, you can

flag it and say that you think it's extraordinary work.

00:08:58 For you to be considered, you need to stand out, show more, get further. So if your app is

more fully developed,

15

00:09:06 if the design is really something quite brilliant and unexpected, but still adheres to all of the

requirements for the course,

00:09:15 the Fiori design guidelines and principles, that's how you'll be in a better position to win the

prize.

00:09:22 You can't deviate from what you need to do for the points. You still have to adhere to the Fiori

design principles and still submit all the components like anyone else going for the points,

00:09:32 but if you go above and beyond and still adhere to those original criteria, then you have a good

chance at being considered.

00:09:39 As has already been mentioned, the top three submissions as determined by SAP experts will

each receive a MacBook Air.

00:09:48 And also, we're going to be showcasing additional top submissions on the course landing

page.

00:09:52 We'll have a page for that once we go through the review process so you can see not just the

three winners, but some of the other top work that's been submitted.

00:10:02 I know this is a lot of information. We'll have more details and specifics on the course landing

page now with a FAQ

00:10:10 and a special section where you can ask more questions if you have them.

00:10:16 And I just wanted to review the resources available to you as part of this build and design

challenge.

00:10:25 There are the Fiori design guidelines. There is the Fiori Prototyping Kit. There's a dedicated

section now in the course

00:10:34 with a forum and some other links and items you can download, including the Fiori Design

Best Practices Guide.

00:10:42 One important note. You can choose to reuse the work you've done in previous assignments in

earlier weeks leading up to this.

00:10:49 Or you can start from scratch. You don't have to feel beholden to the different assignments

you've already completed.

00:10:56 They were there to help you get ready for this final assignment, this challenge.

00:11:01 But you can start over or you can start from the perspective of the scenario and designs you've

already done up until now.

00:11:09 And you're also going to be seeing some more examples in some future sessions, which show

previous work that's been done from a previous Fiori course.

00:11:20 And the winners from that course—at least one of them—is going to be demoing the app he

was able to design and create by following these principles and guidelines.

00:11:31 So you'll have something to kind of give you guidance and help you along the process.

00:11:37 With that, I want to say thanks for joining today. If you have any more questions, feel free to

ask them on the online forum.

00:11:43 And looking forward to seeing what you're able to submit. Thank you.

16

WEEK 4, UNIT 4

00:00:12 Hello again and welcome to Unit 4 in Week 4 of Build Your Own Fiori App in the Cloud.

00:00:18 In this session, I want to talk with you about a few topics that we called Other Considerations

When Building a Fiori Application, mainly performance and security.

00:00:29 Now, luckily for us, the Web IDE and the reference application that you are using during this

course

00:00:37 take care of most of the performance and security issues that you might need to worry about.

00:00:46 But it's always good to understand what you might want to do if you want to divert from the

standard reference application or use different tools.

00:00:56 And it's always good to understand how performance is impacted by different architectural

layers that we have in Fiori.

00:01:06 So when I talk about performance, it's important to understand how Fiori applications are built

and what are the different architectural components that might have an impact on

performance.

00:01:17 So if we look at that, Fiori applications are web applications. So they run in a browser. Now,

not all browsers are equal in the way they actually parse UI5.

00:01:29 Some browsers are faster, other browsers might take more time to parse some of the

components. And it's up to you, of course, to recommend the best browser.

00:01:39 You should also check which browsers are officially supported by SAPUI5 and make sure that

you are using one of the supported browsers to actually render this specific UI.

00:01:50 The other considerations, like network time, security, how many firewalls we have and things

like that, usually will not have any impact on that and we can change that.

00:02:02 The second layer that we have is the Fiori Front-End server or, in other cases, the Fiori Cloud

launchpad.

00:02:10 Some of the functionality or some of the tasks that are involved in the creation of Fiori UI,

happen there.

00:02:19 And, of course, we need to make sure that this environment is optimized. NetWeaver Gateway

provides us with the OData services,

00:02:26 and that's another place that we need to look for if we see a performance bottleneck, make

sure that we have our OData services data optimized as much as possible

00:02:34 and that we are not wasting too much time on fetching data and converting data into OData.

00:02:43 And, of course, everything has to do with getting the data itself.

00:02:47 And the way our data is retrieved from the backend system, our database queries, the

communication between the Gateway and the backend also has impact on the overall

performance of the application.

00:03:00 But in many cases, we, when we develop the application itself, have very little control on that.

00:03:07 So, let's try to understand what happens when we first trigger a Fiori application. Now, when

we first call an application, there's nothing in the cache.

00:03:18 The browser cache is empty, and when we actually start and look at what is happening when

17

we trigger an application, the first thing that happens is

00:03:26 the launchpad is trying to figure out where to get the application from. So we have a resource

link resolution, which takes a few microseconds.

00:03:38 And then we actually start to fire up different components. Now each and every component

that we fire actually makes additional calls and loads different resources into memory.

00:03:49 We talk about UIs. So there are all kind of resources, like JavaScript files, style sheet files,

static artifacts - things like that.

00:03:56 That needs to go into memory in the first time, from remote systems sometimes.

00:04:02 And once we have that, the UI5 uploads the metadata of the different services that we are

going to use when creating the UI.

00:04:13 In a master/detail pattern, this is the phase in which we are actually creating the list on the left

side. Up until now, all those actions were sequential, happening one after the other.

00:04:27 Luckily, when we generate the detail part of the screen, we can actually create it in a parallel

way by batching those actions together, and that can save some time.

00:04:40 This is the overall process. You don't need to understand each and every step in details but

just have a general understanding of what's going on there

00:04:48 because you need to remember that when you build or use the applications.

00:04:55 Now, if we do cache the data, then on the second time that we are going to load an

application, some of those activities happen faster

00:05:03 because the data is retrieved from the local cache, and that should take less time.

00:05:08 This is luckily the reason why we have the Fiori client for mobile devices because in mobile

devices it's very important to cache the information

00:05:17 and not go back to the backend system to fetch that data again. So the first thing you can do

about performance on mobile scenarios is, of course, use a Fiori client, Kapsel client that

caches the data.

00:05:30 And, of course, on the desktop it's also important to make sure that data is cached on the

client side.

00:05:37 So let's look at some other best practices that are important when we build an application.

00:05:42 As we mentioned, we are loading lots of information in memory. So keep in mind that, if you

need a specific library when rendering the UI, don't call all the library at the beginning.

00:05:59 If you don't need a specific library to render the topper of the screen or the list, call it late in the

process.

00:06:05 Usually we call all the library in the Component.js, JavaScript component. And that is the first

thing that is being loaded.

00:06:13 But if at some point I might have a Master Detail application that in the Detail screen I have a

tab, that presents me with a complex table,

00:06:24 I don't necessarily need to load that specific UI control that renders a complex table as the first

thing when I just trigger the application.

00:06:32 So, try to keep in mind, which elements you need to load first and which elements you might

18

want to save later.

00:06:43 There's a different way or there is a way to actually load a resource only when you need it. You

don't need to put everything in the Component.js file.

00:06:50 The second thing that you need to remember is that we are calling OData services. Now, the

rule when we build Fiori applications is that: One service for one application.

00:07:02 This is the optimal way. We don't want to start and merge data on the UI level. We don't want

to build applications that consume two fields from one service

00:07:13 and three fields from another service and do some kind of complex merging and manipulation

of data on the UI layer.

00:07:21 So use only one service for one UI. Another thing that you might want to do is to check that

you are using the most optimized service.

00:07:30 You are more than welcome to reuse any service that we have in the repository,

00:07:37 but, if you only need few fields from a backend system, don't use a service that fetches a

complete transaction with 200 fields.

00:07:47 In this case you might want to create a new Gateway service that only fetches the data you

need for that specific application.

00:07:54 So, reuse of services is important, but sometimes you can optimize performance by actually

creating dedicated services

00:08:02 that only bring the information you actually need in your application. Another best practice is

how to use those services.

00:08:15 In many cases, when I bring or fetch data from the backend and I start to create a list of value,

I need to know how many data elements I'm going to get.

00:08:23 So the standard way that most developers do it is by calling the count parameter, using the

count parameter to get the number of elements that I'm going to get.

00:08:34 And only after I know how many data elements I'm going to get, then I'm actually doing the

actual data service call to get the actual data.

00:08:44 Now, instead of doing two calls, one for the count and one for the actual data element, I can

use the inline count.

00:08:51 The inline count is one of the parameters that we have in OData in version 2, 3 and 4. And that

brings me the data with a count in one call. So, I'm saving one round trip.

00:09:04 Now, we're always trying to save those round trips to the backend. And then, another best

practice we have when we build Fiori applications:

00:09:11 Do not trigger more than two sequential OData calls to the backend.

00:09:17 You know that, when you create sequential OData calls, it takes time because we need to add

the time they run one after the other.

00:09:26 You also need to remember that besides the calls that you're making, there are other calls that

happen from the launchpad

00:09:31 from some maybe other services, and we do have some limitations because most browsers

don't allow more than six HTTP calls at the same time.

19

00:09:41 So, you don't want to have too many parallel or sequential OData calls at the same time

because your users are just going to wait for the data to be retrieved.

00:09:52 And if you do need to bring lots of information from the backend, try to actually merge those

calls into one and you can always use,

00:10:00 and it is also recommended to use a batch parameter if you need to bring multiple OData

element,

00:10:05 you can batch them into one HTTP call. You don't need to do 20 HTTP calls one after the

other if you can actually batch all the information together.

00:10:13 It's very useful when you create the detailed part of a Fiori application and you need to bring

lots of information from the backend.

00:10:21 The batch is also important for security reasons, and we talk about it later.

00:10:25 So, just to summarize that: When you plan your application, think about what we called OData

choreography.

00:10:34 So, what are the data elements that we need to fetch first? What data elements can wait for a

later time?

00:10:42 What calls can be merged together into one batch? What calls need to happen sequentially?

What calls might happen in parallel?

00:10:51 And make sure you structure your application, you structure the UI and you make those calls in

the right order.

00:10:59 Because, if I have something that only happens later in the overall process, I don't necessarily

need to fetch that specific piece of data right in the beginning.

00:11:09 So, keep that in mind when you create your applications. Now, let's talk about another

important topic, and that's security.

00:11:19 We're talking about online applications. Fiori applications run online, they run in browser, they

can run on a mobile device.

00:11:28 So you need to keep in mind that there are certain security aspects when developing those

specific applications.

00:11:35 For example, I mentioned the batch parameter. When we use batch operation to make a

request for an OData service,

00:11:44 the actual query is embedded in the HTTP header. So, it's not part of the URL. And no one can

actually see it and no one can actually log it.

00:11:55 Because, if I create those queries like we usually do in examples, we do in demo, I just make a

URL and call the service as if it was a web page,

00:12:04 that specific call is going to be registered in many servers along the way and that might cause

a security risk.

00:12:12 So, try to embed those calls inside the HTTP headers so the request and the response will not

be visible to any system on the way.

00:12:23 Now, do not store sensitive information in the cache unless we have to cache the information,

like in an offline scenario.

00:12:30 Never store sensitive data information, business information, analytic information in a cache,

20

00:12:36 because again, if you don't purge the cache at the end, someone might have access to that

specific information.

00:12:41 And of course do not switch between HTTP and HTTPS in the middle or create mixed

applications. If you need security, stick to HTTPS.

00:12:51 Now, other things that you might want to do since we are talking about UI5, and UI5 is based

on JavaScript, try to avoid the eval() function.

00:13:04 And now, it's kind of controversial, this topic, but the eval() actually executes a code string that

you pass to it.

00:13:09 And in some cases, people might inject code into the eval() function. Now, some developers

know how to avoid it,

00:13:16 other developers might use the eval() in a way that can create a security risk. So overall, the

general recommendation: Try to avoid that if possible.

00:13:28 And of course make sure that no one can inject any code into your scripting, so a URL or any

other way.

00:13:35 Because again, we are talking about web applications or mobile applications, and that is

always a security there.

00:13:42 And of course, if you want to enrich the UI with additional libraries, make sure you use external

libraries from a trusted source.

00:13:50 We recommend to use SAPUI5 libraries. You can always add additional libraries but don't

download something from a torrent site,

00:14:00 and use that in your application without actually knowing that this is safe in terms of security.

00:14:07 And the last thing to remember in terms of security, and we mentioned that in other sessions,

that security, when it comes to Fiori, is quite complex:

00:14:16 Authentication, authorizations, single sign-on. All those things are handled by the framework.

You do not need to take care of single sign-on, authentication, authorization.

00:14:27 Do not write any code that manipulates the authorization and authentication that are provided

by the framework,

00:14:34 and do not try to overwrite any of the authentication and authorization or single sign-on, or

certificates and tickets that are exchanged between the launchpad and the backend system.

00:14:45 All this is handled by the launchpad, by the Gateway system, by the frameworks that we have

in Fiori,

00:14:52 and you as a developer need to focus on the creation of the UI, and do not try to actually

interfere with this standard process that we have in place.

00:15:00 Otherwise your application might not function alongside other Fiori application, and you can

never know what the impact on security is going to be.

00:15:11 So, now I tried to give you a lot of information here, try to keep that in mind when you build

your application.

00:15:18 Luckily, most of those topics are being covered by the reference application and by the Web

IDE,

00:15:24 but it is always good to understand what is happening. In that way, you can create better code

21

and better applications. Thank you.

22

WEEK 4, UNIT 5

00:00:00 Hello and welcome to Week 4, Unit 5 of the Introduction to SAP Fiori Reference Apps.

00:00:19 My name is Oliver Graeff. I work as a product manager for SAP Web IDE.

00:00:26 In the previous units you've seen how to create an SAP Fiori App, and how templates in SAP

Wed IDE help with this.

00:00:33 You are not starting from scratch with an empty editor. Instead, you get a running Fiori

application as a starting point.

00:00:41 And this app is a basic app with the main screens and features. Now, if you want to go a step

further,

00:00:49 you might want to build a realistic, productive app in the same way as we at SAP build our

apps.

00:00:58 Here, the SAP Fiori reference apps will help you.

00:01:06 What are SAP Fiori reference apps? They're reference apps with sample applications that help

developers and designers.

00:01:16 So if you are a developer, you might want to have assistance coding to copy from, for your

application, the application that you are creating.

00:01:26 So the SAP Fiori apps are available as sample apps in the SAP Web IDE,

00:01:35 and they are ready to run examples, applications, and developers can see the coding and, for

example,

00:01:45 copy and paste from the coding. It can also be used by designers.

00:01:54 Designers can understand and demonstrate the SAP Fiori principles, for example, the Fiori

Design,

00:02:02 the Fiori interaction patterns, and also to see how the Fiori applications work.

00:02:12 So the sample applications are end-to-end examples, so they go from designing to

implementation, to the finished application,

00:02:22 and they also go through all of the layers. It's not UI, it is also the gateway services used.

00:02:34 It's also the back-end data used and also mock data to test run the application.

00:02:42 It's all included in the SAP Fiori reference applications.

00:02:50 So what kind of reference applications are available today? With the SAP Web IDE 1.7, we

have 3 reference applications available.

00:03:00 One is the shop application; it's a transactional application, a full screen pattern, and with this

00:03:10 application you can browse through a product catalog. You can see products, see their details,

00:03:21 put them into your shopping cart, and also then check out the shopping cart to create a sales

order.

00:03:28 And a second reference application is the approve purchase order application. It's not a full

screen pattern,

00:03:38 but instead a master detail pattern. So on the left you have a list of purchase orders, on the

23

right you have the details.

00:03:46 You can see the details of the purchase order and then decide whether you want to approve or

reject the purchase order.

00:03:53 In the third reference app is the managed products app. So in contrast to the shop,

00:04:00 this app is used to maintain, to edit the master data for the products which appear in the shop.

00:04:09 So it also uses the master detail pattern. You can see a list of products and you can, for

example, create new products or edit the existing products.

00:04:19 So these are the available reference apps. They come with data. They come with data

00:04:29 either from the back-end system. So if you use SAP NetWeaver 740 SP10, you have the

necessary services and data in your back-end system.

00:04:41 As an alternative, you can also use local mock data.

00:04:49 So as you have heard in the previous units, in Web IDE, we can test run the application

without any back-end connectivity

00:04:57 and just use local mock data. And this comes also with the Fiori reference apps. So now let's

have a look at the reference apps

00:05:07 and how you can make use of them. This is the SAP Web IDE, and now let's create a Fiori

reference app.

00:05:21 If you choose New, in earlier units you have seen a project from a template. This time we

create the project from a sample application.

00:05:34 Later I will tell you what the difference is between template and sample.

00:05:41 So the wizard gives me a selection of the available sample applications. Sample applications

are the Fiori reference applications.

00:05:50 As I've mentioned earlier, there are 3 applications available. Let's pick the first one, the shop

application.

00:06:00 I choose that, click Next. I have to agree to the license agreements here, for example

00:06:11 that I will not use this coding in a productive manner.

00:06:17 I click on Finish and now the application is being created in my workspace.

00:06:25 So what happened here is that the coding of the application is being copied into my

workspace, and that's it.

00:06:33 So now let's see what this application can do. You see all of the files. You can see files with

the data model.

00:06:42 I mentioned that, so there is local mock data here. We have the views, and of course we can

also start the application.

00:06:52 So now let's start that with the local mock data. So I select Run, Run with Mock Data,

00:07:01 and that opens up the previous screen of the SAP Web IDE.

00:07:11 It will take a second. And here you can see

00:07:19 the shop application. You have the full screen list of the products. You can scroll through this

24

list

00:07:28 and, for example, have a look at the details. If I click on one of the products, I navigate to the

details screen. In here,

00:07:40 I have more details of the product master data. For example, I can have a look at the picture of

this DVD player,

00:07:49 or I can have an additional, more details of the company providing this DVD player.

00:08:01 I can click on this and get here more data of the supplier.

00:08:10 Also, as you can see here in the top right corner, there is a shopping cart, and I can add this

DVD player to the shopping cart by clicking on Add to Cart here.

00:08:24 You can see here there are now 7 items in the shopping cart. By clicking on this icon I can see

the list.

00:08:34 So for some reason the 7 is not reflecting that there are three products here in the shopping

cart. I can see the products.

00:08:43 I can go to the checkout. And this is my checkout. You can see here that I'm going to order

these items in my cart.

00:08:54 And if I click on Buy Now here, the sales order is being created.

00:09:01 Your order has been sent to the company. So this is just one of the three reference apps, and

I'm just going

00:09:10 to show you the two other reference apps. I created them in my workspace before. One is the

managed products.

00:09:20 Let's start that. I select the local index HTML file and in the same way, run with mock data.

00:09:37 And you'll see that a master detail pattern will open up with the list of the products.

00:09:51 You see on the left, we have the list of products. If I select a product we can see the details on

the right.

00:10:00 We have options here, for example, to filter the screen or to sort that.

00:10:09 We can, for example, search for DVD. You can see here that it navigates to the DVD player.

00:10:20 And I can edit the master data. I mentioned before this application is for editing the product

master data.

00:10:30 So to edit this master data here, I can click on edit, and you can see the screen fields to be

edited.

00:10:44 For example, things implemented here are dependencies between the different fields.

00:10:53 There is a main category of the product, which is currently TV Video HiFi, and there is a

category down here and it offers portable players.

00:11:03 If I change the main category to computer systems, you see that the available options for

category are adapted,

00:11:13 and now it gives me the options for notebooks and computer system accessories.

00:11:20 Also another feature implemented here is a type-ahead. If I put my cursor in this field

25

00:11:28 and type an “N” you'll see it already offers me the only option starting with an “N”.

00:11:37 So things are implemented in this sample app and just to have a complete picture,

00:11:47 we also have the purchase order approval app. And let's start that. Again, to not use the back-

end system

00:11:59 I run this with mock data.

00:12:11 And you can see the list of purchase orders on the left. You can see the details on the right

with the items here of the purchase order,

00:12:22 and you have two buttons for approve and reject. So that is a typical approval scenario which

is available in this Fiori pattern here.

00:12:33 If I click on approve, I can enter a message and approve that purchase order.

00:12:43 So this is the way how you can make use of the Fiori reference apps in the SAP Web IDE.

00:12:52 So you create the reference apps. You have them available in your workspace, and you can

look at the coding.

00:12:59 You can look at the different files and use them for your application.

00:13:07 So let's go back to the slide. As you can see here, there is also a link

00:13:16 with the more detailed descriptions of the Fiori reference app in SCN. You have a video and a

documentation for the individual applications.

00:13:31 So this is what I covered in my demo. How can I make use of the SAP Fiori reference apps.

00:13:37 It's as simple as it could be: In the Web IDE you create them as sample apps. And in previous

units,

00:13:47 you have seen how to create apps from templates, so you might wonder what is the difference

between a template and a sample in Web IDE?

00:13:56 And the difference is that a template is a very basic application. You adapt that by selecting

your back-end service,

00:14:07 for example, by doing a data binding and connecting the UI fields with the data fields. It's a

running application, but it is quite basic.

00:14:17 And if you want to have a full application with all of the necessary features and concepts, then

this is part of the sample applications.

00:14:29 So the sampling application can be used to copy and paste coding from. It contains exemplary

coding,

00:14:38 so not just the basic coding from the templates to navigate from one screen to the other, but

really what is needed for a full productive application.

00:14:49 And the coding of the Fiori reference apps has been approved by SAP Fiori experts.

00:14:58 So it's really an example which you can use; a good example. And that is also containing

00:15:07 the coding and the coding is implemented. All of the Fiori architectural concepts and what is

Fiori

00:15:19 from a technical perspective, from a design perspective, and so on: That's all included here.

26

00:15:27 One thing why we mention the Fiori reference apps here in this course is that we are going to

use them in the next unit.

00:15:36 In the next week, we will talk about the extensibility concepts of SAPUI5 and how you can

make use of them in Web IDE.

00:15:46 And the typical scenario for that would be a customer wants to extend a standard SAP

application.

00:15:55 A standard SAP application for Fiori could lie, for example, in another back-end system.

00:16:05 So the original SAP coding is in the ABAP back-end system and the customer is doing an

extension to that in Web IDE,

00:16:14 in his workspace in Web IDE. And to demonstrate this and to let you experience this scenario,

00:16:24 we decided that we want to avoid additional complexity for this course and not use a back-end

system for this, but have the standard SAP application

00:16:34 in the Web IDE workspace. And for that, we are using a Fiori reference app.

00:16:40 So in the next unit, you will use them in your workspace, assuming that it is an SAP standard

app.

00:16:48 Thank you very much for your attention.

27

WEEK 4, UNIT 6

00:00:00 Hello and welcome to Unit 6 in Week 4 of the Build Your Own Fiori App in the Cloud course.

00:00:17 In this session we will look into the Fiori launchpad in the Cloud, which is the latest innovation

from Fiori.

00:00:24 We talked a lot about Fiori and what Fiori is. Fiori is the new face of SAP for both on-premise

and cloud applications.

00:00:33 It provides a new user experience. It's very easy and very intuitive, and we are going to see

many new applications coming from SAP that are based on this specific UI.

00:00:43 A few examples are S4HANA applications, future SuccessFactors applications, Cloud for

Customers,

00:00:51 and many other solutions that are currently in development. But at the same time, we still have

Fiori applications that are running on top of our traditional

00:01:00 ERP back-end system, and for that we need to have different versions of launchpads: one for

the cloud and one for the on-premise.

00:01:09 The launchpad, just as a reminder, is the first place that I as a user enter in order to start any

Fiori application.

00:01:17 It provides me with a one-stop shop to launch any type of applications: analytical, fact sheet,

transactional, and sometimes other types of applications depending on my user role.

00:01:30 Based on my role, I'm going to see a subset of applications that were specifically designed to

help me fulfill my daily activities.

00:01:38 The launchpad also enables me to search data, to search for applications. I can customize it to

my own specific needs.

00:01:45 I can, as I said, personalize it, rearrange the icons or the tiles so I'll see the most important one

at the top.

00:01:54 I can create groups there. I can bring additional applications from specific application catalogs

that were created based on user roles.

00:02:02 So I can pick an additional application that might help me do my daily activities. And basically

this is the first place

00:02:10 that I'm expected to enter in order to find any type of application that is connected to SAP

systems. As I mentioned, there are different types of launchpads.

00:02:20 The first and most common launchpad is SAP launchpad on the ABAP front end. If I have an

on-premise system,

00:02:28 using SAP NetWeaver, SAP NetWeaver Gateway, I have a standard Fiori deployment in which

I have a back-end server with the business logic,

00:02:38 I have a front-end server with the UI, and on that front-end server, I have a version of the Fiori

launchpad.

00:02:46 This is a basic version of the launchpad. It enables me to launch transactional, analytical, and

fact sheet applications, and that's what we have in most deployment of Fiori up until today.

00:02:58 This is the recommended version for those customers who want to work in an on-premise

environment and do not have a portal deployment,

28

00:03:08 or do not plan to have a portal deployment. The second version of the Fiori launchpad is an

integrated version of Fiori launchpad with SAP Enterprise Portal.

00:03:17 Here we have a version of the SAP Enterprise Portal that includes the launchpad framework.

And with that specific version of the launchpad,

00:03:25 I can actually launch any type of Fiori app, as well as any application that can run in the

Enterprise Portal.

00:03:33 So I have an aggregation of different types of applications that all use the same set of roles

and configuration coming from SAP Enterprise Portal.

00:03:43 So this is the recommended version for those customers who already deploy SAP Enterprise

Portal and want to leverage Fiori on top of that.

00:03:52 And the latest version of Fiori launchpad is Fiori launchpad on SAP HANA Cloud Platform.

00:03:57 This is a new release of the launchpad that is part of my HANA Cloud Platform account. So it's

run in my account preferences, so the same security configuration,

00:04:10 the same connectivity configuration, the same account configuration also applies for that

specific launchpad.

00:04:15 It enables me to run any Fiori application, as well as some types of hybrid application that I

create on the HANA Cloud Platform,

00:04:23 and of course other types of HANA Cloud Platform native applications. So it's also connected

with the Web IDE.

00:04:31 So I can very easily create content or create applications with the Web IDE and later launch

them through the launchpad.

00:04:40 But that also means that my application should be deployed on the HANA Cloud platform as

well, because this launchpad is part of that specific landscape.

00:04:48 There are different versions of Fiori launchpad in the cloud. The first version, which you all

experienced in the first week of this training, is what we call SAP Fiori Demo Cloud Edition.

00:05:00 This is just a demo. It enables me to access a Fiori system as an anonymous user. I can play

with 14 different applications from different domains.

00:05:12 I have several Human Capital Management applications, a few Accounting applications,

Logistics applications, and ERP applications,

00:05:19 and that system enables me to experience Fiori, to demo Fiori, to show Fiori, just to see what it

is, to see if I like it or not.

00:05:28 And if I want to see in detail how a Fiori application is built, if I want to create a new Fiori app

and I want to play with something as an example, this is a great system.

00:05:39 So I can play with that. I can create some data there. But keep in mind that from time to time

we recycle the system,

00:05:46 so if you are trying to play with it over time you will see that maybe you created a delivery

request and after a few days it disappeared

00:05:54 because the system was recycled, like any demo system. We all experienced that specific

system on the first week, and I suggest that from time to time you go there

00:06:06 and check for new applications that are going to appear there, just because that's a great

29

opportunity to actually play with different types of applications without the actual need to

deploy them

00:06:15 on your own landscape, and without the actual need for an SAP back-end system. We have

two other versions of Fiori launchpad in the cloud.

00:06:24 One of them is called the Trial Cloud Edition and the other is simply called SAP Fiori Cloud

Edition.

00:06:32 Both of them, unlike the demo Cloud Edition, enable me to actually configure, customize, and

modify my applications.

00:06:42 So I can open an application, extend that with the Web IDE, change it with the same designer.

I can connect the application to my own back-end system

00:06:52 or to a service that I have in the cloud. I can run it, either in a trial mode and if I like it, I

created, I took an application, I extended that,

00:07:03 I connected it to my own back-end system, and if I like what I have and I want to run it in

production, I can go to the Fiori Cloud Edition, which is a license

00:07:12 for production use, and actually run my Fiori solutions in the Cloud and have them accessible

from everywhere.

00:07:20 So those two versions are more flexible and open than the Demo Cloud Edition.

00:07:27 I can actually log into the system and fully configure that to my specific needs. As I mentioned,

if I want to use Fiori in the cloud,

00:07:38 I'm going to use the HANA Cloud Platform. So the Fiori cloud launchpad is part of my HANA

Cloud Platform account and it uses many of the services that are provided by the HANA Cloud

Platform.

00:07:51 I have a launchpad, but that launchpad is connected to my account, so my application actually

needs to be deployed in the HANA Cloud Platform Repository.

00:08:02 So I need to deploy the application, the UI, in the Git Repository on the HANA Cloud Platform

and then I can use the connectivity services,

00:08:12 the dispatching services from the HANA Cloud Platform to access back-end systems if I need

them.

00:08:18 I can also leverage the design tool that I have on the HANA Cloud Platform, like the Web IDE

and the Theme Designer, because my application UI is hosted on the HANA Cloud Platform,

00:08:28 so it's very easy to access that and change that. And of course the launchpad itself is

accessible from any Web client, and then it uses all of the services that I have on the HANA

Cloud platform

00:08:38 to actually provide me with access to the back-end system, and with the functionality of the

actual app.

00:08:46 There is a tight integration between the Web IDE and the Fiori launchpad in the cloud, as well

as an integration with the HANA Cloud Platform

00:08:55 and the Web IDE. So I can very easily create an application, deploy it and then register that in

the launchpad that I have on the HANA Cloud Platform.

00:09:04 And I want to show you this process end-to-end.

30

00:09:10 So we start with the Web IDE. And in the Web IDE, I can create whatever application I want.

The first thing I need to do after I have created an application is to test it.

00:09:18 Let's just make sure that the application that I created in the Web IDE is running and

functioning as expected.

00:09:27 I can test the application in different screen sizes. You should all be familiar with that. Let's see

it in medium format. We can later see it in full screen.

00:09:36 But first of all I need to make sure that the application is working. It's connected to the back

end. I have access to the data. Now I'm going to deploy the application.

00:09:45 I right-click on the product information project and then go to Deploy and deploy to the SAP

HANA Cloud Platform.

00:09:52 Now I'm going to register that application in the Git Server. I need to provide my SDN user

name and password and give it a name.

00:10:00 I need to give it a version, and I want to make sure that this is going to be the active version

because there might be a different version of the app over time.

00:10:08 So now the application was deployed to the Git Repository on the HANA Cloud Platform. I can

go and check all of my applications,

00:10:20 all the applications that are already deployed on the HANA Cloud Platform under HTML5

applications, and then I can see the product information app.

00:10:27 This is the one that I just deployed, and it is registered on the HANA Cloud Platform. Now I'm

going to register it to the Fiori launchpad.

00:10:34 So let's continue the wizard. We will give this application a name. We can also give it a

description.

00:10:43 And then on the next screen we are going to create a tile, because what we have in the

launchpad is always a tile for an application.

00:10:54 Tiles can be either static or dynamic. Static tiles only have a title and subtitle, while dynamic

tiles can also have data pulled from my OData service

00:11:04 and showed on the application itself, like the number of leave requests that are waiting for me,

or something like that. So let's configure the static tile

00:11:12 and give it a title. You will see in realtime how it is changing on the tile view. Give it a subtitle,

and I can also go and pick an icon from my icon library.

00:11:24 Let's pick a product icon. Okay.

00:11:32 The next step after I created the tile is to do some assignment. I need to make sure that the

application is assigned to a specific group.

00:11:41 So if I have a launchpad that has multiple applications, that specific application is going to

appear in a specific area of the launchpad

00:11:52 that is dedicated for this type of application. I need to assign a category, so I will go to the tile

catalog.

00:12:00 I will see all of the available applications that I can put on my launchpad. It should appear in a

specific category, and that is the category that I choose there. And I can also give a content

package. And the content package

31

00:12:11 has something to do with security, so based on the user role that is assigned to that package,

I'll have access to the back-end data and to the application data.

00:12:19 So let's pick, or put it in the Sales Executive group, in the Orders category, and it's part of ERP

Logistics. And now we've finished that, we can just confirm.

00:12:29 And it's being registered to the launchpad with all of those parameters. Now if I go to the Fiori

launchpad itself,

00:12:38 I can see that I have a group called (let's go to the end), a group called “Sales Executive”.

00:12:47 And in that specific group I have my application, the product, because I assigned that

application to that group. Now if I launch the application I will see exactly the same data

00:12:56 and exactly the same application that I played with inside the Web IDE. If you go to the tile

catalog,

00:13:09 we will see that that specific application is part of the Orders catalog because that's what we

assigned before.

00:13:17 Now if I'm also an administrator of this launchpad, I can go to the launchpad configurator and

check out the parameters as well as change them.

00:13:27 This is the launchpad configurator that we have in the cloud. You can change the theme, you

can do all kinds of activities. We will go to the app configurator, and in here we are going to

see the same parameters

00:13:36 that we put before. We can see the properties. We can see the tile itself. So we see that we

have the title Product and subtitle View Product Details and the icon,

00:13:48 so the same parameters that I did before. I can even change it here, which we will not do now.

And if I go to the assignment,

00:13:57 App Assignments, I will see the same assignment that I did before. Let's go to the application, I

see that it belongs to the package ERP Logistics.

00:14:09 It's part of a specific group called Sales Executive, and it's in the category of the orders.

00:14:16 Now I can edit that and let's add another category. In this case, let's pick the category of sales,

for example. And let's save that.

00:14:30 Successfully saved. And now if we go back to our launchpad, since we assigned this

application now to two different categories,

00:14:41 if I go to the launchpad and go to the tile catalog, then I can find the application

00:14:49 in both the orders and in the sales category.

00:14:57 So it's very easy to deploy an application with the launchpad. There is a full integration

between the Fiori Web IDE, the SAP Web IDE,

00:15:06 and the Fiori launchpad in the cloud, and with a few clicks you can actually create an

application, register it into the launchpad, and fully configure that to be part of your Fiori in the

cloud deployment.

00:15:17 Thank you very much.

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 SE’s 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.