How to send json model via REST service using sapui5 - json

Question

I'm using SAPUI5 and I have a XML form that I wanna send the data to my REST service using Json Model.
I'm using the SAPUI5 MVC model to make my app.
How can I send the data to my server with REST and JSON?
sap.ui.controller("controller.NewTicket", {
onInit: function() {
this.router = sap.ui.core.UIComponent.getRouterFor(this);
this.router.attachRoutePatternMatched(this._handleRouteMatched, this);
},
_handleRouteMatched:function(evt){
if("NewTicket" !== evt.getParameter("name")){
return;
}
var id = evt.getParameter("arguments").id;
var model = new sap.ui.model.json.JSONModel({id:id});
this.getView().setModel(model,"data");
},
enviar:function() {
jQuery.sap.require("sap.m.MessageBox");
// open a fully configured message box
sap.m.MessageBox.show("Confirmar a abertura do chamado?",
sap.m.MessageBox.Icon.QUESTION,
"Confirmar",
[sap.m.MessageBox.Action.YES, sap.m.MessageBox.Action.NO],
function(sResult) {
if(sResult == sap.m.MessageBox.Action.YES)
{
var oModel = new sap.ui.model.json.JSONModel();
var aData = jQuery.ajax({
type : "POST",
contentType : "application/json",
url : "http://192.168.0.32:9082/maxrest/rest/mbo/sr/?description="+ **deviceModel.sr.description** +"&_format=json&_compact=true&_verbose=true",
dataType : "json",
async: false,
success : function(data,textStatus, jqXHR) {
oModel.setData({modelData : data});
sap.m.MessageBox.show("ABRIU");
},
error : function(data,textStatus, jqXHR) {
oModel.setData({modelData : data});
sap.m.MessageBox.show(textStatus);
}
})}
else
{
}
},
sap.m.MessageBox.Action.YES);
var deviceModel = new sap.ui.model.json.JSONModel({
sr : [{
description: "",
long_description: ""
}]});
deviceModel.setDefaultBindingMode("TwoWay");
sap.ui.getCore().setModel(deviceModel);
jQuery.sap.require("sap.m.MessageToast");
sap.m.MessageToast.show(deviceModel.getData().sr.description);
}
});
And the View...
<mvc:View xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:co="sap.ui.commons"
xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core" controllerName="com.maximo.controller.NewTicket">
<Page id="NewTicket" enableScrolling="true" title="{i18n>newTicket}" >
<content>
<f:SimpleForm >
<core:Title level="H5"
text="O chamado será aberto em seu nome e você será o usuário afetado"/>
<Label text="Resumo"/>
<Input type="Text" maxLength="100" value="{/sr/description}"/>
<Label text="Detalhes"/>
<TextArea height="50%" cols="800" value="{/sr/long_description}"/>
</f:SimpleForm>
</content>
<customHeader>
<Bar>
<contentLeft>
<Button icon="sap-icon://nav-back" press="voltarMenu"/>
</contentLeft>
<contentMiddle>
<Label text="{i18n>newTicket}"/>
</contentMiddle>
</Bar>
</customHeader>
<footer>
<Bar>
<contentMiddle>
<Button id="btnSend" text="{i18n>send}" press="enviar" icon="sap-icon://add-activity-2"/>
</contentMiddle>
</Bar>
</footer>
</Page>

Answer 1

From my experience I found out that it's easier to use an OData model of "JSON" type.
var user = applicationContext.registrationContext.user;
var password = applicationContext.registrationContext.password;
var uri = "http://" + user + ":" + password + "#" + applicationContext.registrationContext.serverHost + ":8080/" + appId + "/"
var headers = {
//"Authorization" : "Basic " + btoa(applicationContext.registrationContext.user + ":" + applicationContext.registrationContext.password),
"X-SMP-APPCID" : applicationContext.applicationConnectionId
};
console.log("Try comunicating the first time");
var oModel = new sap.ui.model.odata.ODataModel(uri, {json : true}, user, password, headers, false, false, false);
oModel.setHeaders(headers);
oModel.read("/Brand", onSuccess);
function onSuccess(result) {
sap.ui.getCore()....getView().getModel("Brands").setData(result);
};
It's how I do all my requests, manual or automated (on manual event or page event).
For an "post" event, I used a token fech:
oModelRequest.setHeaders({
"Access-Control-Allow-Origin" : "*",
"Content-Type": "application/x-www-form-urlencoded",
"X-CSRF-Token":"Fetch"
});
// Declare a variable to handle the security token
var token;
// Create a read request to retreive the X-CSRF token
oModelRequest.read('/Brand', null, null, false,
function(oData, oResponse) {
if (oResponse.headers['x-csrf-token'] == undefined) {
//alert("Error on read process. No token ! Check read !");
}
token = oResponse.headers['x-csrf-token'];
},
function() {
alert(oModeli18n.getProperty("Brand_token_error"));
}
);
And after that I do the actual "POST" with the "Create" method:
// Set POST request header using the X-CSRF token
oModelRequest.setHeaders({
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/json",
"DataServiceVersion": "2.0",
"Accept": "application/atom+xml,application/atomsvc+xml,application/xml",
"X-CSRF-Token": token
});
// Call the create request
oModelRequest.create('/Brand', requestData, null,
function(oData, oResponse) {
alert (Success);},
function(oData) {
alert(Error));
alert(oData.response.body);}
);