Skip to Content
Author's profile photo Prabhat Raman

HANA Cloud Portal widget using WebIDE consuming C4C OData service


SAP Cloud for Customer has out of the box OData services in the area of Sales and Services. It provides “c4codata” service definition having standard entities like Account, Opportunities, Leads, Service Request, and Employee etc. In this document we will build a portal widget using SAP Web IDE on HANA Cloud Platform consuming standard OData service “c4codata.svc” of SAP Cloud for Customer. In this application we will read the Opportunity data from SAP Cloud for Customer using basic authentication.

In case your application requires logged in user identity propagation and support of Single-Sign-On (SSO) then you need to setup “OAuth2SAMLBearerAssertion” destination. You can following link for setting up such a destination

You can check the C4C OData documentation here.

Note – If the attached pictures are not clear then click on them to open it in a separate dialog box.


  1. HCP account – you should have access to HCP trial or production account
  2. SAP Cloud for Customer OData service – you should have access to https://<your c4c tenant>/sap/byd/odata/v1/c4codata/$metadata

So let’s get started.

Create the destination

The destination is used by the WebIDE application to make the outbound call to SAP Cloud for Customer OData service. It contains the connection details for the remote communication.

  • Login into HCP trial or production account.

Note – In this example I am using HCP trial account.

  • Switch to account level on your cockpit and click on the Destinations tab


  • Click on New Destination & provide details for the destination
    1. a. Name: c4codata
    2. b. Type: HTTP
    3. c. Description: C4C Odata Account
    4. d. URL: https://<your C4C tenant>
    5. e. Proxy Type: Internet
    6. f. Cloud Connector Version: 2
    7. g. Authentication: BasicAuthentication
    8. h. User: <user_name>
    9. i. Password: <pass_word>
    10. j. Also add additional properties along with value as shown in the picture below
    11. k. At the end click on Save


  • As a result you should see now your new destination listed “c4codata”


Create the HTML5 Application using WebIDE

Now let’s create the HTML5 application.

  • Go to the Subscription Tab as shown below and click on “webide” link on the right side page


  • It opens up the WebIDE overview page with a link to launch WebIDE in “Application URL”. Click on it to open the WebIDE.


  • Create a new project using the File menu. Choose File->New->Project from Template


  • It opens the guided wizard with first steps to select a template. For this example we select the “SAP Fiori Master Detail Application” and press Next


  • In the second step give the project name. In this example we use the name as “c4copportunitylist” and press Next


  • In third step perform following
    1. Select “Service URL” in the Sources list
    2. In the service information section, in “Select a system” drop down choose the destination which we created earler “c4codata”. Pl note unless you define additional properties as mentioned above in the destination your destination will not appear in the drop down.
    3. In the URL text field past the following URL – “/sap/byd/odata/v1/c4codata” and press the arrow button next to it. It should populate the metadata of the odata service in the “Details” section.
    4. Press Next


  • In fourth step provide the details for Master Section, Detail Section and Navigation Section. The Master details appear in the left side as a list. Details section and Navigation section comes in the right side as shown in the picture shown below. In this example we are mapping the attributes for Master and Details Section. You will find the detail of the mappings in the next pictures. Do such mapping and proceed to next step




  • In the fifth step confirm your changes by pressing the Finish button. Now a new project “c4copportunitylist”should appear under local folder in WebIDE.


  • Expand the project and select the “index.html” and click on “Run” button. A new browser tab should open and your application should run with similar data


  • So let’s now make the above application as portal widget so that it can be consumed in Cloud Portal. To do so we need to create an XML file that contains widget specification. To generate specification XML file go to WebIDE menu Tools->Preference->Optional Plugin  and enable SAP “HANA Cloud Portal plugin” and save.


  • After saving the preference, don’t forget to refresh the screen else you would not find the menu option to generate the specification xml file. Now go back to development by clicking Tools->Development
  • Right click on the project and click New->Spec XML for Cloud Portal Widget. It open up a wizard for Open Social features


  • Select “Compliance with the OpenSocial 0.9 spec” and press Next and Finish


  • Now a new spec.xml should get added to you project


  • Now deploy the application to HCP using deploy menu option


  • Provide credential to log into HCP account and confirm the deployment by pressing Deploy button. Close the successful deployment message and open the HCP cockpit->HTML5 Applications. You should find your “c4copportunitylist” application listed in the table


  • Click on the application name and it should open the application overview page. Click on the application URL to open the application in new browser tab to check if the application is running or not. Start it if it is not running. Note down the application URL like for this application


  • Now open the SAP HANA Cloud Portal by going to HCP cockpit->Services->SAP HANA Cloud Portal->Go to Service


  • Go to Content tab. And click on “+ Add Widget”. Keep the type of widget as URL, provide suitable name and description and provide the URL of the application which we noted above. Press save.


  • Now the widget should appear in the Content Catalog. You can use it in the Portal site as shown below.


Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Chandan Bankar
      Chandan Bankar

      Hello Prabhat,

      Thanks for the complete end to end explanation on this. Love it 🙂