CAL Web form with XSODATA

Since SAP Cloud Platform inception earlier this year I have hosted HDB trial DB with Azure. I have been extremely pleased with CAL, SAP Cloud Appliance Library. I have especially enjoyed the ablity to upload previous hanatrial source files where no remediation required to run on CAL. Also it is fantastic experience to observe the catalog and editor get steady functionality improvements throughout. However the purpose of this post is to provide working example of XSODATA and SAPUI5 dropdown functionality alongside previous examples from hanatrial (see previous blogs on embedding contact form in web application using $.hdb direct sql statement and follow up blog using HANA sqlscript stored procedure.

CAL, SAP Cloud Appliance Library, Web form using SAP HANA, developer edition 1.0 SPS 12
1) follow these steps to set up CAL instance
2) find something that works for you in regards to suspending/activating instance, billing, etc. Leverage link helper below

<INSERT_YOUR_CAL_INSTANCE_URL_HERE>,,
http://<PREVIOUS_URL>/sap/hana/xs/lm/?page=HomeTab,http://<INSERT_YOUR_CAL_INSTANCE_URL_HERE>/sap/hana/xs/lm/?page=HomeTab,
http://<PREVIOUS_URL>/sap/hana/ide/trace/,http://<INSERT_YOUR_CAL_INSTANCE_URL_HERE>/sap/hana/ide/trace/,
http://<PREVIOUS_URL>/sap/hana/ide/catalog/,http://<INSERT_YOUR_CAL_INSTANCE_URL_HERE>/sap/hana/ide/catalog/,
http://<PREVIOUS_URL>/sap/hana/ide/editor/,http://<INSERT_YOUR_CAL_INSTANCE_URL_HERE>/sap/hana/ide/editor/,
http://<PREVIOUS_URL>/sap/hana/ide/,http://<INSERT_YOUR_CAL_INSTANCE_URL_HERE>/sap/hana/ide/,
http://<PREVIOUS_URL>/sap/hana/xs/admin/,http://<INSERT_YOUR_CAL_INSTANCE_URL_HERE>/sap/hana/xs/admin/,
http://<PREVIOUS_URL>/<INSERT_YOUR_FOLDER_HERE>/contact.html,http://<INSERT_YOUR_CAL_INSTANCE_URL_HERE>/<INSERT_YOUR_FOLDER_HERE>/contact.html,
http://<PREVIOUS_URL>:8000/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html?siteId=sap%7Chana%7Cadmin%7Ccockpit%7Capp%7Ccockpit,http://<INSERT_YOUR_CAL_INSTANCE_URL_HERE>:8000/sap/hana/uis/clients/ushell-app/shells/fiori/FioriLaunchpad.html?siteId=sap%7Chana%7Cadmin%7Ccockpit%7Capp%7Ccockpit,
http://<PREVIOUS_URL>/sap/hana/ide/editor/plugin/testtools/odataexplorer/index.html?appName=/<INSERT_YOUR_FOLDER_HERE>/zdata.xsodata,http://<INSERT_YOUR_CAL_INSTANCE_URL_HERE>/sap/hana/ide/editor/plugin/testtools/odataexplorer/index.html?appName=/<INSERT_YOUR_FOLDER_HERE>/zdata.xsodata,

3) right click->create application, upload image, add source code (see previous blog)
4) create schema, table, procedures (see previous blog) and new table below for drop-down values

create column table "ACTUALS"."STATES" (
System 		nvarchar(3)  not null,
Client 		nvarchar(3)  not null,
state    	nvarchar(3)  not null,
PRIMARY KEY
(
System,
Client,
state
)
);

5) create xsodata service right click->create file as “zdata.xsodata”

service { 
"ACTUALS"."STATES" as "ZDATA" with ("CLIENT","SYSTEM","STATE");
}

6) view table data from odata explorer

and catalog

7) add dropdown box in source code

var oModel_XS = new sap.ui.model.json.JSONModel('http://<INSERT_YOUR_CAL_INSTANCE_HERE>/act/zdata.xsodata/ZDATA?$format=json');
sap.ui.getCore().setModel(oModel_XS,"XSODATA");
var oDrop_Lbl =new sap.ui.commons.Label({text:"State", width:"85px", textAlign:"Right"});
oDrop_Lbl.setDesign(sap.ui.commons.LabelDesign.Bold);
oDrop_Lbl.addStyleClass('zlabel');
var oDrop_field = new sap.ui.commons.DropdownBox({ id: 'dropdownBoxid',
          width:"185px",
           items : {
    path : "XSODATA>/d/results",
                  template : new  sap.ui.core.ListItem({ text : "{XSODATA>STATE}" 
                                        }).bindProperty("text","XSODATA>STATE")
       }
});
oDrop_field.addStyleClass('zlabel');

8) test dropdown and happy coding!