OpenSAP Fiux2 Week 04 ExerciseCreateTestApp

8/18/2019 OpenSAP Fiux2 Week 04 ExerciseCreateTestApp

http://slidepdf.com/reader/full/opensap-fiux2-week-04-exercisecreatetestapp 1/15

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

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

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.

openSAP

Copyright/Trademark

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

Bookmark this URL for future use andeasy access.

openSAP

Copyright/Trademark

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.

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.

1. Launch the SAP Web IDE in yourbrowser.

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.

Alternatively, you can also create a newproject from the Development area.There, you choose File from the topmenu and New → Project fromTemplate.

openSAP

Copyright/Trademark

3. In the Template Selection step ofthe wizard, select the SAP FioriMaster-Detail Application tile andchoose Next.

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.

If prompted, provide your systemcredentials in the pop-up.

6. Select GWSAMPLE_BASIC fromthe services list and choose Next.

You can search for the service to find iteasier.

openSAP

Copyright/Trademark

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.

openSAP

Copyright/Trademark

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.

1. Launch the SAP Web IDE in yourbrowser.

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.

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.

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

openSAP

Copyright/Trademark

4. In the Basic Information step,provide a project name:MySalesOrders and confirm withNext.

5. In the Data Connection step,select File System under Sources and click on the button Browse… next to the Service Information input field.

6. Open the fileES4_GWSAMPLE_BASIC.edmx and choose Next in the wizard.

You can download the EDMX sample

file from the openSAP course assets.

openSAP

Copyright/Trademark

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.

openSAP

Copyright/Trademark

3.3 Run App in Preview (Run with Server)

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.

1. In the SAP Web IDE, right-click onthe folder MySalesOrders andchoose Run → Run with Server from the context menu.

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.

openSAP

Copyright/Trademark

3.4 Run App in Preview (Run with Mock Server)

If you have created your app with a real service or with the EDMX schema file, you can also run and testyour app with mock data.

1. In the SAP Web IDE, select theMySalesOrders folder and, fromthe top menu, choose Run → Runwith MockServer .

Alternatively, you can go to folderwebapp/test, selecttestFLPService.html and click thebutton Run from the menu.

2. See the master detail appdisplaying data in both master anddetail view. You will also see icon

tab filters that come alongside withthe template.You will enhance the app in afurther exercise of this openSAPcourse.

Here, the app only displays randommock data. Learn how to edit mockdata in chapter 4.

openSAP

Copyright/Trademark

3.5 Optional: Testing the Responsiveness

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.

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

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.

openSAP

Copyright/Trademark

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.

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.

You are prompted to login with yourHCP credentials.

openSAP

Copyright/Trademark

4 EDIT AND PERSONALIZE YOUR MOCK DATA

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.

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

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.

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.

openSAP

Copyright/Trademark

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.

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

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.

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.

OpenSAP Fiux2 Week 04 ExerciseCreateTestApp

Documents

Transcript of OpenSAP Fiux2 Week 04 ExerciseCreateTestApp

OpenSAP Sf1 Week 1 Presentation

OpenSAP Fiux2 Week 01 Unit 02 IntroFiori Presentation

OpenSAP Sps1 Week 1 Transcript

OpenSAP c4c1 Week 1 Transcript

OpenSAP HANA CLOUD2 Week 4 Transcripts

OpenSAP Sf2 Week 1 Transcript

OpenSAP c4c1 Week 2 Transcript

OpenSAP Hsta1 Week 1 Exercise

OpenSAP Fiux2 Week 05 All Slides

OpenSAP Sf1 Week 3 Presentation

OpenSAP Sf1 Week 3 Transcript

OpenSAP c4c1 Week 3 Transcript

OpenSAP Introsap1 Week 1 Transcripts

OpenSAP Mobile1 Week 02 Enterprise Mobility

OpenSAP Fiux1 Week 4 Transcript

OpenSAP Fiux2 Week 01 Unit 04 ToolsRessources Presentation

OpenSAP Fiux1 Week 3 Transcript

OpenSAP Fiux2 Week 01 Unit 01 UXStrategyIntro Presentation

OpenSAP Hana3 Week 2 Presentation

OpenSAP a4h1 Week 03 Transcripts