1

HTML5 app with SAP Web IDE on HCP using C4C OData (Basic authentication)

Applies to: Cloud For Customer 1502 Release and Onwards

Summary

SAP Cloud for Customer supports OData services from 1502 release. It provides “c4codata” service out of the box having standard entities like Account, Opportunities, Leads, Service Request, and Employee etc. In this document we will build HTML5 application using SAP Web IDE on HANA Cloud Platform using standard service “c4codata.svc” by SAP Cloud for Customer. In this application we will read the Account data from SAP Cloud for Customer using basic authentication.

Author: Prabhat Raman

Company: SAP Labs, Palo Alto

Created on: 30th March 2015

2

Table of Contents

Prerequisites ....................................................................................................................................................... 3

Create the destination ......................................................................................................................................... 3

Create the HTML5 Application............................................................................................................................ 4

Build the application ............................................................................................................................................ 6

Provide the source code ..................................................................................................................................... 8

Test the application and deploy to SAP HANA Cloud Platform........................................................................ 11

Copyright........................................................................................................................................................... 13

3

Prerequisites 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 HCP application to make the outbound call to SAP Cloud for Customer OData service. It contains the connection details for the remote communication.

1. Login into HCP trial or production account.

Note - In the document I will be using HCP trial account.

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

3. Click on New Destination & provide details for the destination

a. Name: c4codataaccount

b. Type: HTTP

c. Description: C4C Odata Account

d. URL: https://<your C4C tenant>

e. Proxy Type: Internet

f. Cloud Connector Version: 2

g. Authentication: BasicAuthentication

h. User: <user_name>

i. Password: <pass_word>

j. At the end click on Save

4

4. As a result you should see now your new destination listed

Create the HTML5 Application Now let’s create the HTML5 application starting from HCP cockpit.

1. Switch to the tab HTML5 Applications from your account level cockpit

2. Click on new application. Provide any application name of your choice. This application is name

“c4caccountlist”

5

3. The application should now appear in list of HTML5 application. Now click on the pencil icon in the row

of newly created application.

4. The Web IDE starts and informs you now that it’ll clone the empty Git repository into the Web IDE. Just

confirm by clicking on the OK button.

5. Finally you need to provide your credentials and press OK.

6

6. The project is created now. You can see in the Web IDE project list.

Build the application

1. Now let’s build the application via a template. Click on the project c4caccountlist, right-click on it and

select New > Project from Template

7

2. Select the template SAPUI5 Application Project and click on Next

3. Confirm the project name c4caccountlist by clicking on Next

4. In this last step provide the following information and click on Next

a. View Type : JavaScript

b. View Name : account (you can choose any name of your choice)

5. Finish the template adoption by clicking on the Finish

8

Provide the source code 1. Double click on the folder icon of the application. Open “neo-app.json” file.

2. Provide the destination details which we created in the earlier step by pasting following code in the

end.

Note – don’t forget to add comma at the start of the code.

,

{

"path": "/c4codataaccount",

"target": {

"type": "destination",

"name": "c4codataaccount"

},

"description": "C4C OData Account"

}

9

3. Open “account.view.js” file and paste the following code in the “createContent :

function(oController)” function. Click in the Save button. In this code a table is created and it is

bound to the controller.

var oTable = new sap.m.Table("myTab");

var oDescriptionCol = new sap.m.Column({header: new sap.m.Text({text:"ABC Classification"}) });

var oCustomerCol = new sap.m.Column({header: new sap.m.Text({text:"Customer"}) });

var oStatusCol = new sap.m.Column({header: new sap.m.Text({text:"Created By"}) });

var oDueDateCol = new sap.m.Column({header: new sap.m.Text({text:"Status"}) });

var oAssignedCol = new sap.m.Column({header: new sap.m.Text({text:"Created On"}) });

oTable.addColumn(oDescriptionCol).addColumn(oCustomerCol).addColumn(oStatusCol).addColum

n(oDueDateCol).addColumn(oAssignedCol);

var oDescription = new sap.m.Text({text: "{ABCClassificationCodeText}"});

var oCustomerName = new sap.m.Text({text: "{AccountFormattedName}"});

var oStatus = new sap.m.Text({text: "{CreatedBy}"});

var oCompletionDue = new sap.m.Text({text: "{StatusCodeText}"});

var oAssignedTo = new sap.m.Text({text: "{CreatedOn}"});

var oRow = new sap.m.ColumnListItem();

oRow.addCell(oDescription).addCell(oCustomerName).addCell(oStatus).addCell(oCompletionDue).

addCell(oAssignedTo);

oTable.bindItems("/AccountCollection",

oRow ,

10

null, null);

return new sap.m.Page({

title: "Account List",

content: [

new sap.m.VBox({

width : "100%",

items : [

oTable

]

})

]

});

4. Open “account.controller.js” file and paste the following code. Click in the Save button. In this code

destination is used to create service URL.

oDataServiceURL: "c4codataaccount/sap/byd/odata/v1/c4codata",

onInit: function() {

this.oDataModel = new sap.ui.model.odata.ODataModel( this.oDataServiceURL );

this.getView().setModel(this.oDataModel);

}

11

Test the application and deploy to SAP HANA Cloud Platform

1. Select the file index.html and press the Run button

2. The application should be launched in a new window

3. Switch back to the Web IDE window, right-click on the “c4caccountlist” folder and select the

commands Deploy > Deploy to SAP HANA Cloud Platform

4. Click on the Activate and the Create version field and provide the version number. Finish by clicking

on Deploy

12

5. Congratulations. Your app is now on SAP HANA Cloud Platform!

Copyright

© 2015 SAP SE SE or an SAP SE affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE. The information contained herein may be changed without prior notice.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary.

These materials are provided by SAP SE and its affiliated companies (“SAP SE Group”) for informational purposes only, without representation or warranty of any kind, and SAP SE Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

SAP SE and other SAP SE products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE in Germany and other countries.

Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.