Skip to Content
Author's profile photo Srikar Nagadevara

Add more than one OData Service in your SAPUI5 Application Using SAP WebIDE

Today we will discuss,

How do we create more than one OData Service in Your SAP UI5 Application ?

As we all know how to Register in SAP Web IDE Trail Version ,

Following blog consists 3 Sections , please do follow them  to achieve the target.

Section 1 : 

Step 1 :  Click on Home icon and Click on New Project from Template section 

 

Step 2 : Click on SAP Fiori Master-Detail Application and Click on Next button

   

Step 3 : Give the Project name and Click on Next 

Step 4 :

            a )  Select the Dropdown and click on the destination needed .

                   Once you select the destination all the services will be display under that                              System

           

             b) Select the ODATA Service which got  activated already at the back-end system

         

        You can also check the service running status by clicking on Show Details and                      click on Next

 

Step 5:  Now bind the attributes to the Template Customization page

 

          Provide Title , Namespace , Description and bind the attributes by Clicking                             DropDown

  Master Page :

   Detail Page :

     Click on Finish . This will  create a Project in your Workspace .

     

Step 5 : Now Click on the Project you have  created and Click on Run Icon

 

   

    You will be re-directed to the an URL , where you can find the SAP UI5 Master application

  On Click on Buyer Name (Master Page ) in you can get Item Details on  Detail Page 

 

 

Now Click on other Buyer Name :

 

 This is how we can create an SAP UI5 Application for Sales Order on SAP Web IDE .

Section 2 : 

Include Other OData Service :

Requirement:

Here , I want display the Item Details on the Right Hand side Page using a different OData Service , So i want to bind the Items Details Table to the New OData Service .

To Include more than one OData Service in your application follow the below steps :

Step 1 : Go To your Application and open mainfest.json

Here you can find the All the OData Services , Routes , Targets , Models which are included.

So here , we have used only one OData Service which you can see in below image.

Step 2 :  Open manifest.json in Descriptor Editor at the bottom left corner as shown :

Step 3 :    Go To Data Sources and you can find the used OData Services which is the                                     mainService used .

Step 4 :  Click on Add button near the main Service and provide the Service :

Now , a dialog box opens and Provide New OData Service details ( As discussed when creating the first OData Service  Step 4  in Section 1 ) .

As Shown in below image,

Provide the Required System and Required OData Service and click on Next

Step 5 : Click On Finish:

If you want Overwrite the main OData Service tick the check box as shown

 Now you can find the newly added OData Service below :

Now we are done with adding new OData Service to the Application .

Step 6 : Click on Models and add new Model Source for the newly added OData Service :

Step 7 : Provide new Model name , select Data Source (the newly added OData Service )

              and  Click on OK.

Step 8 : You can find newly added Data Source Model below :

Now we are done with the creating a data Source Model for the newly added OData Service .

For Your Confirmation , Open manifest.json in Code Editor :

Under Data Sources you can find the OData Services ,

Under Data Models , you can find the OData Models :

So Now we are done with adding OData Services and Data Soure Models . You are left with binding the data to the UI Table .

From the requirement , I want display the Item Details on the Right Hand side Page using a different OData Service , So i want to bind the Items Details Table to the New OData Service .

Section 3 : 

Step 1 :                Open the view page Detail.view.xml

                             Go To <Table> and bind to Data Set items=”{path:’NewModel>/SalesSet’}”

NewModel   –       Refers to the new model name which is created in Step 6 Section 2  .

SalesSet      –       Refers to the data to be displayed in Table from the OData Service created in

                             Step 4 Section 2 .

Step 2 :               To Bind Cells in Table 

                            Give Text = “{NewModel>SoId}”

 NewModel   –     Refers to new Model Name .

 SoId             –     Refers to Property in the SalesSet .

 

 We are done…

 Save and Run your Application. 

 Finally , you can see Two OData Services Model Source Data used  in  one

 SAP UI5  Application .

Assigned tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo A. Mondal
      A. Mondal

      Very good detailed explanation. It's very helpful

       

      Author's profile photo Former Member
      Former Member

      Thank you, this is very useful 🙂

      Author's profile photo Former Member
      Former Member

      Thank You 🙂
      well explained.

      Author's profile photo Former Member
      Former Member

      <a href="http://march2018calendar.info/">March 2018 Calendar</a>

      <a href="http://march2018calendar.info/">2018 March calendar</a>

      <a href="http://march2018calendar.info/">March month</a>

      <a href="http://march2018calendar.info/">calendar March 2018</a>

       

      Author's profile photo Former Member
      Former Member

      March 2018 Calendar 2018 March calendar March month calendar March 2018 March 2018 printable calendar

       

      Author's profile photo Chetan Poojary
      Chetan Poojary

      Saved my day 🙂 A nice one , Thanks for the valuable work and sharing.

      Author's profile photo David Hock
      David Hock

      I look forward to this working. I search the web for days trying to solve this problem. It seems impossible if you try to use the UI5 template so I guess the idea is to use a fiori template, throw most of it away and put your own view(s) in here?

      Shame you see so many people struggling for years on this. Seems there is a documentation or a usability gap?

      Author's profile photo Andreas Gall
      Andreas Gall

      Very helpful for my current task. Thanks for including an unsage example as well.

      Regards.

      Author's profile photo raghavendra nookala
      raghavendra nookala

      Hi,

       

      Thanks for your blog, I followed your blog,I need to bind second model to smart table instead of table,it is not binding for the smart table, Please help me by answering this question

       

      Thanks in Advance

      Author's profile photo Burhanuddin Dabriwala
      Burhanuddin Dabriwala

      Explanation is easy and good