OpenSAP Fiux2 Week 07 Transcript En

7/26/2019 OpenSAP Fiux2 Week 07 Transcript En

1/9

1

openSAPBuild Your Own SAP Fiori App in the Cloud 2016Edition

Week 07 Unit 01

00:00:12 Hello and welcome to Week 7, Unit 1 of the 2016 Build Your Own Fiori App course.It's greatto be back with you this week.

00:00:20 Now that you've completed the week on extending Fiori apps, we want to go back to thebeginning so to speak.And show you an end-to-end development scenario.

00:00:29 This is a short week on purpose to give you more time to focus on the Develop Challenge,which needs to be submitted by the end of next week.

00:00:37 So let's get started.So what we want to do in this session is generate an SAP Fiori project

00:00:45 based on one of the available SAP Web IDE templates to create a Fiori app.We'll be

developing an application and adding new functionality using the code editor and the layouteditor.

00:00:59 We'll be connecting our application to an SAP on-premise back-end system.Then we'll bedeploying a project to the HANA Cloud Platform and registering and consuming it throughthe SAP Fiori Cloud.

00:01:14 Just a word about the back-end system that we're going to use: It's called SAP-ES1, and it'sa public SAP Gateway demo system.

00:01:22 It enables developers to play around with demo OData.It's a public back-end system and soit requires no connectivity through a Cloud connector.

00:01:38 It's available for registration for any registered SCN user.Great, so let's start.

00:01:45 The first thing we want to do is we want to go to our HANA Cloud Platform account and

configure connectivity between our account and the back-end system.00:01:56 So for that we'll be deploying a destination file.So I have a destination file already written.

00:02:06 And I'm going to deploy this file into the Cloud Platform account.Now we can see thevarious properties that are part of the destination file.

00:02:14 And they include the URL to the back-end system, the type of authentication, my user'scredentials.And set the various properties.

00:02:26 Here relating to the Web IDE enabling the Web IDE to pick up this destination or thisconnectivity and create and generate an application based on the data it retrieves from theback-end system.

00:02:38 Great, so let's save this destination file.Now let's open our Web IDE.

00:02:55 OK. So for creating a new project, we're going to right-click on a Local root.Click New and

Project from Template.00:03:05 Now we have a list of available project templates and we want to create an SAP Fiori

Application.So we're going to choose the SAPUI5 Master-Detail Application.

00:03:17 This is what the application looks like, it's a Fiori Master-Detail Application.We're going toclick Next, and we're going to give the project a name, we're going to call it products

00:03:26 as we want to show a list of available products coming from the back-end system.We'regoing to click Next, and now we're going to configure the data connection to our application.

00:03:36 So earlier we just configured the destination file for creating the connectivity to our backend.Now we know that we want to use a back-end service that is called ZPRODUCTS.

00:03:48 And here it is available for us.And displaying product information from the back end.

00:03:54 Great, so we're going to choose this service.And click Next.


2/9

00:04:02 Now in this part, we have to pick and choose the available properties coming from theOData service.And bind them to the available UI controls in our generated application.

00:04:15 So we're going to start filling out this form.We're going to give a title to this application, we'regoing to call it Inventory.

00:04:23 We're going to give a Namespace.And now we're going to choose the Object Collection.

00:04:32 The only one available here is Products, and that's fine, that's exactly what I want touse.The Object Identifier will be the basic attribute shown in the list on the left of theapplication.

00:04:43 So we're going to use a property called Name to show the name of the product.Now noticethat I can start typing and the wizard auto-completes the properties according to theavailable properties in the back end.

00:05:01 Or I can just choose them from the dropdown list.Now in this part, I need to bind some lineitems.

00:05:08 But specifically the product OData service does not contain any line items.So I'm going toleave this empty and I'm going to fill it out later when I add new code to the application.

00:05:22 Great, so now let's confirm.Let's confirm the creation of this project.

00:05:28 And once we do that, the Web IDE starts generating our Fiori app source code and createsa new project in the Web IDE.

00:05:40 So we do that by right-clicking on the root of the project.So we select Run with Server.

00:05:49 And now the preview tab is open and it creates sort of a mock Fiori launchpad from where Ican launch my application, my Products application.

00:06:00 Now you see the Master-Detail Application is rendered and launched with data coming fromthe back-end system.Now there's not much data showing up here because we didn't bind alot of data

00:06:12 when we generated the application in the wizard, but we're going to do that now with thelayout editor.OK. So the first thing we want is to add more details to the detail view.

00:06:24 So let's open the detail view with the Layout Editor.OK. The view is open now, and let'schange the resolution a bit.

00:06:39 And I want to add a simple form.So I can filter the UI5 UI controls that are available here in

this pallet.

00:06:49 I can drag and drop them into my application basically, into the canvas.This is where I wantit to go.

00:07:06 Now we need to make sure that the view is bound to the "Products" OData data set that wechose.And indeed it is. So now we can use all the underlying properties of products in ourview.

00:07:23 So let's start by changing this static title, and call it Product Info.The next thing we want todo is we want to add a label to show the product dimensions.

00:07:37 So we're going to call it Dimensions.And we're going to bind the property here to show ourdimensions.

00:07:49 So let's look for the value, here it is.And when we click on this chain link, you can see the

list of available properties coming from the OData service.00:07:59 So we're going to choose the Height property.But from this point, we can actually compose

a more complex property.

00:08:06 So we're going to add additional information with the Width property and the Depth.

00:08:19 Which are both available here on the left side as we can see. Great, now let's confirmthis.Now I don't need the other controls so I can just delete them.

00:08:32 And Save.Now let's preview our changes.

00:08:38 So we'll refresh the preview tab.And the Fiori launchpad mock environment will berefreshed.

00:08:50 And we'll launch our application with the changes that we've just applied.Great, there it is.

00:09:04 Now I'm pretty satisfied with the changes.So I can go ahead and deploy the application


3/9

00:09:12 to the HANA Cloud Platform.I do that by right-clicking on the root folder of the project.

00:09:19 Selecting Deploy and then Deploy to the SAP HANA Cloud Platform.I need to enter mypassword with my SCN credentials.

00:09:31 And then I confirm with Deploy.What's happening here is that we're creating a new versionof the application in a dedicated Git repository.

00:09:39 The version name would be 1.0.0.And it will be activated once it's deployed.

00:09:49 So the application has been deployed and if we go back to our HANA Cloud Platformaccount

00:09:56 and open the HTML5 Applications tab, we will see that a new entry has been created for ourproduct's application.

00:10:18 Here it is. Once we click on the product's link, we will navigate to the cockpit of thisapplication.

00:10:27 So we can see the various destination files that it uses for connectivity.The ES1 destinationfile that we added, we can see the various versions available for the application and itsdedicated Git repository.

00:10:39 And here are the latest activated versions that we added.Great. Now we are prompted forthe option to

00:10:48 register the application to the SAP Fiori launchpad, so let's do that.So the registrationwizard is open with our selected application.

00:11:00 We're going to confirm this and click Next. And now we're basically going to configure astatic tile.A static tile consists of a title, a subtitle, and an icon.

00:11:11 So we're going to change the Title, we're going to call it Inventory.And a subtitle that wewould call Available Products.

00:11:26 We can then go ahead and choose an icon.Click Next, and assign them to any one of theavailable catalogs and groups

00:11:40 coming from my Fiori launchpad.Great. So let's confirm this.

00:11:47 And now the registration is complete, and we can refresh our launchpad.And see the tileassigned there in the group called My Apps.

00:12:13 There it is.And we can select a tile and launch it.

00:12:21 OK. But now I want to continue with my development.And I want to add new capabilities tothe Detail view.

00:12:28 So I'll open the layout editor again with the detail view.And this time I want to add an image

00:12:44 to show the image of the product.So I'll drag and drop an image UI control, SAPUI5 control.

00:12:53 And drag it into the canvas over here.Now I can continue editing the properties in thisleft/right property pane.

00:13:03 So I will change the height and width of the image.There it is.

00:13:12 But now I want to go and configure the source of the image using the code editor.So I canselect the image and go directly to the respective code in the view.

00:13:26 Great, here it is.Now let's add the source for showing this image.

00:13:37 Now the source is a property coming from the underlying OData service, the product'sOData service.Now it's using a formatter function to format the URL that is coming from theback end.

00:13:55 And I'll just copy and paste this formatting method into the file. Great.

00:14:11 Now we can refresh the view and hopefully see our changes.Let's launch the application.

00:14:41 Great. And now we see the image of the chosen product.OK. So I can go ahead and deploymy changes back to the HANA Cloud Platform.

00:14:55 Or alternatively, I can manage the changes using the Git client that is available in the right-side pane of the Web IDE.I can view here all the various resources that I've changed


4/9

00:15:10 and are still not committed into the Git repository.By selecting one of the resources, I canright- click and select Compare

00:15:21 to see the changes that were applied since the last commit.And compare if this is indeedchanges that I want to add.

00:15:32 Once I confirm this, I can continue and work with the various options that this Git clientoffers Like creating a new branch or, for instance, stashing the changes.

00:15:45 So if I select Stash, for instance, you can see that all the changes will be removed.And adedicated stash will be created and added to the stash stack.

00:16:00 You notice that the detailed view XML returns to the previous version.Now once I want to goback to my changes,

00:16:11 I can select Show Stash, and it'll pop up the latest stash in the stack.I can select Pop tototally pop it or just Apply the latest stash, or completely Drop it.

00:16:23 I'll choose to Pop the stash.My changes are returned to the latest version, and all thechanged files are back in the staging area.

00:16:33 Now I can select all these files and commit them, and push them into the Gitrepository.First, I will have to add of course a description, so I'll call it "Adding an image".

00:16:47 And from this point, I can Commit and Push the changes into the branch.We'll just wait forthe confirmation.

00:17:05 Or enter our credentials.Great, the push has been completed.

00:17:21 Now if we go back to the application cockpit, we can see that a new commit has beenadded to the list of commits.

00:17:31 And from this point on, we can create a version from it and activate it.So our users would beable to launch the latest version of this application.

00:17:40 Great, so that's it for this unit.Thank you very much for joining us, and I hope to see younext time.


5/9

Week 07 Unit 02

00:00:11 Hello and welcome to Unit 2 of Week 7 in the 2016 Build Your Own Fiori App course.In theprevious unit, I showed an end-to-end development scenario of a Fiori app

00:00:21 in the Web IDE and the Cloud Fiori launchpad.In this unit, I want to show an end-to-endadministration scenario in my Fiori, cloud edition.

00:00:35 In the Fiori configuration cockpit, administrators can create new content and maintain

existing content for the Fiori launchpad.It also provides quick access to the useful tools,including tools like the usage analytics, the theme designer,

00:00:52 and access to the underlying HANA Cloud Platform cockpit. Additionally, there are info-related tiles referring the admins to the Fiori launchpad documentation

00:01:03 and the Fiori apps reference library.Now let's go over the main entities in the configurationcockpit.

00:01:13 The first one is the App & Tile.The SAP Fiori apps are represented by rectangular tiles thatallow direct access to the application.

00:01:22 The tile can be either static showing static content of a title, a subtitle, and an icon.A secondtype of tile is a dynamic tile.

00:01:33 Which shows in addition to the title, subtitle, and icon, it shows a live number indicator,

which is a result of a configured OData query.Usually, the number indicates the data aboutthe underlying application.

00:01:51 The third type of tile is the custom tile, which displays any custom SAPUI5 view that we candevelop in the Web IDE and deploy it to our Cloud Platform.

00:02:02 The second entity is the Role.A launchpad admin creates business roles in the HANA CloudPlatform cockpit.

00:02:09 He assigns the company users to the roles in order to define their access rights to thelaunchpad apps.The third entity are the Catalogs.

00:02:19 Catalogs are authorization entities used for assigning apps to users based on their businessroles.The fourth type is the Group.

00:02:31 Tile groups contain tiles that users can see when logging onto their Fiori launchpad.Groupsare actually a logical aggregation of tiles according to a business scenario

00:02:42 and under a specific title or group name.OK. So in this session, I want to show a demo of anend-to-end administration scenario in the Fiori configuration cockpit.

00:02:57 We will be creating a new theme and assigning it to the Fiori launchpad.We'll be creating tilegroups and a catalog for the application that we developed last time in the previous unit.

00:03:09 We'll be configuring a dynamic application tile for this application.And we'll be assigningcontent based on the user's role.

00:03:22 In addition, we'll be playing with some of the site settings.So let's start.

00:03:28 My entry point is the Fiori, demo cloud edition.Now I can access the cockpit configurationthrough the menu options on the right

00:03:42 by clicking Manage Site.Now I always want to have my site in an additional tab, so I click onPreview Site.

00:03:55 And the Fiori launchpad will be opened in parallel in a different tab.Now I can launch thetheme designer from the tools in the Fiori configuration cockpit.

00:04:09 Or I can configure it through the settings directly from the Fiori, demo cloud edition.So, let'sdo that. I'll click Customize Theme.

00:04:21 And now I can choose either to customize any one of the available Fiori applications or theapplication that I developed last time.

00:04:32 Or the whole look and feel of the SAP Fiori launchpad, so let's choose that.Once I do that, Ilaunch the UI theme designer, which is opened in a new tab.

00:04:46 It shows me the two available SAPUI5 themes, which will be the basis for our new theme.


6/9

00:04:54 So I'll choose the SAP Blue Crystal theme and open it.Now the object that I'm designinginthis case the Fiori launchpadwill be opened in the main canvas here in the middle.

00:05:25 Great. Now the launchpad is rendered.And I can change the various forms, I preview it,depending on the device that I want to show.

00:05:36 So either desktop, phone, or tablet.Now I have the option to change the styles in quickmode.

00:05:47 Basically the more common style properties that we want to change.Or deep dive into thevarious styles which are available in the underlying SAPUI5 controls.

00:06:00 And the Blue Crystal theme that we chose.So I'll go back to the quick editing, and I'll start bychanging the background color of my launchpad.

00:06:14 So let's choose a darker color.Dark-reddish color, and apply it. Great.

00:06:22 Now we can see that the changes are applied here in the main area, under the Previewtab.But I can always compare it to the original version by switching to the original.

00:06:34 OK. The second thing I want to do is change the logo for this launchpad.So here it is, thecompany logo under Image, I'll right-click here.

00:06:49 And select an image of my company's logo.Great. And it's applied.

00:06:59 Of course, I can apply a line of various other changes, but that'll do for now.I'll export thetheme that I've created, I'll call it atomictheme, give it an ID and a name.

00:07:24 Great.Now the theme is being exported and basically compiled into a zip file.

00:07:29 Which I can later upload back into my Fiori, cloud edition, and apply for all of my users tosee the changes.So the zip file has been downloaded.

00:07:44 Now I can close the theme designer and exit it.And then when I'm back to my launchpad, Ican import the theme into it, providing my SCN credentials.

00:08:08 Here it is.And now the theme is being imported.

00:08:16 And once it's uploaded, I will apply it as a default theme of my launchpad. OK The theme isimported and I'll keep the changes.

00:08:29 Go back to the main page and, voila, beautiful, my theme is applied.OK. Now let's go backto the configuration cockpit.

00:08:38 Now we've seen how to create a new theme and apply it to our Fiori launchpad.But now Iwant to add some more business roles to my launchpad

00:08:50 to assign various applications according to business roles.So business roles for thelaunchpad are defined in the underlying HANA Cloud Platform Cockpit.

00:09:03 I can launch the cockpit from this tile here.The Fiori cloud is provided by the HANA CloudPortal service, which is one of the services available in the HANA Cloud Platform.

00:09:25 So in order to configure business roles, I would need to add the roles under the Cloud Portalservice.So I'll navigate to Services.

00:09:38 Select the SAP HANA Cloud Portal service.And then open the configuration of SAP HANACloud Portal.

00:09:54 Now, after I select Roles, I can create a new business role.I want to create a role for the ITusers of the company so they can have access to IT-related applications.

00:10:08 So I will type in the IT Role.And once I select this, I can go ahead and assign various groupsor users to this role.

00:10:23 Now usually in a scenario, we would assign groups and the groups would correspond to anunderlying identity provider, or an LDAP.In this way reflecting the groups in our enterprise.

00:10:41 OK. So now if we go back to the cockpit.I want to define a new application catalog.

00:10:51 As we said, the catalog is the entity that assigns users according to their business roles.SoI'm going to create a new catalog, I'll call it IT catalog.

00:11:06 And I will add my products application to it.And I will assign it to the IT role that I've justcreated.

00:11:21 Let's confirm this, and the catalog has been created, good.Now we'll move along and createa tile group.


7/9

00:11:31 A tile group is a business scenario-related aggregation of applications.So I will create a newgroup and call it IT Group.

00:11:47 And I will chose the catalog that I've just created.And add tiles from it.

00:12:00 Basically this is the only available application, the products application, that I createdearlier.Now I can define this group to be a Locked group

00:12:10 meaning that the end user would not, through his personalization capabilities, be able toremove the group or move it all.I'll click Save, great, and now the group has been created.

00:12:28 Now as an end user...I will log in to the launchpad.

00:12:51 And use this end user ID.And you can see that the theme is applied for all of the end usersof this launchpad,

00:13:17 or of this Fiori edition.So the group is not available here, the IT group that I created

00:13:26 because I haven't assigned the user to this business role.So let's log out.

00:13:34 And now I'll go back to the cockpit, and assign this user to this business role.

00:13:47 Great. Now let's log back in.And there. Now that the user is assigned to the IT businessrole,

00:14:38 he can access the various applications that are part of the IT catalog that we defined.Andthey would appear under the Locked group, which are part of the IT group that we created.

00:14:53 Now when we say locked, this means that the group cannot be moved or removed, asopposed to other groups that are available in the launchpad and are not locked.

00:15:09 Now the second thing we want to do here

00:15:18 is define a dynamic tile for the application.So let's open the configuration app tile,

00:15:38 and this describes the various applications that we've created in our Fiorilaunchpad.Basically, only this one that we registered in the previous unit.

00:15:51 And under Navigation, we can see the Tile Properties.In the previous unit, we created astatic tile.

00:15:58 But this time, we want to define a new tile, a dynamic tile.So we're going to edit this screen.

00:16:04 We're going to change the tile type to be dynamic.So the title, the subtitle, and the icon

remain,

00:16:14 but now we have a new group of properties here, which are the Dynamic Data.The majorproperty here is the Service URL,

00:16:22 which is basically an OData query that we should define, and it comes in thisformat.Basically, it comes with the prefix of /sap/fiori,

00:16:36 which proxies this client-side AJAX call.Then comes the application ID, the OData endpoint,

00:16:46 the selected OData collection that we chose, which means the products, and then the queryitself with the count notation, because we're looking for a number.

00:16:58 So let's add this query that I created here.And what the query shows is... we want to showthe number of products that are from the Notebooks category.

00:17:16 So we can add a Number Unit.So it'll have a number with the word "Notebooks" under it.00:17:26 And a Refresh Interval in seconds, which will invoke the query service according to this

defined interval, so let's define every once in a minute.

00:17:40 Great. Now let's save this.And we can preview the site again.

00:17:50 And there we have it.So we changed the tile from being static,

00:17:55 and now it has an additional indication of the number of products which are in theNotebooks category.OK. We have additional capabilities here in the cockpit, and I'll justmention some of them.

00:18:13 We have the ability to manage the translation of the cockpit, meaning that we can downloadthe resource bundle of the main locale or language that is defined for our Fiori launchpad,


8/9

00:18:28 then send these resources for translation, and then upload back the translated resources tosupport the various languages that we want to support in this launchpad.

00:18:42 Other capabilities are general tools, like the usage analytics, which gives us statisticalinsights of access to our launchpad.

00:18:54 So we can see the number of visits and the numbers of unique visitors. All of them beingme.We can see the device types, the operating systems that were accessed from,

00:19:07 the average duration on a site, and other metrics.And we have the reference to the AdminGuide for the Fiori launchpad

00:19:24 and the reference to the Fiori Reference Library.OK. So this concludes this session on theend- to-end administration scenario.

00:19:37 And congratulationsyou've reached the end of the instructional portion of this course.As aquick reminder, your submission for the Develop Challenge is due by the end of next week.

00:19:51 Good luck, and I'll see you in the discussion forums. Bye!


9/9

2016 SAP SE or an SAP affiliate company. All rights reserved.No part of this publication may be reproduced or transmitted in any formor for any purpose without the express permission of SAP SE or an SAPaffiliate company.SAP and other SAP products and services mentioned herein as well as theirrespective logos are trademarks or registered trademarks of SAP SE (or anSAP affiliate company) in Germany and other countries. Please seehttp://www.sap.com/corporate-en/legal/copyright/index.epx#trademarkforadditional trademark information and notices. Some software productsmarketed by SAP SE and its distributors contain proprietary softwarecomponents of other software vendors.National product specifications may vary.These materials are provided by SAP SE or an SAP affiliate company forinformational purposes only, without representation or warranty of any kind,and SAP SE or its affiliated companies shall not be liable for errors oromissions with respect to the materials. The only warranties for SAP SE orSAP affiliate company products and services are those that are s et forth inthe express warranty statements accompanying such products and services,if any. Nothing herein should be construed as constituting an additionalwarranty.In particular, SAP SE or its affiliated companies have no obligation to pursueany course of business outlined in this document or any related presentation,or to develop or release any functionality mentioned therein. This document,

or any related presentation, and SAP SEs or its affiliated companiesstrategy and possible future developments, products, and/or platformdirections and functionality are all subject to change and may be changed bySAP SE or itsaffiliated companies at any time for any reason without notice.The information in this document is not a commitment, promise, or legalobligation to deliver any material, code, or functionality. All forward-lookingstatements are subject to various risks and uncertainties that could causeactual results to differ materially from expectations. Readers are cautionednot to place undue reliance on these forward-looking statements, whichspeak only as of their dates, and they should not be relied upon in makingpurchasing decisions.

www sap com
http://www.sap.com/corporate-en/legal/copyright/index.epx#trademarkhttp://www.sap.com/corporate-en/legal/copyright/index.epx#trademarkhttp://www.sap.com/corporate-en/legal/copyright/index.epx#trademark

Documents

OpenSAP Fiux2 Week 07 Transcript En