HCP Web form with HANA XSJS backend

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!

2,031

SAP Managed Tags:
development tools for SAP BTP, Neo environment,
SAP Business Technology Platform

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>