HCP Web form with HANA XSJS backend
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
Todd,
thanks for sharing this example of how to use the web work bench to maintain some records with the HANA DB on HCP. For your new UI development, try to use the Web IDE.
I think it is a good and simple example you shared here. I think it would be helpful to specify what version of HANA / HCP you are using. What version of sapui5? Also, I would recommend to start looking into XML views as that has been the direction (instead of JS views) both will work fine, but for the direction going fwd would be to use XML views.
As far as your XSJS code goes, yes it seems like it would work... I would suggest you look into moving your SQL code into a stored proc... it will help with preventing SQL injection, and other possible risks, etc... It is good that you used $.hdb instead of the old $.db API...
thanks again for sharing.. hope this was a good learning opportunity! good luck on your ongoing dev!
Hi Sergio,
Thank you for your feedback. I have created follow-up post Web form with HANA sqlscript stored procedure to illustrate stored procedure.
Thank you
well done!
Hi
Thanks for a good article, but I get an error : http://linux-ucyy:8090/Affecto/form.xsjs 500 (Internal Server Error). Any idea what the cause can be. Im running Hana express 2.0.
It may be some problem with my 2.0 version and the script..
Any solution to this ?