Different Ways of How to Run an UI5 Application in SAP Web IDE

7/26/2019 Different Ways of How to Run an UI5 Application in SAP Web IDE

http://slidepdf.com/reader/full/different-ways-of-how-to-run-an-ui5-application-in-sap-web-ide 1/27

1

SAP Web IDEHow-To Guide

Provided by Customer Experience Group

Different Ways of How to Run an UI5 Application inSAP Web IDE

Applicable Releases:SAP Web Integrated Development Environment 1.4



H2G - Running SAP UI5 applications in SAP Web IDE

TABLE OF CONTENTS

1. Business Scenario ............................................................................................................................ 4

2. Background Information .................................................................................................................. 4

3. Prerequisites ................................................................................................................................... 5

4. Step-by-Step Procedure ................................................................................................................... 5

4.1 Create a test application ..................................................................................................................... 6

4.2 Simple Run ......................................................................................................................................... 10

4.3 Running without frame ..................................................................................................................... 12

4.4 Running with Mockdata .................................................................................................................... 13

4.5 Run on SAP HANA Cloud .................................................................................................................... 20

4.6 Run in SAP Fiori Launchpad Sandbox ................................................................................................ 26




1. BUSINESS SCENARIO

SAP Web Integrated Development Environment (or SAP Web IDE) is a next-generation cloud-basedmeeting space where multiple project stakeholders can work together from a common web interface,

connecting to the same shared repository with virtually no setup required. It includes multiple interactivefeatures that allow you to collaborate with your colleagues and accelerate the development of yourHTML5/UI5 applications.

2. BACKGROUND INFORMATION

In this How-To Guide we will see how many ways you have to run an application developed with SAP WebIDE. There are 5 ways to do it:

1) Simple Run2) Run without Frame3) Run with Mockdata4) Run on SAP Hana Cloud

5) Run in SAP Fiori Launchpad Sandbox

We will explore one by one all these ways trying to understand their meaning and when to use one instead ofthe other. Running a fact sheet is not shown here because it will be later illustrated in a separate guide.Depending on which way to run the app we have chosen, our application can be run in a preview window ornot. If it runs in a preview window, this is what we can see on the screen:




The preview is a fast way to run our app. There are 6 kinds of objects that we can see in the preview:1) The running application2) The toolbar for changing the layout of our app. We can have Large, Medium, Small and Custom

layouts. With a Custom Layout you can specify the screen size you prefer

3) The refresh button to reload the complete preview window4) The orientation button to switch between Horizontal and Vertical orientation5) The Language Selection that changes your visualization language6) The QR-Code button to display the QR-Code related to application’s URL

3. PREREQUISITES

To connect to your SAP Web IDE system, open the browser and enter the URL of your system.

4. STEP-BY-STEP PROCEDURE

This is the sequence of steps:1) Create a test application2) Simple Run3) Run without Frame4) Run with Mockdata5) Run on SAP Hana Cloud6) Run in SAP Fiori Launchpad Sandbox




4.1 Create a test application

For the entire walkthrough of this guide we will need a test application that we will use for showing all thedifferent ways to run an application developed with SAP Web IDE.

Let’s quickly create a new app based on the service SRA018_SO_TRACKING_SRV. This service is theOData provider for the Sales Order application. We will use it to get a list of all the customers with salesorders.

1. Open SAP Web IDE

2. Choose File New Project

3. Enter the name for your application (i.e. MyCustomers) and go to next step

4. Create a SAP Fiori Application and go to next step




5. Check that ‘Service Catalog’ is selected on the left hand side. On the right hand side select the GM6 ABAP OData service from the dropdown

6. Enter the credentials provided by your instructor and click on Log In

7. Start typing SRA018 in the filter box and select the service SRA018_SO_TRACKING_SRV;




8. Go to the next screen. Enter the following information for the master and detail sections(scroll down tofill)

9. Go to Next Steps and Click on Finish




10. Your application has been created successfully




4.2 Simple Run

The easiest way to run an application in SAP Web IDE is to locate the starting page for this application and

click the menu item Run Run. Alternatively the Run button on the toolbar can be used as well.

...

1. Open SAP Web IDE

2. Expand the folder containing your application and select the index.html file

3. Click on the menu Run Run or on the Run button on the toolbar.




4. Provide the requested credentials and your application will be launched in preview mode:




4.3 Running without frame...

Another way to run the same app is to use the option Run without frame. This will run the applicationalways in preview mode, but without the frame for changing the layout and other preview settings.

Choosethem enuoptionFile -> New -> Project

1. Open SAP Web IDE

2. Expand the folder containing your application and select the index.html file

3. Click on the menu Run Run without Frame

4. Provide the requested credentials and your application will be launched in preview mode without theframe containing the layout settings, the orientation and the language options




4.4 Running with Mockdata...

Working with the mock service allows you to create an application regardless of the relevant OData service

availability. Running an application using a client mock service enables you to test your application withoutdepending on the OData provider.Likewise, it enables you to work on your application while offline.In order to run with mock data, SAP Web IDE requires a metadata.xml file. This file can be located under themodel folder. Normally, when you create a new application using one of the templates in SAP Web IDE, themodel folder and the metadata.xml file are automatically generated for you. Indeed for our application wealready have this metadata.xml file:

Let’s now see the steps to successfully run an application with mock dataChoosethem enuoptionFile -> New -> Project

1. Open SAP Web IDE

2. Select the index.html file in your app and right click and select Project Settings




3. In the pane that appears select Mock Data. On the right hand side ensure that the Service URL isalready populated for you, but if this is not, you need to get it from the serviceURL of your applicationand paste it here.

4. Press the close button at the bottom to close the Pane

5. Select the index.html file in your app and click on Run Run with Mockdata




6. The application is executed with mock data. As you can see here, instead of seeing real data, youhave the name of the field with a progressive number: there is a mock service that generated data foryou based on the schema coming from the Service URL. If you don’t specify the Service URLparameter, the application takes as the data schema, the metadata.xml file located under the model

folder of your application.

7. Now, let’s import a JSON file containing all the data for this Customer entity. The first thing we needto do is to get the JSON file. If you don’t have it, there is an easy way to get one by using Chromebrowser. Let’s run once the application in the standard way by selecting the index.html file andclicking on the Run button. Once you get the preview window with the customers, right click on thepage and select Inspect Element




8. A new window appears showing some code and probably some red lines. Don’t care about them andselect the Network tab. Then click on the Refresh button on the toolbar in order to reload the page

9. Once the page is fully loaded, you should see, among the network lines, the call to the service forrequesting data. Click on it. If you click on the Response tab, you should be able to get the answer

from the service containing the requested data

10. Select the entire content and copy and paste it into an editor. Remove the first characters until the firstopen square bracket and at the end of the document remove as well all the characters after the lastclosing square bracket

11. Save the file as Customer.json. The name must be the same as the entity in your metadata schema.




12. From SAP Web IDE, select your model folder, right click on it and select Import File

13. Select the file you have just created and click on Import

14. Once the file has been imported, just for testing, change the CustomerName property for the firstcustomer and save the file. You can change for example “Becker Berlin” to “Apple Juice”

15. Now Select the index.html file in your app and right click and select Project Settings




16. In the pane that appears select Mock Data. On the right hand side, this time, select the Mock DataSource as “JSON files” and press Save button at the bottom of the pane

17. Press the close button at the bottom to close the Pane

18. Select the index.html file in your app and click on Run Run with Mockdata




19. Your application is now taking data from your JSON file




4.5 Run on SAP HANA Cloud...

In order to run an application on SAP Hana Cloud, you need to perform the following phases:1) Create a new application on SAP HANA Cloud and clone it to SAP Web IDE

2) Put your source code in the SAP Web IDE app and upload it to the remote HANA repository3) Activate and test the app on the HANA Cloud

After these 3 steps you can run the app from SAP Web IDE.For a detailed list of steps and screenshots please refer to the “H2G - Creating and running apps onHANA Cloud in SAP Web IDE” document


1. Open SAP HANA Cloud

2. Select HTML5 Applications and create a new HTML5 application by clicking on the button NewApplication…

3. On the popup enter a new app name and press Create

4. Now click on the newly created app name




5. On the page that appears, select Development in Content(on the left hand side) and from the righthand side Write down or copy in the clipboard the Git Repository URL link for this new app. This isthe container where we are going to put the application created through SAP Web IDE

6. From SAP Web IDE click on File Git Clone Repository

7. Paste the link you have got in the previous step, provide your credentials for the authentication (I-userand SCN Password) and click on OK




8. Once the repository has been cloned, select the application we have just created (mynewhtml5app).Create an index.html file under the app(by right click).

9. And put some code in this new index.html and Save

10. Click on View Git Pane to open the SAP Web IDE Git client and push the new source code to theHANA Cloud repository




11. If there is a prompt for User ID/Pwd, provide the User ID and Scn password. Press ok.

There should be a Push Completed popup.

12. A new line will appear in the HANA Cloud cockpit for your application

13. Open HANA Cloud and go back to your app and create a new version for this new source code. Then

activate the new version and run the application by clicking on the version number




14. Open SAP Web IDE

15. Select the index.html file inside your application and click on Run Run on SAP HANA Cloud

16. Enter your credentials and click on Run. The Account name can be taken directly from the HANACloud cockpit. Password is SCN password

17. The application is finally executed in the HANA Cloud




4.6 Run in SAP Fiori Launchpad Sandbox...

In SAP Web IDE it is possible to launch the SAP Fiori Launchpad sandbox for a single application withoutany configuration steps. Just select the Component.js file of the app and choose Run -> Run in SAP Fiori

Launchpad Sandbox from the menu. The generic Launchpad page from the test-resources is opened andthe selected component is passed as query parameters so that this is directly executed. This approach is theeasiest way for testing an application in a local SAP Fiori Launchpad context. But it does currently not allowpassing parameters to an application.


1. Open SAP Web IDE

2. Select the MyCustomers application we’ve created in the chapter 4.1.

3. Select the Component.js file

4. Choose Run Run in SAP Fiori Launchpad Sandbox from the menu

5. The application is successfully executed in the Launchpad sandbox



© 2014 SAP SE. All rights reserved.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP

BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP

products and services mentioned herein as well as their respective

logos are trademarks or registered trademarks of SAP SE in Germanyand other countries.

Business Objects and the Business Objects logo, BusinessObjects,

Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and

other Business Objects products and services mentioned herein as

well as their respective logos are trademarks or registered trademarks

of Business Objects Software Ltd. Business Objects is an SAP

company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL

Anywhere, and other Sybase products and services mentioned herein

as well as their respective logos are trademarks or registered

trademarks of Sybase Inc. Sybase is an SAP company.

Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are

registered trademarks of Crossgate AG in Germany and other

countries. Crossgate is an SAP company.

All other product and service names mentioned are the trademarks of

their respective companies. Data contained in this document serves

informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materialsare provided by SAP SE and its affiliated companies ("SAP Group")

for informational purposes only, without representation or warranty of

any kind, and SAP Group shall not be liable for errors or omissions

with respect to the materials. The only warranties for SAP Group

www.sap.com

Different Ways of How to Run an UI5 Application in SAP Web IDE

Documents

Transcript of Different Ways of How to Run an UI5 Application in SAP Web IDE