You are on page 1of 32

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,

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.

2

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.

3

here in this icon tab filter. Okay. 00:17:24 So. so now I will deploy the application to SAP HANA Cloud Platform. and now I will show you how to deploy an application into the SAP HANA Cloud Platform. So if we switch. for example. a change we can do is we can remove from the first IconTabFilter the CustomerId information. which is the password to the HANA Cloud Platform. 00:19:20 So this is. 00:15:38 I want to show you that you can switch between using the layout editor and the code editor. 00:18:12 Okay. let me fix it.00:14:22 So. So until now I did all the changes with the layout editor. 00:17:38 Before you do that. 00:17:15 So based on this version. 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. I have to add my password to the Git. so you can see the new icon tab filter that I just added with all the information and the data binding. So. maybe one last thing. 00:15:03 So. you have to verify that your Git Settings were updated or set. it's actually deployed on HANA Cloud Platform and not only to the Git. and you can see here the SimpleForm that I just added. so it should take a few seconds and it will be deployed. Now that I'm happy with it.. 00:16:50 Okay. 00:15:59 So. and here you can see the CustomerId information. so you see that it was updated.0 and I will activate it. Let's look a little bit in the meantime on the cockpit. you select the Git Settings and you need to add your email address and user name. the first one. 00:15:48 Let me do a small change here with the code editor just to present how you can work with this tool.. with the enhancement that we did. So. 00:15:32 Okay. 00:16:13 Okay. I choose here Deploy to SAP HANA Cloud Platform. I did here a small mistake. you go to the Preferences. it's the same as your SCN credentials. 00:16:29 So. 00:18:00 These are the credentials that you use for the SAP HANA Cloud Platform and. I have to refresh my cockpit here. we have various deployment options in the SAP Web IDE. Let's now run it to see the results. 00:15:21 Okay. Let's say we are happy with new application. let me delete this one. Okay. Just a second. we can now create more versions and do some version control management. 00:14:40 Let's now run it. I will call it 1. so this is the IconTabFilter. you can see the new icon tab filter that we added. now the next step. 00:19:03 Okay. the HTML5 Applications in my account 4 . you can see that now I have another IconTabFilter here with the company-view icon. Okay. 00:18:32 Okay. for the trial. let's remove it and run it again. 00:18:42 I will create now a version. 00:17:51 So.

00:22:14 Let me just add my credentials for this system. I will choose the Deploy a new application option.premise. you can see them here. 00:22:26 Okay. 00:20:36 We see here the salesorder that we've just deployed. and you see here it's available and you can see here the Application URL. 00:22:58 I have to choose here the system. since the SAP Gateway demo system that we use for this course doesn't provide deployment permissions. 00:24:20 Once it will be completed. sales order deployment to on. which I've just deployed. 00:20:54 If we go back to the IDE now and we open the Git History pane. I will show you the actual application on the ABAP Workbench. Let's select it. 00:22:39 And now let me show you how I deploy it into the ABAP SAPUI5 on-premise repository. 00:22:58 So I have here a destination for the GM6. and then again. okay. so here I can see actually how it runs. 00:21:06 And when we do more changes and create some new versions with the Commit and Push. Okay. 00:24:07 I will use the default values here. 00:21:34 So. Let's go now to the ABAP Workbench through the SAP GUI. okay. 00:21:58 I will show you this application. we will see how the versions are evolving. so this is the original application that we created from the template without the enhancement that I did during this unit. It's this one: salesorder_gm6. and its using again the same destination mechanism. 00:23:30 We have the options to either deploy a new application or update an existing application. Confirm. So you see it's the same application that we created from the template. Let's select it. 00:24:36 So. 001. 5 .. Let's just run it. I should start it with the z. 00:19:37 You can see I have many applications. 00:21:15 The last thing that I would like to cover in this unit. let's look at the application that I've just deployed. so let's look at the latest deployed version of the application.. and let's call it salesorderos for the openSAP. 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. we are done. and you can see here that the deployment is now in process. 00:23:39 Now let's give it a name. I will now choose Deploy to SAPUI5 ABAP Repository. So. 00:20:17 So if we select here the HTML5 Applications. 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:22:49 So you see here I have the Deploy. to do that. 00:20:02 Okay. let's go now to the SAP HANA Cloud Platform cockpit. 00:19:50 Okay.which are deployed to the HANA Cloud Platform. it's an internal system. Okay. Okay. you can see that we created a new version. you can see all the HTML5 applications that you deployed to the SAP HANA Cloud Platform from your account.

6 . it's disconnected from the cloud and everything is available for you on premise. So. 00:26:04 If I choose now the index. let me look for the application. Let's open it. and you can see here the app. Okay.00:24:46 So. It's not that we are using the BSP. So. 00:25:48 You can see here how the project looks like. 00:26:45 So you can see here like the application and the data is provided from the backend system. so let me choose zsalesordero*. 00:26:31 when you deploy it back into the ABAP SAPUI5 on-premise repository.html. once you use the SAP Web IDE on the SAP HANA Cloud Platform for the development of the application. 00:25:06 We just leverage here the BSP technology in order to reuse the ABAP transport system and the notes support. The application is not a BSP application. I can actually test it. So now. 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:26:16 You can see it's running on the ABAP machine. so you see this is the application. you see here BSP Application. let's open the folders here and you can see the project with the files. 00:25:19 Okay. Thank you.

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:02:08 Okay. 7 . he can navigate from this table entry into a new view using the SAP Fiori routing navigation mechanism. 00:03:09 So it will help us during the development. these are the items and these are the icon tab filters. 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:03:20 So we see here this is the. 00:01:32 The table will contain the items which are associated with the specific sales order which is selected. So we have one icon tab filter with the information that we filled and the second one is empty. 00:00:31 In this unit I will demonstrate a more advanced enhancement to your Fiori app. and add a table..WEEK 4.. 00:02:57 Okay. 00:01:16 This is useful. So let me just show you how it looks. which was created with the template. you can use the documentation that was provided in previous units in order to learn a little bit more about it. 00:00:38 If you are familiar with SAPUI5 routing concept. What we will do in this unit is I will add to our Sales Order app. we will use the Sales Order app. 00:02:47 We will now use this icon tab filter and add the table with the items. 00:03:34 and we see here that it has a NavigationProperty to SOItems. for example.. which holds the items associated with this sales order. You can see here the data collection of the SOHeaders with its properties. UNIT 2 00:00:11 Hello and welcome back. So you see here. which is the second data collection 00:03:43 which you can see here. Okay. everything in this unit will be very clear to you. Let me open. let me open our metadata file. for cases like in our case where we have an OData service with different data collections. 00:01:40 If one wants to see some more information about the specific item. 00:02:34 Okay. 00:01:57 The first thing that we will do. 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:03:53 You can see here that we have a one-to-many relation between the sales orders and the order items. In this unit we will work a lot with the code editor and I will open here the API Reference pane. 00:01:54 Let me show you how to do that. before we start. 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.. which we created from a template. 00:00:46 If you are less familiar with that. a new icon tab filter and we will add a table to this icon tab filter. 00:01:00 So let's start.

Okay. so this is the second one that I have. Let me run it. which is still empty. 00:08:50 Let's see how it looks. the definition of the columns. let me show you the code. 00:04:54 So if I want now to add a table. 00:07:24 If I change here the items. we will add a new view to present the specific table entry details that were selected. I copy the code. This is the IconTabBar and the two IconTabFilters. 00:07:49 Okay. I set here the context for the data binding to the SOItems navigation property. full information. 00:05:06 Okay. 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:09:08 Okay. let's continue from here to the next step. a new view component to my application. and this is now the second one. What I see here is that a new view and a new controller were added to this folder: ItemDetail view and ItemDetail controller. 00:05:34 For the interest of time during this unit. What we will do now. I will choose the SAPUI5 View. 00:05:28 Another option is to use the code snippet like this. What I will do now is we will add the new view. the columns. I can either choose the API Reference. some information about API of this table. Component. 00:04:44 Okay. 00:04:24 So this is the first one that we have. I just start typing and I can see that I have here the code completion. I save it. Better. So let me copy. 00:05:17 If I want to get some more information. 00:08:17 So I open a New. go to the Detail view again. And I will use it now to add a table. Here I have some reference. 00:06:24 Okay. 00:05:46 Okay. So. that I just added. I can browse to the SAPUI5 SDK Demo Kit directly from the SAP Web IDE. Okay. the selection of the sales order. Now I press Finish. 00:06:01 The interesting thing here is the context. It seems I copied it to the wrong place. 00:06:57 Okay. Okay. 00:08:02 So. Okay. 00:08:33 I will call my view ItemDetail. what I will do now I will add a new component. And you have the same code examples in your exercise. you see that the associated items are changed accordingly. to the routing of this app. 00:07:35 Okay. that was just added. I will use some code examples that I already prepared. 00:06:38 There is problem. Let's try again.00:04:03 Let's now got to the Detail view to edit a table. 00:07:14 Okay. So what we see here is we see the table. I put it here. 00:04:09 You can see the IconTabBar. And from here. Something is wrong. now you can see the icon tab filter with the information about the items. 8 . here.

Okay. 00:09:46 You see that there is already a subroute for the Detail view. 00:12:54 Okay. I have an alert. So you see I have here now. So here is our icon tab filter. 00:12:18 I will call it onItemDetailPressed. 00:12:43 No. 00:14:06 Now I will copy the Init function to the ItemDetails controller. okay. Let's try to select an item and navigate. okay. I forgot a dot here. 00:14:38 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.. 00:11:40 So I'm going to the Detail view.js. 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. Probably I forgot a comma. 00:11:03 Let's continue now to the next step. And now let me Beautify it. so salesorder_w4u2. 00:11:34 Let's see how to do that. What we will do next is I will add to the. 00:10:15 So I'm going to the Component.xml. and now I will add another subroute for the ItemDetail. it's not this function. 00:14:28 Okay. 00:12:09 So let me now add a function for this event. If. Okay. 00:11:13 Okay. Let's try it to run now. 00:10:40 I can use the beautifier to make it look good. so we will now copy the function to the Detail controller. the routes. Let's go to the presentation.js. 00:13:49 and also the controller: salesorder_w4u2. to the table that I added. You can see here the routing. Okay.00:09:26 So we go to the Component. I'm adding it here.. Okay. 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:10:26 Okay. 00:13:07 Yes. 00:10:48 And now I press save. for example. 00:12:29 Okay. to my table. 00:14:47 I have a problem here. 00:15:12 Let me Save and Run again. 00:13:15 Save. and I add now a comma. So I added a new view which I will use to present specific table entry details.js with an SAPUI5 app is the navigation. I want also to show you the alert mechanism. Let's see what the problem is. I forgot to add a comma. 00:09:38 One of the roles of the Component. 00:15:03 Okay. I got it here: an alert that something is wrong. 9 . I added a new route for ItemDetail.

Now we want to add here the button to navigate back from the ItemDetail view. 00:20:00 I choose the item in the table. 00:15:36 Let me do that. we select an item. 00:17:59 And now. 00:19:52 Let's run it. we navigate to the ItemDetail view. We change the icon tab filter. 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. I see I have an alert. 00:18:27 And now we will continue to the last step of this unit. 00:18:04 Let's go back to the presentation. 00:17:32 Okay. So we changed the Detail view controller to navigate to the new view. 00:18:45 So I'll just do it now quickly. I have to add the function to the ItemDetail controller. here we go. I will copy it here. We will add a simple form to the new view. I will navigate back. 00:17:11 So let me just copy this function. 00:16:18 So let me copy that. when we press the button. I will look for the page. 00:17:42 Okay. back to the Detail view. we navigate back to the Detail view. I will add a comma. 00:15:27 We navigated. so this is a simple function that just navigates back to the Detail view. and here I have to add. So. Material and Description information. Let me now try to run it. Here we go. 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. Now we will have the navigation back button. and now I will navigate back. 00:16:45 In order to enable navigation back. 10 . and when I will press it. 00:19:20 So let me first add this name space. 00:16:30 Okay. So we completed this phase. 00:17:50 Okay. when the event is raised. I go to the ItemDetail view and just add a form. I navigate to the Item Detail view. 00:15:48 Okay. 00:16:57 So when the function is raised. 00:17:17 Okay. You see here the data for the item. Okay. I'm going to the ItemDetail view.00:15:20 Okay. no. 00:18:17 We also added the capability to the new ItemDetail view to enable navigation back to the Detail view. 00:19:34 And now I will copy the function. Okay. this function will return the user from the ItemDetail view to Detail view. let's try it again. the SimpleForm. 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.

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. Thank you.00:20:13 Okay. We managed to add an icon tab filter with a table. 11 . so we completed this unit. 00:20:34 You have all the code snippets that are used during this video in your exercise.

on the course page. 00:00:36 First off. there are prizes involved. so clearly you're very interested in understanding what's required. 00:02:23 So everybody is entitled to the full points. 00:01:20 so you both get reviewed and you review. in order to compete and get a prize. 00:02:39 But of course. 00:02:14 However. 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. unit 3. 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. since there are only three winners that can get the MacBook Air laptops. 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. UNIT 3 00:00:12 Hello and welcome to week 4. which is tell a story. from design to development of your own Fiori app. 00:02:02 Another thing to clarify is that as we mentioned earlier on in the course. 00:01:31 We have specific criteria which will be listed on the Web site now. 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. you're well equipped to get the full points. Your app can't be everything to everyone. 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.WEEK 4. 00:02:53 So first up. 00:02:29 If you follow the instructions and have been learning along the way through these first few weeks. 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. And you also will participate in reviewing your peers' submissions. potentially. 00:01:23 One thing I want to make clear is that a working. 00:02:45 you'll have to do quite a bit more. We talked about segmentation and targeting and positioning. It's not something that's meant to be super difficult. 12 . and we're giving away three MacBook Air laptops. 00:01:59 So we'll discuss some of those details. fully production-ready app is not required to get the full points. 00:00:59 There's also a peer review process involved. 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. 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. you should be aware that it's worth one-third of your final grade.

like cartoon characters. we've given you a template. 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. which we've already started to show you how to do in the previous week and this week. this can be written or visualized. That meets the criteria. 00:05:31 When you're making a case. You can feel free to fill that out and use that as part of your submission.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:27 Along with making that case. 00:04:41 And then finally. we discussed how to do that and the template is on the course landing page. It doesn't need to be more than a couple of paragraphs. There's a template from week 2. 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. We've given you access to some resources that you've now seen. 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. fully functioning app that can run in any landscape. 00:04:52 The important thing here is that when you start the app process again. and you'll learn more by the end of the course. you need to create a persona and show us how you've done that. 00:05:58 Same goes for mapping out the user experience journey. you can do like a storyboard format. 00:05:37 Or if you want to visualize it. 00:05:15 And on the Web site. 00:03:38 pain points that you're addressing. 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. unit 1. We've given you a lot of graphics that you can drag and drop and make your own. 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: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. This persona needs to have his or her own sets of needs or goals. 13 . 00:04:04 And you also need to mock up this app. you need to start the app creation process using the Web IDE. 00:05:44 But again. and it doesn't haven't to be a fully completed. If you go back to week 2. 00:05:49 When you create a persona. we have instructions of how you're going to go about submitting your work and showing that along with the mockups. The Fiori Prototyping Kit. it's fine if it's written. unit 1. those sorts of things as we've discussed in earlier sessions. 00:04:24 You don't have to be a graphic designer. whatever you feel comfortable with. 00:05:22 Okay. 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.

you can flag it and say that you think it's extraordinary work. 14 . 00:08:14 And again. 00:08:58 For you to be considered. 00:08:47 But if you want a particular submission that you're peer reviewing to be considered. the mockup. As far as the points criteria.00:06:09 And the mockups. 00:06:25 You can add your own graphics or components. but again they need to adhere to the Fiori design principles. 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:08:06 So if you complete these three broad categories as part of your submission process. So if your app is more fully developed. did you complete the peer review process? This is important because obviously if you don't do the peer review process. Again. this is worth one-third of the total points for the entire course. 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. 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. you'll be able to be eligible for the full points involved. 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. you need to stand out. is there the persona. 00:08:22 So what's different from points versus competing for the prize? 00:08:27 As part of the peer review process. 00:06:35 And then as far as starting the app submission process. the user experience journey. but you'll do that through the Web IDE. show more. and the mockups along with it. 00:06:59 Okay. 00:08:38 This isn't the only way that somebody gets considered for the prize. so make sure to work on that as you put together those mockups. There are internal judges from SAP who are looking at the work of all the submissions. 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:07:12 The first is did you submit all the components in a coherent format? Is there a story. We'll talk about the prizes later. this is for getting points. 00:07:05 Here's—in kind of a big-bucket overview way of looking at it—here are the three categories of points. then you won't receive peer feedback yourself. get further. 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. we have instructions on the course landing page. 00:07:57 It's important that everybody participates so that all participants in the course get feedback from others participating.

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. You can choose to reuse the work you've done in previous assignments in earlier weeks leading up to this. Thank you. 00:09:22 You can't deviate from what you need to do for the points. I want to say thanks for joining today.00:09:06 if the design is really something quite brilliant and unexpected. 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. If you have any more questions. 00:10:49 Or you can start from scratch. 00:09:32 but if you go above and beyond and still adhere to those original criteria. 00:09:39 As has already been mentioned. then you have a good chance at being considered. 00:11:43 And looking forward to seeing what you're able to submit. 00:10:02 I know this is a lot of information. 00:10:16 And I just wanted to review the resources available to you as part of this build and design challenge. 00:09:15 the Fiori design guidelines and principles. 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:10:25 There are the Fiori design guidelines. 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. There is the Fiori Prototyping Kit. but some of the other top work that's been submitted. 00:09:48 And also. we're going to be showcasing additional top submissions on the course landing page. You don't have to feel beholden to the different assignments you've already completed. but still adheres to all of the requirements for the course. 00:10:56 They were there to help you get ready for this final assignment. You still have to adhere to the Fiori design principles and still submit all the components like anyone else going for the points. 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:11:31 So you'll have something to kind of give you guidance and help you along the process. 00:10:42 One important note. 15 . that's how you'll be in a better position to win the prize. the top three submissions as determined by SAP experts will each receive a MacBook Air. 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:37 With that. feel free to ask them on the online forum.

when we first call an application. 00:00:29 Now. 00:02:02 The second layer that we have is the Fiori Front-End server or. usually will not have any impact on that and we can change that. when we develop the application itself. mainly performance and security. to recommend the best browser. security. 00:02:10 Some of the functionality or some of the tasks that are involved in the creation of Fiori UI. of course. 00:00:18 In this session. UNIT 4 00:00:12 Hello again and welcome to Unit 4 in Week 4 of Build Your Own Fiori App in the Cloud. So they run in a browser. have very little control on that. and when we actually start and look at what is happening when 16 . happen there.WEEK 4. 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. we need to make sure that this environment is optimized. in other cases. how many firewalls we have and things like that. 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. there's nothing in the cache. I want to talk with you about a few topics that we called Other Considerations When Building a Fiori Application. NetWeaver Gateway provides us with the OData services. 00:03:07 So. 00:02:43 And. 00:02:47 And the way our data is retrieved from the backend system. 00:00:56 And it's always good to understand how performance is impacted by different architectural layers that we have in Fiori. not all browsers are equal in the way they actually parse UI5. 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. of course. 00:03:00 But in many cases. everything has to do with getting the data itself. we. 00:01:50 The other considerations. luckily for us. of course. let's try to understand what happens when we first trigger a Fiori application. other browsers might take more time to parse some of the components. 00:03:18 The browser cache is empty. our database queries. 00:02:19 And. 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:02:26 and that's another place that we need to look for if we see a performance bottleneck. And it's up to you. 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. Now. Fiori applications are web applications. 00:01:29 Some browsers are faster. 00:01:17 So if we look at that. the communication between the Gateway and the backend also has impact on the overall performance of the application. the Fiori Cloud launchpad. like network time. Now. 00:01:06 So when I talk about performance.

happening one after the other. on the desktop it's also important to make sure that data is cached on the client side. So there are all kind of resources. And that is the first thing that is being loaded. from remote systems sometimes. don't call all the library at the beginning. 00:03:49 We talk about UIs. which elements you need to load first and which elements you might 17 . and that should take less time. try to keep in mind. if we do cache the data. 00:05:59 If you don't need a specific library to render the topper of the screen or the list. 00:05:37 So let's look at some other best practices that are important when we build an application. the UI5 uploads the metadata of the different services that we are going to use when creating the UI.things like that. like JavaScript files. 00:05:42 As we mentioned. style sheet files. all those actions were sequential.js. So we have a resource link resolution.we trigger an application. then on the second time that we are going to load an application. 00:06:05 Usually we call all the library in the Component. Up until now. and that can save some 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 keep in mind that. the first thing that happens is 00:03:26 the launchpad is trying to figure out where to get the application from. if you need a specific library when rendering the UI. Kapsel client that caches the data. we are loading lots of information in memory. So the first thing you can do about performance on mobile scenarios is. Now each and every component that we fire actually makes additional calls and loads different resources into memory. 00:06:13 But if at some point I might have a Master Detail application that in the Detail screen I have a tab. of course. this is the phase in which we are actually creating the list on the left side. when we generate the detail part of the screen. we can actually create it in a parallel way by batching those actions together. 00:04:40 This is the overall process. JavaScript component. which takes a few microseconds. call it late in the process. 00:05:30 And. 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. use a Fiori client. 00:04:55 Now. 00:04:27 Luckily. 00:04:13 In a master/detail pattern. static artifacts . 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:04:02 And once we have that. 00:03:56 That needs to go into memory in the first time. that presents me with a complex table. of course. some of those activities happen faster 00:05:03 because the data is retrieved from the local cache. 00:03:38 And then we actually start to fire up different components. 00:06:32 So.

00:08:51 The inline count is one of the parameters that we have in OData in version 2. then I'm actually doing the actual data service call to get the actual data.js file. 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:06:50 The second thing that you need to remember is that we are calling OData services. we're always trying to save those round trips to the backend. 00:07:30 You are more than welcome to reuse any service that we have in the repository. Now. Another thing that you might want to do is to check that you are using the most optimized service. 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. when you create sequential OData calls. 00:06:43 There's a different way or there is a way to actually load a resource only when you need it. And that brings me the data with a count in one call. I'm saving one round trip. 00:08:34 And only after I know how many data elements I'm going to get. there are other calls that happen from the launchpad 00:09:31 from some maybe other services. it takes time because we need to add the time they run one after the other. 00:07:54 So. 00:08:15 In many cases. 00:08:44 Now. I can use the inline count. So. 00:09:17 You know that. We don't want to start and merge data on the UI level. And then. 00:09:04 Now. if you only need few fields from a backend system. 3 and 4. I need to know how many data elements I'm going to get. 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. You don't need to put everything in the Component. the rule when we build Fiori applications is that: One service for one application. reuse of services is important. using the count parameter to get the number of elements that I'm going to get. 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:02 This is the optimal way. 00:07:37 but. when I bring or fetch data from the backend and I start to create a list of value. Another best practice is how to use those services. 00:09:26 You also need to remember that besides the calls that you're making. 00:08:23 So the standard way that most developers do it is by calling the count parameter. instead of doing two calls. 18 . 00:07:21 So use only one service for one UI.want to save later. don't use a service that fetches a complete transaction with 200 fields. one for the count and one for the actual data element. and we do have some limitations because most browsers don't allow more than six HTTP calls at the same time.

00:09:41 So. 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:34 So. 00:12:12 So. I mentioned the batch parameter. 00:10:59 Because. they run in browser. Now. 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. 00:11:19 We're talking about online applications. analytic information in a cache. 00:11:35 For example. 00:11:44 the actual query is embedded in the HTTP header. I don't necessarily need to fetch that specific piece of data right in the beginning. And no one can actually see it and no one can actually log it. 00:10:21 The batch is also important for security reasons. 00:11:09 So. 00:09:52 And if you do need to bring lots of information from the backend. Fiori applications run online. we do in demo. 00:10:00 and it is also recommended to use a batch parameter if you need to bring multiple OData element. You don't need to do 20 HTTP calls one after the other if you can actually batch all the information together. think about what we called OData choreography. if I create those queries like we usually do in examples. 00:11:55 Because. do not store sensitive information in the cache unless we have to cache the information. When we use batch operation to make a request for an OData service. 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:11:28 So you need to keep in mind that there are certain security aspects when developing those specific applications. they can run on a mobile device. let's talk about another important topic. I just make a URL and call the service as if it was a web page. it's not part of the URL. 00:10:25 So. business information. keep that in mind when you create your applications. 00:12:30 Never store sensitive data information. and that's security. 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:10:05 you can batch them into one HTTP call. 00:12:23 Now. if I have something that only happens later in the overall process. 00:12:04 that specific call is going to be registered in many servers along the way and that might cause a security risk. try to actually merge those calls into one and you can always use. like in an offline scenario. and we talk about it later. So. just to summarize that: When you plan your application. 19 . you structure the UI and you make those calls in the right order.

00:12:51 Now. 00:15:00 Otherwise your application might not function alongside other Fiori application. 00:15:18 Luckily. 00:13:09 And in some cases. some developers know how to avoid it. authentication. most of those topics are being covered by the reference application and by the Web IDE. 00:13:28 And of course make sure that no one can inject any code into your scripting. and do not try to actually interfere with this standard process that we have in place. You do not need to take care of single sign-on. so a URL or any other way. authorizations. that security. and that is always a security there. make sure you use external libraries from a trusted source. and we mentioned that in other sessions. is quite complex: 00:14:16 Authentication. someone might have access to that specific information. 00:13:16 other developers might use the eval() in a way that can create a security risk. 00:14:07 And the last thing to remember in terms of security. if you don't purge the cache at the end. 00:14:45 All this is handled by the launchpad. by the Gateway system. and UI5 is based on JavaScript. people might inject code into the eval() function. All those things are handled by the framework. 00:13:35 Because again.00:12:36 because again. if you want to enrich the UI with additional libraries. 00:12:41 And of course do not switch between HTTP and HTTPS in the middle or create mixed applications. 00:15:24 but it is always good to understand what is happening. You can always add additional libraries but don't download something from a torrent site. you can create better code 20 . the general recommendation: Try to avoid that if possible. 00:13:04 And now. In that way. it's kind of controversial. or certificates and tickets that are exchanged between the launchpad and the backend system. 00:14:52 and you as a developer need to focus on the creation of the UI. single sign-on. 00:14:34 and do not try to overwrite any of the authentication and authorization or single sign-on. 00:15:11 So. other things that you might want to do since we are talking about UI5. by the frameworks that we have in Fiori. but the eval() actually executes a code string that you pass to it. we are talking about web applications or mobile applications. Now. 00:14:27 Do not write any code that manipulates the authorization and authentication that are provided by the framework. 00:14:00 and use that in your application without actually knowing that this is safe in terms of security. and you can never know what the impact on security is going to be. when it comes to Fiori. stick to HTTPS. 00:13:50 We recommend to use SAPUI5 libraries. 00:13:42 And of course. If you need security. try to keep that in mind when you build your application. now I tried to give you a lot of information here. authorization. So overall. try to avoid the eval() function. this topic.

21 .and better applications. Thank you.

00:00:26 In the previous units you've seen how to create an SAP Fiori App. 00:00:49 you might want to build a realistic. You can see products. 00:00:33 You are not starting from scratch with an empty editor. it is also the gateway services used. 00:03:00 One is the shop application. see their details. and how templates in SAP Wed IDE help with this. 00:02:22 and they also go through all of the layers. 00:01:54 Designers can understand and demonstrate the SAP Fiori principles. and also to see how the Fiori applications work. 00:01:16 So if you are a developer. if you want to go a step further. it's a transactional application. It's not a full screen pattern. you get a running Fiori application as a starting point. for example. 00:03:38 but instead a master detail pattern. 00:02:02 the Fiori interaction patterns. applications. to the finished application. 00:03:21 put them into your shopping cart. for your application. 00:03:28 And a second reference application is the approve purchase order application. 00:01:06 What are SAP Fiori reference apps? They're reference apps with sample applications that help developers and designers. and with this 00:03:10 application you can browse through a product catalog.7. the Fiori Design. 00:01:26 So the SAP Fiori apps are available as sample apps in the SAP Web IDE. you might want to have assistance coding to copy from. 00:02:42 It's all included in the SAP Fiori reference applications. so they go from designing to implementation. and developers can see the coding and. 00:00:41 And this app is a basic app with the main screens and features. for example. and also then check out the shopping cart to create a sales order. a full screen pattern. we have 3 reference applications available. 00:00:19 My name is Oliver Graeff. the SAP Fiori reference apps will help you. UNIT 5 00:00:00 Hello and welcome to Week 4. It can also be used by designers. 00:02:34 It's also the back-end data used and also mock data to test run the application. 00:02:50 So what kind of reference applications are available today? With the SAP Web IDE 1. Now. productive app in the same way as we at SAP build our apps. 00:02:12 So the sample applications are end-to-end examples.WEEK 4. the application that you are creating. on the 22 . I work as a product manager for SAP Web IDE. It's not UI. 00:01:45 copy and paste from the coding. Instead. 00:00:58 Here. Unit 5 of the Introduction to SAP Fiori Reference Apps. So on the left you have a list of purchase orders. 00:01:35 and they are ready to run examples.

This time we create the project from a sample application.right you have the details. 00:05:21 If you choose New. Run with Mock Data. We have the views. and now let's create a Fiori reference app. you can also use local mock data. create new products or edit the existing products. Let's pick the first one. So I select Run. 00:07:11 It will take a second. we can test run the application without any back-end connectivity 00:04:57 and just use local mock data. and that's it. 00:04:19 So these are the available reference apps. the shop application. you have the necessary services and data in your back-end system. 00:06:00 I choose that. and of course we can also start the application. Sample applications are the Fiori reference applications. So in contrast to the shop. 00:04:41 As an alternative. there are 3 applications available. 00:04:09 So it also uses the master detail pattern. 00:06:33 So now let's see what this application can do. for example. You can see a list of products and you can. You can see files with the data model. They come with data 00:04:29 either from the back-end system. 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:05:41 So the wizard gives me a selection of the available sample applications. 00:07:01 and that opens up the previous screen of the SAP Web IDE. 00:05:50 As I've mentioned earlier. You see all of the files. So if you use SAP NetWeaver 740 SP10. 00:06:42 I mentioned that. so there is local mock data here. in earlier units you have seen a project from a template. They come with data. 00:04:00 this app is used to maintain. 00:05:34 Later I will tell you what the difference is between template and sample. You can scroll through this 23 . 00:06:52 So now let's start that with the local mock data. So now let's have a look at the reference apps 00:05:07 and how you can make use of them. 00:04:49 So as you have heard in the previous units. to edit the master data for the products which appear in the shop. And this comes also with the Fiori reference apps. And here you can see 00:07:19 the shop application. 00:03:53 In the third reference app is the managed products app. click Next. in Web IDE. 00:06:25 So what happened here is that the coding of the application is being copied into my workspace. 00:06:17 I click on Finish and now the application is being created in my workspace. for example 00:06:11 that I will not use this coding in a productive manner. I have to agree to the license agreements here. This is the SAP Web IDE. You have the full screen list of the products.

00:11:13 and now it gives me the options for notebooks and computer system accessories. 00:09:20 Let's start that. I created them in my workspace before. 00:10:09 We can. for example. If I click on one of the products. You can see here that I'm going to order these items in my cart. 00:08:10 Also.list 00:07:28 and. By clicking on this icon I can see the list. If I put my cursor in this field 24 . more details of the company providing this DVD player. run with mock data. I can have a look at the picture of this DVD player. I can see the products. I mentioned before this application is for editing the product master data. you see that the available options for category are adapted. 00:08:01 I can click on this and get here more data of the supplier. for example. 00:09:01 Your order has been sent to the company. 00:07:40 I have more details of the product master data. For example. to filter the screen or to sort that. 00:09:51 You see on the left. If I select a product we can see the details on the right. I select the local index HTML file and in the same way. You can see here that it navigates to the DVD player. search for DVD. 00:08:34 So for some reason the 7 is not reflecting that there are three products here in the shopping cart. 00:08:24 You can see here there are now 7 items in the shopping cart. I can click on edit. 00:10:20 And I can edit the master data. 00:10:53 There is a main category of the product. which is currently TV Video HiFi. and I'm just going 00:09:10 to show you the two other reference apps. have a look at the details. we have the list of products. 00:11:03 If I change the main category to computer systems. One is the managed products. 00:09:37 And you'll see that a master detail pattern will open up with the list of the products. 00:10:00 We have options here. So this is just one of the three reference apps. as you can see here in the top right corner. things implemented here are dependencies between the different fields. and I can add this DVD player to the shopping cart by clicking on Add to Cart here. there is a shopping cart. I navigate to the details screen. 00:07:49 or I can have an additional. In here. 00:08:43 I can go to the checkout. and there is a category down here and it offers portable players. 00:11:20 Also another feature implemented here is a type-ahead. And this is my checkout. 00:10:44 For example. for example. and you can see the screen fields to be edited. 00:10:30 So to edit this master data here. the sales order is being created. 00:08:54 And if I click on Buy Now here.

by doing a data binding and connecting the UI fields with the data fields. but it is quite basic. to not use the backend system 00:11:59 I run this with mock data. Again. All of the Fiori architectural concepts and what is Fiori 00:15:19 from a technical perspective. You adapt that by selecting your back-end service. As you can see here. 00:14:17 And if you want to have a full application with all of the necessary features and concepts. 00:14:38 so not just the basic coding from the templates to navigate from one screen to the other. How can I make use of the SAP Fiori reference apps. but really what is needed for a full productive application. I can enter a message and approve that purchase order. 00:13:31 So this is what I covered in my demo. 00:13:47 you have seen how to create apps from templates. 00:11:37 So things are implemented in this sample app and just to have a complete picture. So that is a typical approval scenario which is available in this Fiori pattern here. and you can look at the coding. 00:12:22 and you have two buttons for approve and reject.00:11:28 and type an “N” you'll see it already offers me the only option starting with an “N”. 00:14:49 And the coding of the Fiori reference apps has been approved by SAP Fiori experts. It contains exemplary coding. And let's start that. 00:12:59 You can look at the different files and use them for your application. And that is also containing 00:15:07 the coding and the coding is implemented. a good example. 00:14:58 So it's really an example which you can use. 00:13:37 It's as simple as it could be: In the Web IDE you create them as sample apps. 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. And in previous units. 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. It's a running application. 00:11:47 we also have the purchase order approval app. 00:12:33 If I click on approve. You have a video and a documentation for the individual applications. then this is part of the sample applications. 00:14:29 So the sampling application can be used to copy and paste coding from. 00:13:07 So let's go back to the slide. there is also a link 00:13:16 with the more detailed descriptions of the Fiori reference app in SCN. 00:14:07 for example. 00:12:52 So you create the reference apps. 25 . from a design perspective. You have them available in your workspace. and so on: That's all included here. 00:12:43 So this is the way how you can make use of the Fiori reference apps in the SAP Web IDE.

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: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. And to demonstrate this and to let you experience this scenario. assuming that it is an SAP standard app. 26 . And for that. 00:15:55 A standard SAP application for Fiori could lie. 00:15:46 And the typical scenario for that would be a customer wants to extend a standard SAP application. but have the standard SAP application 00:16:34 in the Web IDE workspace. 00:16:14 in his workspace in Web IDE. 00:16:40 So in the next unit. 00:16:48 Thank you very much for your attention. we will talk about the extensibility concepts of SAPUI5 and how you can make use of them in Web IDE. 00:16:24 we decided that we want to avoid additional complexity for this course and not use a back-end system for this. for example. you will use them in your workspace. 00:15:36 In the next week. we are using a Fiori reference app. in another back-end system.

But at the same time. personalize it. and on that front-end server. 00:02:46 This is a basic version of the launchpad. 00:01:09 The launchpad. 00:00:51 and many other solutions that are currently in development. 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. and fact sheet applications. As I mentioned. 00:02:28 using SAP NetWeaver. future SuccessFactors applications. 00:00:17 In this session we will look into the Fiori launchpad in the Cloud. 00:00:24 We talked a lot about Fiori and what Fiori is. 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. rearrange the icons or the tiles so I'll see the most important one at the top. It enables me to launch transactional. Fiori is the new face of SAP for both on-premise and cloud applications. as I said. 00:00:43 A few examples are S4HANA applications. 00:02:20 The first and most common launchpad is SAP launchpad on the ABAP front end. there are different types of launchpads. 00:01:17 It provides me with a one-stop shop to launch any type of applications: analytical. 00:01:38 The launchpad also enables me to search data. 00:01:45 I can. is the first place that I as a user enter in order to start any Fiori application. 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. 00:02:38 I have a front-end server with the UI. just as a reminder. Cloud for Customers. and we are going to see many new applications coming from SAP that are based on this specific UI. 00:00:33 It provides a new user experience. 00:01:54 I can create groups there. 00:01:30 Based on my role. If I have an on-premise system.WEEK 4. to search for applications. It's very easy and very intuitive. fact sheet. and that's what we have in most deployment of Fiori up until today. 27 . I can bring additional applications from specific application catalogs that were created based on user roles. analytical. I have a standard Fiori deployment in which I have a back-end server with the business logic. which is the latest innovation from Fiori. I have a version of the Fiori launchpad. I can customize it to my own specific needs. transactional. SAP NetWeaver Gateway. and sometimes other types of applications depending on my user role. and for that we need to have different versions of launchpads: one for the cloud and one for the on-premise. we still have Fiori applications that are running on top of our traditional 00:01:00 ERP back-end system. 00:02:02 So I can pick an additional application that might help me do my daily activities. I'm going to see a subset of applications that were specifically designed to help me fulfill my daily activities.

which you all experienced in the first week of this training. I can create some data there. It enables me to access a Fiori system as an anonymous user. 00:05:00 This is just a demo. The second version of the Fiori launchpad is an integrated version of Fiori launchpad with SAP Enterprise Portal. 00:03:57 This is a new release of the launchpad that is part of my HANA Cloud Platform account. 00:04:40 But that also means that my application should be deployed on the HANA Cloud platform as well. as well as any application that can run in the Enterprise Portal. 00:05:39 So I can play with that. so the same security configuration. to show Fiori. Logistics applications. 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. this is a great system. as well as some types of hybrid application that I create on the HANA Cloud Platform. to see if I like it or not. We all experienced that specific system on the first week. 00:03:25 I can actually launch any type of Fiori app. a few Accounting applications. 00:04:23 and of course other types of HANA Cloud Platform native applications. 00:03:52 And the latest version of Fiori launchpad is Fiori launchpad on SAP HANA Cloud Platform. The first version. 00:05:19 and that system enables me to experience Fiori.00:03:08 or do not plan to have a portal deployment. and ERP applications. 00:03:17 Here we have a version of the SAP Enterprise Portal that includes the launchpad framework. 00:04:15 It enables me to run any Fiori application. is what we call SAP Fiori Demo Cloud Edition. 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 28 . if I want to create a new Fiori app and I want to play with something as an example. And with that specific version of the launchpad. 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:05:28 And if I want to see in detail how a Fiori application is built. But keep in mind that from time to time we recycle the system. because this launchpad is part of that specific landscape. 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. I can play with 14 different applications from different domains. to demo Fiori. So it's run in my account preferences. like any demo system. the same account configuration also applies for that specific launchpad. 00:04:10 the same connectivity configuration. 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:04:48 There are different versions of Fiori launchpad in the cloud. So it's also connected with the Web IDE. 00:05:12 I have several Human Capital Management applications. just to see what it is.

I can run it. I can go to the Fiori Cloud Edition. 00:06:24 One of them is called the Trial Cloud Edition and the other is simply called SAP Fiori Cloud Edition. unlike the demo Cloud Edition. so my application actually needs to be deployed in the HANA Cloud Platform Repository. 00:07:51 I have a launchpad. 00:08:02 So I need to deploy the application. but that launchpad is connected to my account. I took an application. 00:06:42 So I can open an application. 00:08:12 the dispatching services from the HANA Cloud Platform to access back-end systems if I need them. 00:08:46 There is a tight integration between the Web IDE and the Fiori launchpad in the cloud. and if I like what I have and I want to run it in production. 00:08:28 so it's very easy to access that and change that. 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:27 I can actually log into the system and fully configure that to my specific needs. 00:08:18 I can also leverage the design tool that I have on the HANA Cloud Platform. and without the actual need for an SAP back-end system. change it with the same designer. and modify my applications. and with the functionality of the actual app. because my application UI is hosted on the HANA Cloud Platform. deploy it and then register that in the launchpad that I have on the HANA Cloud Platform. the UI. like the Web IDE and the Theme Designer. customize. 00:06:32 Both of them. 29 . 00:07:20 So those two versions are more flexible and open than the Demo Cloud Edition. As I mentioned. I extended that. I can connect the application to my own back-end system 00:06:52 or to a service that I have in the cloud. extend that with the Web IDE. 00:07:38 I'm going to use the HANA Cloud Platform. I created. in the Git Repository on the HANA Cloud Platform and then I can use the connectivity services. 00:09:04 And I want to show you this process end-to-end. enable me to actually configure. And of course the launchpad itself is accessible from any Web client. We have two other versions of Fiori launchpad in the cloud. which is a license 00:07:12 for production use. if I want to use Fiori in the cloud. 00:07:03 I connected it to my own back-end system. 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. and actually run my Fiori solutions in the Cloud and have them accessible from everywhere. either in a trial mode and if I like it.opportunity to actually play with different types of applications without the actual need to deploy them 00:06:15 on your own landscape. 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.

because what we have in the launchpad is always a tile for an application. 00:10:43 And then on the next screen we are going to create a tile. 00:09:18 Let's just make sure that the application that I created in the Web IDE is running and functioning as expected. It should appear in a specific category. 00:10:08 So now the application was deployed to the Git Repository on the HANA Cloud Platform. Now I'm going to deploy the application. I need to provide my SDN user name and password and give it a name. 00:10:54 Tiles can be either static or dynamic. 00:10:34 So let's continue the wizard. And the content package 30 . and that is the category that I choose there. so I will go to the tile catalog. 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. You will see in realtime how it is changing on the tile view. I need to make sure that the application is assigned to a specific group. We will give this application a name. 00:12:00 I will see all of the available applications that I can put on my launchpad. You should all be familiar with that. 00:09:45 I right-click on the product information project and then go to Deploy and deploy to the SAP HANA Cloud Platform. like the number of leave requests that are waiting for me. 00:11:41 So if I have a launchpad that has multiple applications. and then I can see the product information app. So let's configure the static tile 00:11:12 and give it a title. Give it a subtitle. 00:11:24 Let's pick a product icon. I need to assign a category. and I can also go and pick an icon from my icon library. Static tiles only have a title and subtitle. The first thing I need to do after I have created an application is to test it. 00:09:52 Now I'm going to register that application in the Git Server. or something like that. 00:09:27 I can test the application in different screen sizes. I can go and check all of my applications. We can also give it a description.00:09:10 So we start with the Web IDE. 00:10:20 all the applications that are already deployed on the HANA Cloud Platform under HTML5 applications. I have access to the data. 00:09:36 But first of all I need to make sure that the application is working. Let's see it in medium format. and it is registered on the HANA Cloud Platform. while dynamic tiles can also have data pulled from my OData service 00:11:04 and showed on the application itself. Okay. 00:10:00 I need to give it a version. Now I'm going to register it to the Fiori launchpad. I can create whatever application I want. 00:10:27 This is the one that I just deployed. It's connected to the back end. We can later see it in full screen. And I can also give a content package. And in the Web IDE. 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:11:32 The next step after I created the tile is to do some assignment.

00:12:38 I can see that I have a group called (let's go to the end). In this case. 00:13:57 App Assignments. let's pick the category of sales. and it's in the category of the orders. 00:13:48 so the same parameters that I did before. 00:14:30 Successfully saved. 31 . We will go to the app configurator. so based on the user role that is assigned to that package. 00:12:47 And in that specific group I have my application. the product. I can go to the launchpad configurator and check out the parameters as well as change them. I will see the same assignment that I did before. If you go to the tile catalog. because I assigned that application to that group. I can even change it here. We can see the properties. 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. and in here we are going to see the same parameters 00:13:36 that we put before. 00:12:19 So let's pick. Let's go to the application.00:12:11 has something to do with security. 00:14:16 Now I can edit that and let's add another category. 00:13:17 Now if I'm also an administrator of this launchpad. which we will not do now. 00:12:29 And it's being registered to the launchpad with all of those parameters. 00:15:17 Thank you very much. and it's part of ERP Logistics. 00:13:09 we will see that that specific application is part of the Orders catalog because that's what we assigned before. Now if I go to the Fiori launchpad itself. 00:14:57 So it's very easy to deploy an application with the launchpad. 00:14:41 if I go to the launchpad and go to the tile catalog. I see that it belongs to the package ERP Logistics. 00:14:09 It's part of a specific group called Sales Executive. a group called “Sales Executive”. you can do all kinds of activities. or put it in the Sales Executive group. We can see the tile itself. since we assigned this application now to two different categories. and fully configure that to be part of your Fiori in the cloud deployment. register it into the launchpad. for example. I'll have access to the back-end data and to the application data. 00:13:27 This is the launchpad configurator that we have in the cloud. There is a full integration between the Fiori Web IDE. And if I go to the assignment. You can change the theme. 00:15:06 and the Fiori launchpad in the cloud. And let's save that. And now we've finished that. And now if we go back to our launchpad. in the Orders category. then I can find the application 00:14:49 in both the orders and in the sales category. So we see that we have the title Product and subtitle View Product Details and the icon. we can just confirm. and with a few clicks you can actually create an application. the SAP Web IDE.

or functionality. In particular. National product specifications may vary. or any related presentation. and SAP SE’s or its affiliated companies’ strategy and possible future developments.sap.com/corporate-en/legal/copyright/index. Readers are cautioned not to place undue reliance on these forward-looking statements. which speak only as of their dates. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. 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. All rights reserved. and they should not be relied upon in making purchasing decisions.www. Nothing herein should be construed as constituting an additional warranty. 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. products.epx#trademark for additional trademark information and notices. if any. without representation or warranty of any kind. This document. 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. promise. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. 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. code. . or legal obligation to deliver any material. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only. and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials.sap.com © 2015 SAP SE or an SAP affiliate company. Please see http://www. or to develop or release any functionality mentioned therein. SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation.