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

[Srikar]

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 .