openSAP course Build Your Own SAP Fiori App in the Cloud–2016 Edition Exercise Week 4 Create and Test an App 1 INTRODUCTION 1.1 ExerciseDescriptionAfter going through the prerequisites of setting up your SA P HCP trial account and creating a new destination to a demo back-end system, you are now ready to access SAP Web IDE from your browser and create your first SAP Fiori app. In this exercise, you will create a Sales Order Tracking app. In this exercise you will: - Access the SAP Web IDE from your SAP HANA Cloud Platform (HCP) account - Create a F iori-like application using the SA P Fiori Master-Detail template from the SAP Web IDE oEither by using a service that is available on the ES4 SAP Gatew ay Serv ice Consumption System (this back-end service delivers the content data to your app; see chapter 3) oor, alternatively , by using a local Entity Data Mod el (EDMX ) file provided that holds a service model description (see chapter 4) - Run the r esulting app w ithin the SAP Web IDE preview and test the re sults - Test the responsiveness of your app - Create random or personalized mock data Note This exercise is based on SAPUI5 version 1.34. All screenshots are based on SAP Web IDE version 160225 (that means February 25, 2016). Future versions of SAP Web IDE might look different. 1.2 Prerequisites- You have an SAP HANA Cloud Platform (HCP) trial account - You have: o(either) a user in the ES4 SAP Gateway service and maintained a destination in your HCP account as described in the System Onboarding Guide provided in week 4 o(or) downloaded the ES4_GWSAMPLE_BASIC.edmx file from the openSAP course page Note This exercise can also be completed without having a user in the ES4 SAP Gateway Service Consumption System and thus fetching data from a real backend. Please note that for later stages in the course you'll need an app that fetches data from a real service in order to walk through and complete all the exercises to come. 1.3 Further InformationIt is highly recommended that you use the Google Chrome browser to get the best experience with SAP Web IDE.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
openSAP course Build Your Own SAP FioriApp in the Cloud – 2016 Edition
Exercise Week 4Create and Test an App
1 INTRODUCTION
1.1 Exercise Description
After going through the prerequisites of setting up your SAP HCP trial account and creating a new destination to ademo back-end system, you are now ready to access SAP Web IDE from your browser and create your first SAPFiori app. In this exercise, you will create a Sales Order Tracking app.
In this exercise you will:- Access the SAP Web IDE from your SAP HANA Cloud Platform (HCP) account- Create a Fiori-like application using the SAP Fiori Master-Detail template from the SAP Web IDE
o Either by using a service that is available on the ES4 SAP Gateway Service ConsumptionSystem (this back-end service delivers the content data to your app; see chapter 3)
o or, alternatively, by using a local Entity Data Model (EDMX) file provided that holds a servicemodel description (see chapter 4)
- Run the resulting app within the SAP Web IDE preview and test the results- Test the responsiveness of your app- Create random or personalized mock data
Note
This exercise is based on SAPUI5 version 1.34. All screenshots are based on SAP Web IDE version 160225 (that means February 25, 2016). Futureversions of SAP Web IDE might look different.
1.2 Prerequisites
- You have an SAP HANA Cloud Platform (HCP) trial account
- You have:o (either) a user in the ES4 SAP Gateway service and maintained a destination in your HCP
account as described in the System Onboarding Guide provided in week 4o (or) downloaded the ES4_GWSAMPLE_BASIC.edmx file from the openSAP course page
Note
This exercise can also be completed without having a user in the ES4 SAP Gateway Service ConsumptionSystem and thus fetching data from a real backend.Please note that for later stages in the course you'll need an app that fetches data from a real service inorder to walk through and complete all the exercises to come.
1.3 Further Information
It is highly recommended that you use the Google Chrome browser to get the best experience with SAP Web IDE.
2 ACCESS SAP WEB IDE FROM YOUR SAP HANA CLOUD PLATFORM
ACCOUNT COCKPIT
Explanation Screenshot
1. Login to your SAP HANA CloudPlatform account in which youcreated the destination to the SAPGateway Service ConsumptionSystem (for example, access it viahttps://account.hanatrial.ondemand.com/cockpit).
2. Navigate to Services and makesure the SAP Web IDE service isenabled.If it is not enabled, click the tile andenable it.
3. Click the SAP Web IDE tile andand click Open SAP Web IDE .This is your starting point for thedevelopment environment.The SAP Web IDE URL shouldlook like the following:https://webide-XXXXtrial.dispatcher.hanatrial.ondemand.com
3 CREATE AN SAP FIORI MASTER-DETAIL APP FROM TEMPLATE
SAP Fiori apps consume data from a backend system using an OData service. In order to generate and test the UIin SAP Web IDE, you need to have access to an OData service or to a local Entity Data Model (EDMX) file thatholds a service model description.
3.1 Create an SAP Fiori Master-Detail App with SAP Gateway Service
In this step, you will create an app from a SAP Fiori Master-Detail Application template and a real SAP GatewayService.
Note
In case that you didn’t define or didn’t connect to a SAP Gateway service destination, you can alternativelyuse the possibility to create an app from a template with a local Entity Data Model (EDMX) file. Just jumpstraight to section 3.2 now.
Explanation Screenshot
1. Launch the SAP Web IDE in yourbrowser.
Note
It is recommended that you use theGoogle Chrome brower for the entirecourse and for all exercises.
2. On the Welcome page, choose
New Project from Template.
The New Project wizard opens.
Note
Alternatively, you can also create a newproject from the Development area.There, you choose File from the topmenu and New → Project fromTemplate.
3. In the Template Selection step ofthe wizard, select the SAP FioriMaster-Detail Application tile andchoose Next.
Note
Regarding the template versions,please note that this exercise is basedon SAPUI5 version 1.34. Futureversions look and behave be differently.
You get the SAPUI5 best practiceimplementation of SAP Fiori Mater-Detail design here:http://experience.sap.com/fiori-design/app-types/master-detail-app
4. In the Basic Information step,provide a project name:MySalesOrders and confirm withNext.
5. In the Data Connection step,select Service Catalog under
Sources and choose thedropdown arrow in the ServiceInformation field to select the ES4system destination.
Note
If prompted, provide your systemcredentials in the pop-up.
6. Select GWSAMPLE_BASIC fromthe services list and choose Next.
7. In the Template Customization step, do the following entries:
Application Settings
Title Sales OrdersNamespace com.so
Description Sales Orders
Feature Selection
SAP Fiorilaunchpad
Include
Data Binding – Object
Object Collection SalesOrderSet
Object CollectionID
SalesOrderID
Object Title CustomerName
Object Numeric Attribute
GrossAmount
Object Unit ofMeasure
CurrencyCode
Data Binding – Line Item
Line ItemCollection
ToLineItems
Line ItemCollection ID
ItemPosition
Line Item Title ProductID
Line Item Numeric Attribute
GrossAmount
Line Item Unit ofMeasure
CurrencyCode
8. Choose Next, and in theConfirmation step, choose Finish.
9. Check that the MySalesOrders folder has been created in yourdevelopment area in the folderWorkspace containing severalfolders and files of your SAPUI5SAP Fiori Master-DetailApplication.
3.2 Create an SAP Fiori Master-Detail App with a Local EDMX File
Using a local Entity Data Model (EDMX) file as a starting point is a common practice in projects due to differentteam members who are working on the UI and on the data design at the same time. The EDMX file enables you tostart, prototype, and design your application even before the OData service is ready.This section is provided as an alternative to the content covered in section 3.1. It allows you to complete this exercisewithout any connectivity to an OData service.
Explanation Screenshot
1. Launch the SAP Web IDE in yourbrowser.
Note
It is recommended that you use theGoogle Chrome brower for the entirecourse and for all exercises.
2. On the Welcome page, choose
New Project from Template.
The New Project wizard opens.
Note
Alternatively, you can also create anew project from the Development area. There, you choose File from thetop menu and then New → Projectfrom Template.
3. In the Template Selection step inthe wizard, select the SAP FioriMaster-Detail Application tile andchoose Next.
Note
Regarding the template versions,please note that this exercise is basedon SAPUI5 version 1.34. Futureversions look and behave bedifferently.
You get the SAPUI5 best practiceimplementation of SAP Fiori Mater-Detail design here:http://experience.sap.com/fiori-design/app-types/master-detail-app
10. In the Template Customization step, do the following entries:
Application Settings
Title Sales OrdersNamespace com.so
Description Sales Orders
Feature Selection
SAP Fiorilaunchpad
Include
Data Binding – Object
ObjectCollection
SalesOrderSet
ObjectCollection ID
SalesOrderID
Object Title CustomerName
Object Numeric Attribute
GrossAmount
Object Unit ofMeasure
CurrencyCode
Data Binding – Line Item
Line ItemCollection
ToLineItems
Line ItemCollection ID
ItemPosition
Line Item Title ProductID
Line ItemNumeric Attribute
GrossAmount
Line Item Unit ofMeasure
CurrencyCode
11. Choose Next, and in theConfirmation step, chooseFinish.
12. Check that the MySalesOrders folder has been created in yourdevelopment area in the Localfolder containing several foldersand files of your SAPUI5application.
If you have created your app with the local EDMX file only, this function will not work since there is no
service where to fetch the data from.
Explanation Screenshot
1. In the SAP Web IDE, right-click onthe folder MySalesOrders andchoose Run → Run with Server from the context menu.
Note
Alternatively, you can go to folder
webapp/test, select testFLP.html andclick the button Run from the menu.
2. If prompted, enter your ES4 system credentials and/or confirmthe pop-up Store files on thisdevice. See the master detail appdisplaying data in both master anddetail view. You will also see icontab filters that come alongside withthe template.You will enhance the app in afurther exercise of this openSAPcourse.
NoteHere, the app fetches data from a realbackend. You can also run theapplication with random or personalizedmock data. To learn about that, pleasesee section 5 of this exercise.
SAP Web IDE provides default run configurations for your projects. You can create and configure additional runconfigurations that define how your project or unit test is executed.In this step, you will create a new run configuration to open the app in a frame with configurable viewing options,for example, you can check the app in different screen sizes, which comes for free with SAPUI5's responsiveness.
Explanation Screenshot
1. Access SAP Web IDE and go tothe Development page.
2. Right-click your project folder and,choose Run → RunConfigurations… from the contextmenu.
3. The dialog Run Configurations for project MySalesOrders isdisplayed.
4. Click the plus (+) icon and selectWeb Application from the listdisplayed.
5. Provide a name for the runconfiguration, for example: Runwith Server and Frame
6. In the field Run Application File – File Name, provide the path to the
html file that should be run: /webapp/test/testFLP.html
Note
In this case, you choose the html file forstarting the app in the SAP Fiorilaunchpad sandbox with the realbackend server. Choose the filetestFLPService.html for the mockserver or if your app is based on theEDMX schema file.
7. Select the option With Frame inthe Preview Mode section andclick on the button Save and Run to confirm the new Run
Configuration.
8. Access your app (Sales Orders)from the Launchpad and check outthe different display options.You can, for example, reduce the
the screen size and view the apphow it looks on a desktop, tablet, ormobile screen.
Note
You are prompted to login with yourHCP credentials.
9. In the upper left corner you canchange the resolution to see howthe application is visualizeddepending on the available space.
10. You can also check out the app ona real (mobile) device. Once yourun the app with the frame, a QRcode will be generated in the topright corner.Click the QR code icon and scan itwith your mobile device. Whenopening the link from the QR code,it will take you to the app.
Note
You are prompted to login with yourHCP credentials.
Instead of using random mock data, you might want to edit the mock data to make it fit to your business scenario.This way, your end user or tester can more easily understand the app. Therefore, randomly generated mock datacan be edited directly for each SAP Web IDE project. SAP Web IDE provides an easy table-like editing form andcreates the respective data entries in the JSON file format at the end of the editing process.
Note
You can use and edit mock data for both scenarios – app created with a real service and the local EDMXschema file.
4.1 Generate and customize new Mock Data
Explanation Screenshot
1. Launch the SAP Web IDE, go theDevelopment area and expandthe MySalesOrders folder.
2. Go to the folderwebapp/localService. Right-clickthe file metadata.xml and chooseEdit Mock Data.
The Edit Mock Data editor isdisplayed.
3. For this exercise, first, choose theSalesOrderSet table on the lefthand side.
4. You can immediately create databy clicking the button GenerateRandom Data. Then editing thisdata.Or you create some entries line byline and add rows as you like byclicking on the Add Row button.
5. Now, generate or type in somedata.
Note
To see your results when again runningthe app with Mock Data, make sure thatthe checkbox at the bottom is selected:Use the data above as my mock datasource.
6. Finish the individual mock-datamaintenance by clicking the buttonOK.
7. Check that the folder mockdatahas been created automatically inthe localService folder containingnew mock data files in the jsonformat for those entity sets yougenerated data for.
Note
With a double-click, you can open thefile in the Code Editor to analyze thecontent. More about the Code Editorwill come in the next exercise.
4.2 Run the App in Preview Mode with your Customized Mock Data
Explanation Screenshot
1. In the SAP Web IDE, select theMySalesOrders folder and, fromthe top menu, choose Run → Runwith MockServer .
2. Check that the app displays (yourindividual) mock data.
Note
You can search for e.g. the customername or other key words that describeyour individual data entries.You might need to clean the cache andconfirm a pop-up called Store files onthis device.