Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
In continuation of previous example (see Website with HANA XSJS backend), this development
example illustrates simplicity of sap.m and $.hdb functionality for web applications (see sap.m demo kit reference and $.hdb documentation).

With this steadily improving and powerful framework provided by SAP, HANA cloud platform is ideal for any web application. Leverage below code/walkthrough, in addition to exemplary aforementioned documentation from SAP, to create your own website including analytics, scripts for forms, applications, etc. all using HANA backend.

From SAP HANA Web-based Development Workbench, navigate to Catalog to Create HCP table CONTACTS under your schema with "contacts table creation.sql"
create column table <SCHEMA>.contacts (
System nvarchar(3) not null,
Client nvarchar(3) not null,
guid nvarchar(9) not null,
full_name nvarchar(80) not null,
organization nvarchar(80) not null,
email nvarchar(80) not null,
phone nvarchar(80) not null,
notes nvarchar(1024) not null,
PRIMARY KEY
(
System,
Client,
guid
)
);

From SAP HANA Web-based Development Workbench, navigate to Editor to Create contact.html, form.xsjs, style.css under HCP HANA project (right-click
Content/project folder and source files attached respectively)

var Name = $.request.parameters.get("NAME");
var NameObj = JSON.parse(Name);
var Org = $.request.parameters.get("ORG");
var OrgObj = JSON.parse(Org);
var Email = $.request.parameters.get("EMAIL");
var EmailObj = JSON.parse(Email);
var Phone = $.request.parameters.get("PHONE");
var PhoneObj = JSON.parse(Phone);
var Notes = $.request.parameters.get("NOTES");
var NotesObj = JSON.parse(Notes);
var conn = $.hdb.getConnection();
var sysuuid = conn.executeQuery( 'SELECT SYSUUID FROM DUMMY;' );
var guid = JSON.stringify(sysuuid);
var replace2 = "{\"0\":{\"SYSUUID\":["; //JSON.parse to guidObj.0.SYSUUID or metadata.SYSUUID not working
var replace3 = "]}}";
var replace4 = /,/gi;
guid = guid.replace(replace2, '');
guid = guid.replace(replace3, '');
guid = guid.replace(replace4, '');
var trun = 32;
var guid32 = guid.substring(0,trun);
var results = conn.executeUpdate('insert into ACTUALS.CONTACTS values (\'HDB\',\'100\',?,?,?,?,?,?) ', guid32 , NameObj , OrgObj, EmailObj, PhoneObj, NotesObj );
conn.commit();
$.response.setBody(JSON.stringify(results));






















 


.formspacing {
padding: 60px;
}

head, section
{
width: 100%
}
img
{
border: 0px;
margin: 0px;
padding-top: 0px;
width: 200px;
height: auto;
position: absolute;
}
.zlabel {
padding-right: 5px;
padding-bottom: 15px;
height: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: white;
border-bottom: 10px solid blue;
height: 64px;
}
li {
display: inline-block;
}
li a {
color: black;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 10px 14px;
vertical-align: -100%;
line-height: 20px;
padding-right: 20px;
text-decoration: none;
}

li a:hover {
color: white;
background: blue;
transition: all 2s ease-in-out;
border: 2px solid blue;
}
container
{
float: right;
padding-right: 7%;
}


<!DOCTYPE HTML> 
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" />
<title>Contact company</title>
<script id="sap-ui-bootstrap" type="text/javascript"
src="/sap/ui5/1/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3,sap.ui.demokit,sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
</head>
<body>
<div>
<p><img src="images/logo.jpg"> </p>
<ul><container>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</container></ul>
</div>
<div class="formspacing" id=root style="width: 310px;"><script type="text/javascript">
var oTitle = new sap.m.Title({ text : "Contact company" , titleStyle : "H2" , width : "310px" }).placeAt("root");
var oInput_Name_Lbl = new sap.ui.commons.Label({text:"Name *" , width:"85px", textAlign:"Right"});
oInput_Name_Lbl.setDesign(sap.ui.commons.LabelDesign.Bold);
oInput_Name_Lbl.addStyleClass('zlabel');
var oInput_Name = new sap.ui.commons.TextField({ id : "Name", tooltip : 'Name (required)',width:"185px"});
var oInput_Org_Lbl = new sap.ui.commons.Label({text:"Organization", width:"85px", textAlign:"Right"});
oInput_Org_Lbl.setDesign(sap.ui.commons.LabelDesign.Bold);
oInput_Org_Lbl.addStyleClass('zlabel');
var oInput_Org = new sap.ui.commons.TextField({ id : "Org", tooltip : 'Organization',width:"185px" });
var oInput_Email_Lbl = new sap.ui.commons.Label({text:"Email", width:"85px", textAlign:"Right"});
oInput_Email_Lbl.setDesign(sap.ui.commons.LabelDesign.Bold);
oInput_Email_Lbl.addStyleClass('zlabel');
var oInput_Email = new sap.ui.commons.TextField({ id : "Email", tooltip : 'Email' ,width:"185px"});
var oInput_Phone_Lbl = new sap.ui.commons.Label({text:"Phone*", width:"85px", textAlign:"Right"});
oInput_Phone_Lbl.setDesign(sap.ui.commons.LabelDesign.Bold);
oInput_Phone_Lbl.addStyleClass('zlabel');
var oInput_Phone = new sap.ui.commons.TextField({ id : "Phone", tooltip : 'Phone (required)',width:"185px" });
var oInput_Notes_Lbl =new sap.ui.commons.Label({text:"Notes", width:"85px", textAlign:"Right"});
oInput_Notes_Lbl.setDesign(sap.ui.commons.LabelDesign.Bold);
oInput_Notes_Lbl.addStyleClass('zlabel');
var oInput_Notes = new sap.ui.commons.TextArea({ id : "Notes", tooltip : 'Notes',width:"185px" });
oInput_Notes.addStyleClass('zlabel');
var oInput2 = new sap.ui.commons.TextArea({ id : 'input3', tooltip : 'Status', cols : 40, rows : 1, editable: false, });
var oButton = new sap.m.Button({ text : "Submit Inquiry", type : "Emphasized", tooltip : "Click to submit details of inquiry via HANA cloud platform" ,
icon: "sap-icon://notes",
press : function() {
var name = oInput_Name.getLiveValue();
if (name.length == 0) {
alert("Please enter required Name field and resubmit inquiry");
}
var org = oInput_Org.getLiveValue();
var email = oInput_Email.getLiveValue();
var phone = oInput_Phone.getLiveValue();
if (phone.length == 0) {
alert("Please enter required Phone field and resubmit inquiry");
}
var notes = oInput_Notes.getLiveValue();
var NAMEString = JSON.stringify(name);
var ORGString = JSON.stringify(org);
var EMAILString = JSON.stringify(email);
var PHONEString = JSON.stringify(phone);
var NOTESString = JSON.stringify(notes);
$.ajax({
method: "POST",
url: "form.xsjs",
data: { NAME : NAMEString ,
ORG : ORGString ,
EMAIL : EMAILString ,
PHONE : PHONEString ,
NOTES : NOTESString

},
} ).done(function( data ){
oInput2.setValue(data);
if (data == 1) {
alert("Thank you for your inquiry, we will get back to you as soon as possible.");
} else {
alert("Please try again later");
};

});
}
});
oInput_Name_Lbl.placeAt("root");
oInput_Name.placeAt("root");
oInput_Org_Lbl.placeAt("root");
oInput_Org.placeAt("root");
oInput_Email_Lbl.placeAt("root");
oInput_Email.placeAt("root");
oInput_Phone_Lbl.placeAt("root");
oInput_Phone.placeAt("root");
oInput_Notes_Lbl.placeAt("root");
oInput_Notes.placeAt("root");
oButton.placeAt("root");
</script></div>
</body>
</html>



 

Add logo under images package


From internet browser test connectivity and results


Submit Inquiry button calls POST ajax method to enter contact details into CONTACTS table with success message



Validation of required Name and phone


 

Failure of record insertion also be displayed to user



From SAP HANA Web-based Development Workbench, navigate to Catalog in order to Confirm record(s) shown in HANA DB


Hope you enjoy discovering these offerings by SAP are both robust and easy to use. Happy coding
5 Comments
Labels in this area