Professional Documents
Culture Documents
+++ Here you can find an example of the new Layout Editor features. +++
Creating a new project
Enhance the application using the Layout Editor
+++New new Version: SAP HANA Web IDE 1.17 +++ (for more Informations
about the new Features look here )
Creating a new project
The first step is about creating a new project. In this part we will simply create a project on the local
workspace.
Start from creating a new project File > New > Project from Template
We will now select the application template that will at the end generate the code for our starter Fiori
application. The Starter Fiori Application template will generate a master/detail list application accessing
an OData Service. In this guide we will access a SAP Gateway system for the OData Service of sales
orders.
At wizard step #1 (Template Selection), select the SAP Fiori Application template catalog. You
could also select All Categories, and you would get all available templates displayed on the
screen.
Select the tile SAPUI5 Master-Detail Application if it is not already selected automatically. You
can see if the template is selected by the upper right corner. Then click on Next
The wizard to create a new project displays the first step on Basic Information. At wizard step #2
(Basic Information), define the Project Name: MySalesOrderTracking and click on Next button
At wizard step #3 (Data Connection), click on Service Catalog to get all the available OData Services
on the SAP Gateway system.
Open the drop down list and select the Gateway system.
Ask your system admin for your specific credentials. The list of OData Services is being fetched.
NOTE: Please be aware that the server used in this blog is just an example, thus you may
not have granted access to it.
Scroll down the list to see all the OData Services available on the Gateway system selected.
Search for “tracking” to show search and filter capabilities
At wizard step #4 (Template Customization), enter the mapping data for the Application
SettingsSection
Title Sales Orders
Namespace com.test.so
Scroll down to the end to see the fields for the Databinding – Line Item.
Enter the mapping data for the Line Item Section
Line Item Collection OrderItems
Open the new project folder, in the webapp folder select the file test.html of the application and
click on the icon Run. Ask your system admin for your specific credentials.
On the new tab you will see a new Overview Page instead of the application preview. Click on the first
URLtest/testFLP.html
The Application Preview is started, the application is loading and data is fetched from the OData Service
Enhance the application using the Layout Editor
Close the preview.
In the project, open the folder view if not already expanded.
Select the file Detail.view.xml and right-click. Select Open with > Layout Editor and
WYSIWYG mode of the view is displayed.
Notice that when clicking on the different controls in the view the properties of the control are
shown.
On the left side, expand some down-arrows to see the different controls that are available.
But at first we have to add the Data Set to the View.
Open the Outline on the right and choose the first line (Detail.view.xml)
Look for the property Text and click on the chain button to change it.
Scroll down the Data Fields and select SalesOrdersNumber. Click OK.
Click on icon Save or File > Save
Run the application and show the resulting app: Select the file test.html of the application and
click on the iconRun
The Application Preview is started, the application is loading and data is fetched from the OData
Service. Check that the SalesOrderNumber is displayed in
the detail view as designed.
In the last post I’ve shown you how you can create a new Fiori Starter Application based on the Sales
Order Tracking service provided by the SAP Gateway system. And how you can enhance the detail
view by using the Layout Editor.
In this part I will show you how you can run the app with mock data and how you
can deploy the application to SAP HANA Cloud.
Run the application with mock data
Deploy the application to the cloud
Check that data has been generated (sometimes it needs a little bit time!)
To have more meaningful data we can create a JSON file with predefined data. Go back to your
project view andexpand the folder model.
Select the file metadata.xml the was generated while defining the OData Service connection
previously. Righ-click the file and select Edit Mock Data
The popup window Edit Mock Data is displayed. Select the entity set SalesOrders as this is the
data we are displaying in our app.
You could enter your data row by row. To simplify this task we will let SAP Web IDE generate
random data for us. Click on Generate Random Data
You can overwrite some data fields. Just click in the text field and write your data. In our
example, we have replaced the SALESORDERNUMBER in the first two by 12345 and 56789
respectively.
When you are finished replacing the data, press OK.
Check that the file SalesOrder.json has been generated in the model folder and check the file
content.
Now we need to tell the system that it should use the JSON file when running the app with mock
data. The configuration is done in the project settings.
Right-click the project main folder and select Project Settings
Select Mock Data. In the Mock Data Source section select JSON files. Then click Save
Acknowledge the information that the project settings have been saved by pressing OK
You may close the project settings pane by pressing Close. You may also close the
SalesOrder.json file
Select the index.html file and run the application again (Run > Run with Mock Data)
Look if the Version field has an value and the Activate is checked. Then press Deploy.
Upon success, press Close
Logon to your SAP HANA Cloud Platform Cockpit account and select the content HTML5
Applications.
Check that your new application is listed. Click on your application name.