UPDATED: tested with SAP Web IDE 1.17.2 on Trial Landscape
Introduction
In this blog I'm going to show you the solution to one of the two exercises presented to the SAP Web IDE Design Council 2015.
At the end of this exercise, you will gain knowledge on how to create a new SAP Fiori application using SAP Web IDE. You will learn how to use some of the new features of the product like the code editor, the layout editor and how to run the application using mock data. The final step will be to create a valid run configuration to run the application with some specific parameters. As optional steps you will learn how to deploy your new application firstly to SAP HANA Cloud Platform and then how to do it on your SAP FIORI Launchpad.
This blog has been split in 3 parts:
| Link | Content |
|---|---|
| Part1 | Creating a new application with SAP Web IDE - Adding a new ObjectAttribute to the Detail view |
| Part2 | Running the application with mock data - Creating run configurations |
| Part3 | Deploying the app to HANA Cloud Platform - Deploying the app to SAP Fiori Launchpad (optional) |
Prerequisites
The few prerequisites for the execution of this exercise are the following:
An account on the HANA Trial Landscape
You need to register here. Once you have your account, you can run your instance of SAP Web IDE using the following link: https://webide-<your_account>.dispatcher.hanatrial.ondemand.com/ where <your_account> is the account you received after registering.
An account on the SAP public gateway system
You can read the following SCN page for getting more information: http://scn.sap.com/community/developer-center/front-end/blog/2014/06/22/how-to-configure-an-external...
A destination in the HANA Trial Landscape cockpit
You have to go on your HANA Trial Landscape cockpit and create a new destination as in this screen shot:
A subscription to the HANA Trial Landscape Fiori Launchpad (required only if you intend to follow the optional chapter as well)
It can be obtained by following this procedure:
1. Open the HANA Trial Landscape cockpit and click on Subscriptions. Check that the "flpportal" application is among your subscriptions. If not, you can add it by clicking on the button New Subscription
2. Click on Services and check that the SAP HANA Cloud Portal service is enabled. If not, please enable it. Once enabled, click on this tile
3. Click on Configure SAP HANA Cloud Portal
4. Click on Roles and check that your user is correctly assigned to the TENANT_ADMIN role. If not, please assign your user to it.
Table Of Contents
1.0 CREATING A NEW APPLICATION WITH SAP WEB IDE
1.1 ADDING A NEW OBJECTATTRIBUTE TO THE DETAIL VIEW
1.2 RUNNING THE APPLICATION WITH MOCK DATA
1.3 CREATING RUN CONFIGURATIONS
1.4 DEPLOYING THE APP TO HANA CLOUD PLATFORM
1.5 DEPLOYING THE APP TO SAP FIORI LAUNCHPAD (optional)
1.0 CREATING A NEW APPLICATION WITH SAP WEB IDE
Open SAP Web IDE from the Trial Landscape. You should use a link like this:
https://webide-<your_account>.dispatcher.hanatrial.ondemand.com
where “<your_account>” is the account you have been assigned to after the registration to the HANA Trial landscape.
1. Open SAP Web IDE
2. From the top menu click on File --> New --> Project from Template
3. Select the SAPUI5 Master-Detail Application template and click on Next. Leave the SAPUI5 version set to the recommended one. This is the new template for SAP Fiori applications. The other ones, though still available, should be considered deprecated. The layout of this new template is the one showed in the picture.
4. Enter a name for your project (i.e. "DCExercise") and click on Next
5. Select the Service Catalog source and the es4 destination from the drop down list. This is the destination that you should have already created previously according to the prerequisites
6. Enter the credentials to the system
7. Select the GWSAMPLE_BASIC service and click on Next
8. Fill the "Application Settings", "Databinding Object" and "Databinding - Line Item" sections with the following values and click on Next
Application Settings
| Parameter | Value |
|---|---|
| Title | Sales Orders |
| Namespace | com.so |
| Description | Sales Orders |
Databinding Object
| Parameter | Value |
|---|---|
| Object Collection | SalesOrderSet |
| Object CollectionID | SalesOrderID |
| Object Title | CustomerName |
| Object Numeric Attribute | GrossAmount |
| Object Unit of Measure | CurrencyCode |
Databinding - Line Item
| Parameter | Value |
|---|---|
| Line Item Collection | ToLineItems |
| Line Item CollectionID | ItemPosition |
| Line Item Title | ProductID |
| Line Item Numeric Attribute | GrossAmount |
| Line Item Unit of Measure | CurrencyCode |
9. Click on Finish
10. Test the application by selecting the test.html file in the project explorer and clicking on the Run button on the top toolbar. A new page will open: just click on the first link "test/testFLP.html"
11. The application starts successfully. You might need to enter your credentials for the OData service again.
1.1 ADDING A NEW OBJECTATTRIBUTE TO THE DETAIL VIEW
Let’s start now by customising a little bit our application by using the Code Editor and the Layout Editor features.
NOTE: pay attention that the layout of your workstation might not be the same of the one presented here in these screenshots. Of course this is NOT a problem for the completion of the exercise.
1. Expand the view folder of your project and double click on the Detail.view.xml file
2. The file will be opened in code editor mode on the right side of SAP Web IDE. Perform the following operations:
1 - Open a new line just before the closing of the ObjectHeader. It should fall on line 8
2 - Start typing "<att" and you will automatically get the tip to complete the remaining part of the tag with "attributes". Just hit <ENTER> and the editor will complete the word for you
3 - As soon as you type the symbol ">" the string "</attributes>" is automatically added. Just open a new line between these tags. This new line should be the 9th
4 - Start typing "<O" and hit <ENTER> to add the ObjectAttribute tag
5 - Start typing “t”. Now you can hit <CTRL> + <SPACEBAR> to get the list of the available attributes for this tag: another way is to simply click on the small down arrow on the right of the word you are typing. Select “text” and hit <ENTER>
6 - Complete the code by adding "CustID" as value of the "text" attribute and typing ">" to close the "ObjectAttribute" tag
3. Save the file
4. Right click on the Detail.view.xml file in the project explorer and select Open With --> Layout Editor
5. The Layout Editor is opened in a new tab on the right side of SAP Web IDE. Do the following list of steps:
1 - Firstly click twice on the blank space just above the "{CustomerName}" text. This will allow you to select the entire view and to change the Data Set property for it. You can only change the Data Set property when selecting the entire view.
2 - Click on the Data Set drop down list
3 - Change this property to SalesOrderSet
4 - In case you get this confirmation request click on OK. It's just asking you if you really want to change the data set for the entire view: however this is already the data set assigned to this vie, but the system is not able to recognise this.
6. Once defined the view's data set, you can replace the placeholder "CustID" defined at step 2.6 of this section with something bound to the underlying model. Select the CustomerID data field and click on OK. In this way we are binding that control with this data field
7. Change also the Title property for this control by typing the string "Customer ID" and hitting <ENTER>
8. Save the file and test the application again
9. You can see the new field added to the detail view.
Let's go to the second part of this blog.
- SAP Managed Tags:
21 Comments
