Create and Tes Mobile

7/24/2019 Create and Tes Mobile

1/20

openSAP Build Your Own Fiori App in the CloudWeek 3ExerciseCreate and Test a Fiori Master Detail App with SAP Web IDE


2/20

openSAP Exercise - Week 3

2

Exercise - Week 3

Create and Test a Fiori Master Detail App with SAP Web IDE

SAP Web IDE is a browser-based development tool. It accelerates building modernapplications for desktop and mobile devices by using the latest UI technologies. SAP WebIDE simplifies the end-to-end application lifecycle for SAPUI5 and Fiori applications:prototyping, development, packaging, deployment, and extensions.

Prerequisites

Before starting with this exercise, you need an SAP HANA Cloud Platform (HCP)developer account and a destination in your account to the SAP NetWeaver GatewayService Consumption System as described in the week 2 exercise Create a new SAPHANA Cloud Platform trial account.

Please verify your destination looks like this:

Note

All screenshots are based on SAP Web IDE version 1.9. Future versions of SAP Web IDEmight look different.


3/20

openSAPExercise - Week 3

3

Learning Objectives

After going through the prerequisites of setting up your SAP HCP trial account and

creating a new destination to a demo back-end system, you are now ready to access SAPWeb IDE from your browser and create your first Fiori app. It is recommended that you usethe Google Chrome browser to get the best experience with SAP Web IDE.

The SAP Web IDE documentation is available here,and the list of supported browsers bySAP Web IDE is availablehere.

In this exercise you will:

1. Create a new SAP Fiori Master Detail Application project by using the serviceSALESORDERXX that is available on the ES1 SAP NetWeaver Gateway Service

Consumption System (this back-end service delivers the content data to your app) or,alternatively, by using an Entity Data Model file (EDMX) provided.

2. Run the resulting app within the SAP Web IDE preview and test the results.

3. Run the app with random or personalized mock-data.

1. Access SAP Web IDE from your HCP account cockpit

From your SAP HANA Cloud Platform developer account, you can access your personalSAP Web IDE page that will be the starting point to create an SAP Fiori Master Detail App.

1.1. Login to your HANA Cloud Platform account in which you created the destinationto the NetWeaver Gateway Service Consumption System (The account that youcreated in the week 2 exercise mentioned earlier).

1.2. Navigate to Subscriptions and select the webideentry (click on webide).
https://help.hana.ondemand.com/webide/frameset.htm?0221845d73ad403ab2852142f3179177.htmlhttps://help.hana.ondemand.com/webide/frameset.htm?0221845d73ad403ab2852142f3179177.htmlhttps://help.hana.ondemand.com/webide/frameset.htm?51321a804b1a4935b0ab7255447f5f84.htmlhttps://help.hana.ondemand.com/webide/frameset.htm?51321a804b1a4935b0ab7255447f5f84.htmlhttps://help.hana.ondemand.com/webide/frameset.htm?51321a804b1a4935b0ab7255447f5f84.htmlhttps://help.hana.ondemand.com/webide/frameset.htm?51321a804b1a4935b0ab7255447f5f84.htmlhttps://help.hana.ondemand.com/webide/frameset.htm?0221845d73ad403ab2852142f3179177.html


4/20


4

1.3. In the webideentry details, you can find your personalized SAP Web IDE URL.This is your starting point for the development environment.

The WebIDE URL should look like the following:

https://webideXXXXXXXX.dispatcher.hanatrial.ondemand.com


5/20


5

You may want to bookmark this URL for future use and easy access.

2. Create a new Project based on Fiori Master Detail App template andSAP Netweaver Gateway Service

SAP Fiori apps consume data from a backend system using an OData service. In order togenerate and test the UI in SAP Web IDE, you need to have access to an OData serviceor to a local Entity Data Model file (EDMX), which holds a service model description.Using an EDMX file as a starting point is a common practice in projects where differentteam members are working on the UI and on the data design. The EDMX file enables you

to start and design your application even before the OData service is ready.

In the week 2 exercise, you created a destination to the SAP NetWeaver Gateway ServiceConsumption System that provided you demo data from an SAP back-end system.

In this section, you will start the creation of a Fiori app based on a Master Detail templateincluded in SAP Web IDE.

1. Launch SAP Web IDE.

2. From your Welcome Page, choose New Project from Template.


6/20


6

3. Alternatively, you can choose in the menu File New Project from Template


7/20


7

4. Choose SAP Fiori Master Detail Application from the templates screen and click Next.(make sure not to choose SAP Fiori Master Master Detail Application)

5. Give a name to your project, e.g., MyFirstFioriAppand click Nextat the bottom of thepage to continue to the next screen.

In the next step, you will create an app based on the destination you already defined inweek 2 (a real SAP NetWeaver Gateway service).

If you were unable to define or connect to a destination (for a real SAP NetWeaverGateway service), you can use the alternative method described in section 4 of thisexercise and start your application using an EDMX file. If that is the case, feel free toskip straight to section 4 now.


8/20


9/20


9

Note

By using a value for the Project Namespace, you assign a kind of group definition to yourproject files. In future exercises when you create a new view, the Project Namespacevalue will indicate that the new view and its controller belong to your app or the respectiveapp that you are going to extend.

8. Scroll down to the Detail Sectionand provide values for the Detail Sectionas followsand leave the Navigation Section blank.

9. Click Nextto proceed.


10/20


10

10. Click Finishto complete the wizard.

11. Congratulations! Your project based on the service SALESORDERXX has beencreated.

3. Run the Fiori Master Detail App in Preview

Now you will run the Master Detail App you created in the SAP Web IDE preview.

To run the app, proceed as follows:

1. If you are not already there, open SAP Web IDE. You may arrive on the Welcome pageor in the Development page of SAP Web IDE. Switch to the Development page of SAP

Web IDE as highlighted below in the left-hand column.


11/20


11

2. Expand the project folder (in this example, it is the MyFirstFioriAppproject).

3. Select the index.htmlentry in the projects file browser.

4. Click the Runbutton to open a new browser tab/window.

If there is a successful connection to a back-end service that contains the relevant data,the app will show the results in the Master Section. Selecting an entry in the MasterSection, corresponding information will be displayed in the Details Section.


12/20


12

If you want to learn how to run this application with random or personalized mock-data,continue to section 5 of this exercise.


13/20


13

4. Create a new Project based on Fiori Master Detail App template, localEDMX file and mock-data

SAP Fiori apps consume data from a back-end system using an OData service. In order togenerate and test the UI in the SAP Web IDE, you need to have access to an ODataservice or to a local Entity Data Model file (EDMX), which holds a service modeldescription. Using an EDMX file as a starting point is a common practice in projects wheredifferent team members are working on the UI and on the data design. The EDMX fileenables you to start and design your application even before the OData service is ready.

This section is provided as an alternative to what was covered in section 2 above andallows you to complete this exercise without connectivity to an OData service. If you wouldlike to complete this exercise using this alternative, please follow section 2 steps 1-5 firstand then continue below, which is the screen you should see after completing section 2,

step 5. Otherwise, if you were able to complete section 2 and section 3 above, feel free toskip straight to section 5.

1. Download the schema_file_salesorder.edmx file from the same openSAP page whereyou found this exercise. Select the File Systemsource and browse for the file you justdownloaded. Click on Nextto proceed.


14/20


14

2. In the Template Customization step enter the following values for the Project Settingsand the Master Section.

Note

By using a value for the Project Namespace, you assign a kind of group definition to yourproject files. In future exercises when you create a new view, the Project Namespace

value will indicate that the new view and its controller belong to your app or the respectiveapp that you are going to extend.

3. Scroll down to the Detail Sectionand provide values for the Detail Sectionas followsand leave the Navigation Section blank.


15/20


15

4. Click Nextto proceed.

5. Click Finishto complete the wizard.

6. Congratulations! Your project based on the SalesOrder EDMX schema file has beencreated.

5. Test the app with mock-data and display the result in your SAP Fioriapp

Next you will learn how to test a Fiori App project without back-end data delivered by an

OData service or in addition to an existing OData service. SAP Web IDE allows runningeach app with random or individualized mock-data. This helps developers to test their Fioriapps from design and front-end development perspectives without interferences due tolack of back-end availabilities.

The easiest way to run the app with mock-data is calling the app with random data.


2. Expand the project folder (in this example, it is the MyFioriAppproject).

3. Select the index.htmlentry in the projects file browser.


16/20


16

4. Choose from the menu Run Run with Mock Data to open a new browsertab/window.

5. Check the results and select an entry in the Master Section to see its detailedinformation.

Note

Alternatively, you can right-click on index.html and choose Run Run with Mock Data


17/20


17

6. Edit and personalize your mock-data

Generally, it may be valuable to use personalized mock-data that reflects your specific

needs properly. Therefore, randomly generated mock-data can be edited directly in theSAP Web IDE project. SAP Web IDE provides an easy table-like editing form and createsthe respective JSON file at the end of the editing process. A JSON-formatted mock-dataexample can be found in the Appendix file available on the same openSAP page whereyou found this exercise.


2. Expand the project folder (in this example, it is the MyFioriAppproject).

3. Expand the folder model.

4. Right-click on the entry metadata.xmland choose Edit Mock Data

5. Choose now either the option Generate Random Dataand then edit this data. This isavailable for both collections of this service / schema file.


18/20


18

6. Or create some entries, line by line, by choosing Add Row.

7. Finish entering individual mock-data entries by clicking on OK.

8. SAP Web IDE created a new mock-data file XXXXX.jsonin the folder model.


19/20


19

9. To test again, right-click on theindex.htmlentry in the projects file browser and go toRun Run with Mock Datato open a new browser tab/window

10. Check the results and select an entry in the Master Section to see its detailedinformation.


20/20

www sap com

2015 SAP SE or an SAP affiliate company. All rights reserved.No part of this publication may be reproduced or transmitted in any 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#trademark

foradditional 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 set 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 companies

strategy 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 making
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

Create and Tes Mobile