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 .