Create ticket using Date Picker control in SAPUI5

[Former Member]

Hi Experts,

My requirement is to create new ticket on getting required details from the user. So far, I have created a Dialog box with text fields to get the data from the user. When I use the Date Picker control and create tickets I get the error

"sap-ui-core.js:160 2016-10-11 15:35:56.020379 The following problem occurred: HTTP request failed400,Bad Request,<?xml version="1.0" encoding="utf-8"?><error xmlns="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"><code>00145E5B1CC71EE0AB8B3A3B086F432E</code><message xml:lang="en">The Data Services Request could not be understood due to malformed syntax</message></error>"

Is the error occurring because the date format in the control is the not understood by the odata while creating tickets ?

If so, please provide suggestions as to how this can be accomplished.

The code to create ticket:

createticket: function() {
			var oModel = new sap.ui.model.odata.ODataModel("/sap/c4c/odata/v1/c4codata/");
			// Create a dialog to get the information of the bank to be created
			var oDialog = new sap.ui.commons.Dialog("Dialog", {
				modal: true,
				closed: function(oControlEvent) {
					sap.ui.getCore().getElementById('Dialog').destroy();
				}
			});
			oDialog.setTitle("Create Ticket");
			// Create a layout to place the controls in the dialog
			var oLayout = new sap.ui.commons.layout.MatrixLayout({
				columns: 2,
				width: "100%"
			});
			var oTF = new sap.ui.commons.TextField("serialid", {
				tooltip: "Serial ID",
				editable: true,
				required: true,
				width: '200px'
			});
			var oLabel = new sap.ui.commons.Label("Serialid", {
				text: 'SerialID',
				labelFor: oTF
			});
			oLayout.createRow(oLabel, oTF);
			oTF = new sap.ui.commons.TextField("prodid", {
				tooltip: 'Product ID',
				editable: true,
				required: true,
				width: '200px'
			});
			// Label for the last name field
			oLabel = new sap.ui.commons.Label("ProductID", {
				text: 'ProductID',
				labelFor: oTF
			});
			oLayout.createRow(oLabel, oTF);
			oTF = new sap.ui.commons.TextField("custid", {
				tooltip: 'Customer ID',
				editable: true,
				required: true,
				width: '200px'
			});
			// Label for the last name field
			oLabel = new sap.ui.commons.Label("CustomerID", {
				text: 'CustomerID',
				labelFor: oTF
			});
			oLayout.createRow(oLabel, oTF);
				oTF = new sap.m.DatePicker("wtstid", {
				tooltip: 'Sart Date',
				editable: true,
				required: false,
				width: '200px'
			});
			// Label for the last name field
			oLabel = new sap.ui.commons.Label("WarrantyFrom", {
				text: 'Warranty From',
				labelFor: oTF
			});
			oLayout.createRow(oLabel, oTF);
			oTF = new sap.m.DatePicker("wteddate", {
				tooltip: 'End Date',
				editable: true,
				required: false,
				width: '200px'
			});
			// Label for the last name field
			oLabel = new sap.ui.commons.Label("WarrantyEnd", {
				text: 'Warranty To',
				labelFor: oTF
			});
			oLayout.createRow(oLabel, oTF);
			// Add the layout to the dialog
			oDialog.addContent(oLayout);
			// Add a button to post the bank's data to the odata interface
			oDialog.addButton(new sap.ui.commons.Button({
				text: "Save",
				press: function() {
					var serialid = sap.ui.getCore().byId("serialid").getValue();
					var prodid = sap.ui.getCore().byId("prodid").getValue();
					var custid = sap.ui.getCore().byId("custid").getValue();
					var wtstid = sap.ui.getCore().byId("wtstid").getValue();
					var wteddate = sap.ui.getCore().byId("wteddate").getValue();
					var oEntry = {};
					oEntry.SerialID = serialid;
					oEntry.ProductID = prodid;
					oEntry.CustomerID = custid;
					oEntry.WarrantyFrom = wtstid;
					oEntry.WarrantyTo = wteddate;			
					oModel.create("/ServiceRequestCollection", oEntry, null, function() {
					var msg = 'New Service Ticket has been created successfully.';
					MessageBox.show(msg);
				},function() {
					var msg = 'Service Ticket Creation has failed.';
					MessageBox.show(msg);
				});
					oDialog.close();
				}
			}));
			oDialog.addButton(new sap.ui.commons.Button({
				text: "Cancel",
				press: function() {
					var msg = 'Service Ticket Creation has been cancelled.';
					MessageBox.show(msg);
					oDialog.close();
				}
			}));
			oDialog.open();
		}

[ericci]

Can you please format the code in a better way? It will help us to understand and read it correctly.

[ericci · Accepted solution]

Hi,

I would suggest you to use the metod getDateValue() in order to get the JS Date of the DatePicker.

JavaScript Date Object are correctly interpreted by oData 😉

[vaibhav_gb]

Hello Srinivasan,

Try this by converting your date to ISOString like:

step 1: wteddate = wteddate.toISOString() which give you the date in the following format "2016-10-11T17:12:44.684Z". If this format still give you an error from the backend then after step 1 follow this -

wteddate = wteddate.split(".")[0] then send it to backend.

regards

Vaibhav GB

[former_member227918]

Yes, getValue() will return the value of the texttfield not date value, which is not acceptable in gateway if datatype is not string, getDateValue will work i guess,

you can check the diff.

DatePicker/

Rgards,

Akhilesh