In this Blog I will start off by creating a new Fiori Starter Application based on the Sales Order Tracking service provided by the SAP Gateway system.

We will then enhance the detail view by using the Layout Editor.

In part 2 I will show you how you can run the app with mock data and how you can deploy the application to SAP HANA Cloud.

For more details how you can set up your SAP Web IDE environment on HANA Cloud Connector look here. There you can find also informations about the prerequisites.


+++ Here you can find an example of the new Layout Editor features. +++


+++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.

/wp-content/uploads/2015/02/10_819727.png

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

01.PNG

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

/wp-content/uploads/2015/02/04_648509.png

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.

/wp-content/uploads/2015/02/06_648511.png

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

/wp-content/uploads/2015/02/08_648515.png

Select the relevant OData Service, SRA018_SO_TRACKING_SRVE [Ext]

Expand the OData Service and show defined data collections for this OData Service.

Click Next

/wp-content/uploads/2015/02/10_819727.png

At wizard step #4 (Template Customization), enter the mapping data for the Application SettingsSection

Title Sales Orders
Namespace com.test.so

Then for the Databinding-Object Section

Object Collection SalesOrders
Object CollectionID SalesOrderNumber
Object Title CustomerName
Object Numeric Attribute TotalAmount
Object Unit of Measure Currency

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
Line Item CollectionID ItemNumber
Line Item Title Amount
Line Item Numeric Attribute PricePerUnit
Line Item Unit of Measure Currency

12.PNG

Press Next

Click Finish. This will generate all the files in your workspace.

/wp-content/uploads/2015/02/15_648527.png

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.

03.PNG

On the new tab you will see a new Overview Page instead of the application preview. Click on the first URL test/testFLP.html

The Application Preview is started, the application is loading and data is fetched from the OData Service

04.PNG

05.PNG

Enhance the application using the Layout Editor

Close the preview.

In the project, open the folder view if not already expanded.

02.PNG

Select the file Detail.view.xml and right-click. Select Open with > Layout Editor and WYSIWYG mode of the view is displayed.

/wp-content/uploads/2015/02/03_819747.png

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.

04.PNG

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)

08.PNG

At the properties change the Data Set to SalesOrders.

09.PNG

10.PNG

Now expand the Display control section

11.PNG

Select the Object Attribute and drag it to the UI at the postion above the information icon.

12.PNG

Look for the property Text and click on the chain button to change it.

14 - Copy.PNG

Scroll down the Data Fields and select SalesOrdersNumber. Click OK.

13.PNG

14.PNG

Click on icon Save or File > Save

15.PNG

Run the application and show the resulting app: Select the file test.html of the application and click on the icon Run

16.PNG

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.

17.PNG

In the next 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.

More Web IDE stuff published by Technology RIG 🙂

See you

Claudi

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Yuan Yuefeng

    Nice post!

    but I have a question, I didnot find the ODATA SRA018_SO_TRACKING_SRVE [Ext]

    I just find SRA018_SO_TRACKING_SRV in my system do you copy  SRA018_SO_TRACKING_SRVE [Ext] from SRA018_SO_TRACKING_SRV or I was missing some configuration? thanks

    (0) 
    1. Yuan Yuefeng

      Sorry, I can use SRA018_SO_TRACKING_SRV to create the sales order tracking APP as well

      Nevermind what I asked before

      thanks for your posting again

      (0) 
  2. Monica Hu

    Hi Claudia,

    I am trying to run the application after connecting to my local OData source.  However, no data is returned and on the details section the message was displayed: “The requested resource was not found.”  I created another test application pointing to another local OData service and data is returned correctly.  Any suggestions?

    SaleOrderTrackingError.jpg

    Thanks in advance,

    Monica

    (0) 

Leave a Reply