how to POST the data from ui5 to abap system

[Former Member]

Hello Experts,

Please help on this topic. I have all the code with me but the problem is, i do not know how to integrate and execute it. The code is mentioned below,

I have the NW services which has the functionality to create a new data in the abap system. the linking working fine but I do not know how to configure it in my code so that if i press the save button, the data should be created in the backend system.

Please help me on this topic. I am running out of my deadline.

UI5 code:

sap.ui.jsview("prc.createPRJ", {


  /** Specifies the Controller belonging to this View. 
  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
  * @memberOf prc.createPRJ
  */ 
  getControllerName : function() {
  return "prc.createPRJ";
  },


  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
  * Since the Controller is given to this method, its event handlers can be attached right away. 
  * @memberOf prc.createPRJ
  */ 
  createContent : function(oController) {

  var matrix = new sap.ui.commons.layout.MatrixLayout({layoutFixed: false, columns: 2});
  //matrix.createRow(oFTV1);

// var oButton = new sap.ui.commons.Button("b111",{text : "Save"});
// oButton.setStyle(sap.ui.commons.ButtonStyle.Accept);

  var oButton1 = new sap.ui.commons.Button("b121",{text : "Back", press: function(){app.to(disprj);}});
  oButton1.setStyle(sap.ui.commons.ButtonStyle.Default);
  matrix.createRow(oButton1);

  //Create a panel instance
  var oPanel = new sap.ui.commons.Panel({
  width: "500px",
  showCollapseIcon: false
  });
  oPanel.setAreaDesign(sap.ui.commons.enums.AreaDesign.Fill);
  oPanel.setBorderDesign(sap.ui.commons.enums.BorderDesign.Box);
  //Set the title of the panel
  var oTitle = new sap.ui.core.Title({text: "Project Details"});

  oPanel.setTitle(oTitle);
  //As alternative if no icon is desired also the following shortcut might be possible:
  //oPanel.setText("Contact Data");


  //Create a matrix layout with 2 columns
  var oMatrix = new sap.ui.commons.layout.MatrixLayout({layoutFixed: false, width: '100%', columns: 2});
  oMatrix.setWidths('100px', '200px');


  //Create a simple form within the layout

  oLabel = new sap.ui.commons.Label({text: 'Project Name'});
  oInput = new sap.ui.commons.TextField({value: '', width: '100%', required:true});
  oLabel.setLabelFor(oInput);
  oMatrix.createRow(oLabel, oInput);

  oLabel = new sap.ui.commons.Label({text: 'Group'});
  oInput = new sap.ui.commons.TextField({value: '', width: '20%', enabled:false});
  oLabel.setLabelFor(oInput);
  oMatrix.createRow(oLabel, oInput);

  var oHelpTable = new sap.ui.table.Table("ProjectListTable",{
         selectionMode: sap.ui.table.SelectionMode.Single,
         visibleRowCount: 7,
         width: "300pt"
   });


   oHelpTable.addColumn(
         new sap.ui.table.Column({
                 label: new sap.ui.commons.Label({text: "Project"}),
                 template: new sap.ui.commons.TextView().bindProperty("text", "prj"),
                 sortProperty: "prj",
                 filterProperty: "prj",
         })
   );

  var oProjectLabel = new sap.ui.commons.Label("idPrjLabel",{text: "Project"});
  // Input Field for Material Number with Value Help
  var oProjectInput = new sap.ui.commons.ValueHelpField("idPrInput", {
    valueHelpRequest: function(oEvent){
    var oValueHelpDialog = new sap.ui.ux3.ToolPopup({
                           modal: true,
                           inverted: false,                     // disable color inversion
                           title: "Select Project Number",
                           opener:  "idPrInput",             // locate dialog next to this field 
                           closed: function (oEvent) {
                               // return selected tabled line/value
                               var oCore = sap.ui.getCore();
                               var oMatnrInput = oCore.byId("idPrInput");
                               var oContext = oHelpTable.getContextByIndex(oHelpTable.getSelectedIndex());
                               if (oContext) {
                                     var oSel = oContext.getModel().getProperty(oContext.getPath());
                                     oMatnrInput.setValue(oSel["ProjNum"]);
                               };
                           }
             });
         var oHelpTable = new sap.ui.table.Table({
           selectionMode: sap.ui.table.SelectionMode.Single,
           visibleRowCount: 7,
           width: "300pt"
     });
     oHelpTable.addColumn(
           new sap.ui.table.Column({
                   label: new sap.ui.commons.Label({text: "Project"}),
                   template: new sap.ui.commons.TextView().bindProperty("text", "ProjNum"),
                   sortProperty: "ProjNum",
                   filterProperty: "ProjNum",
           })
     );
     oValueHelpDialog.addContent(oHelpTable);

     if (DATABINDING) {
       console.log("Gateway Databinding for Value Help");
        // var queryString ="$select=ProjNum&$format=xml";
     }
     oHelpTable.setModel(oModel);
     oHelpTable.bindAggregation("rows", "/Projectset");    


       var oOkButton = new sap.ui.commons.Button({
                    text: "OK",
                    press: function (oEvent) {
                           oEvent.getSource().getParent().close();
                    }
       });
       oValueHelpDialog.addButton(oOkButton);
       oValueHelpDialog.open();
    }
      });


  oProjectLabel.setLabelFor(oProjectInput);
  oMatrix.createRow(oProjectLabel, oProjectInput);
  oMatrix.createRow(oProjectLabel, oProjectInput);

  var oLabeldummy = new sap.ui.commons.Label({text: ''});

  var oDropdownBox = new sap.ui.commons.DropdownBox("cprjDropdownBox");
  oDropdownBox.setEditable(true);
  oDropdownBox.setWidth("200px");
  var oItem = new sap.ui.core.ListItem("actnamecprj");
  oItem.setText("Account Name");
  oDropdownBox.addItem(oItem);
  var oItem = new sap.ui.core.ListItem("aacprj");
  oItem.setText("aa");
  oDropdownBox.addItem(oItem);
  oItem = new sap.ui.core.ListItem("bbcprj");
  oItem.setText("bb");
  oDropdownBox.addItem(oItem);
  oItem = new sap.ui.core.ListItem("ccccprj");
  oItem.setText("cc");
  oDropdownBox.addItem(oItem);
  oItem = new sap.ui.core.ListItem("ddcprj");
  oItem.setText("dd");
  oDropdownBox.addItem(oItem);
  oDropdownBox.setValue("Account ID");
  oMatrix.createRow(oLabeldummy,oDropdownBox);

  oLabel = new sap.ui.commons.Label({text: 'Start Date'});
  oInput = new sap.ui.commons.DatePicker({locale: "en-IN",});
  oLabel.setLabelFor(oInput);
  oMatrix.createRow(oLabel, oInput);

  oLabel = new sap.ui.commons.Label({text: 'End Date'});
  oInput = new sap.ui.commons.DatePicker({locale: "en-IN",});
  oLabel.setLabelFor(oInput);
  oMatrix.createRow(oLabel, oInput);

  var oButton = new sap.ui.commons.Button("b111",{text : "Save"});
  oButton.setStyle(sap.ui.commons.ButtonStyle.Accept);
  oMatrix.createRow(oButton);
  oPanel.addContent(oMatrix);

  var toolbar = new sap.ui.commons.Toolbar("toolbarr");

  oLabel = new sap.ui.commons.Label({text: 'View'});
  var oDropdownBox = new sap.ui.commons.DropdownBox("DropdownBox22");
  oDropdownBox.setEditable(true);
  oDropdownBox.setWidth("200px");
  var oItem = new sap.ui.core.ListItem("actnamee11");
  oItem.setText("[Standard View]");
  oDropdownBox.addItem(oItem);
  var oItem = new sap.ui.core.ListItem("aaa11");
  oItem.setText("aa");
  oDropdownBox.addItem(oItem);
  oItem = new sap.ui.core.ListItem("bbb11");
  oItem.setText("bb");
  oDropdownBox.addItem(oItem);
  oItem = new sap.ui.core.ListItem("ccc11");
  oItem.setText("cc");
  oDropdownBox.addItem(oItem);
  oItem = new sap.ui.core.ListItem("ddd11");
  oItem.setText("dd");
  oDropdownBox.addItem(oItem);
  oDropdownBox.setValue("[Standard View]");
  oLabel.setLabelFor(oDropdownBox);

  var but1 = new sap.ui.commons.Button({text: "Check"});
  //Create a MenuButton Control
  var oMenuButton = new sap.ui.commons.MenuButton({text: "Export"}); 


  //Create the menu
  var oMenu1 = new sap.ui.commons.Menu("menu2", {ariaDescription: "File Menu"});
  //Create the items and add them to the menu
  var oMenuItem1 = new sap.ui.commons.MenuItem("item1-22",{text: "New"}); //Icon must be not larger than 16x16 px
  oMenu1.addItem(oMenuItem1);
  var oMenuItem2 = new sap.ui.commons.MenuItem("item1-33",{text: "Delete"});
  oMenu1.addItem(oMenuItem2);
  var oMenuItem3 = new sap.ui.commons.MenuItem("item1-44",{text: "Properties", enabled: false});
  oMenu1.addItem(oMenuItem3);




  //Attach the Menu to the MenuButton
  oMenuButton.setMenu(oMenu1);


  //Attach an event to raise an alert when an item is selected.
  oMenuButton.attachItemSelected(function (oEvent){
  alert("Items \"" + oEvent.getParameter("itemId") + "\" was selected.");
  });


  //Attach the MenuButton to the page

  toolbar.addItem(oLabel);
  toolbar.addItem(oDropdownBox);
  toolbar.addItem(oMenuButton);
  toolbar.addItem(but1);

  var aData = [
  {ProjNum:"", Cyear:"", C01:"", C02:"",C03:"",C04:"",C05:"",C06:"",C07:"",C08:"",C09:"",C10:"",C11:"",C12:""},
  ];


  //Create an instance of the table control
  var oTable = new sap.ui.table.DataTable({
  //title: "Table Example",
  visibleRowCount: 8,
  firstVisibleRow: 3,
  selectionMode: sap.ui.table.SelectionMode.Single,
  editable: true,
  });

  oTable.setToolbar(toolbar);

  var toolbar = new sap.ui.commons.Toolbar("toolbar1111");

  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "Project No."}),
  template: new sap.ui.commons.TextView().bindText("ProjNum"),
  sortProperty: "ProjNum",
  filterProperty: "ProjNum",
  width: "50px",
  rowSelect: function(e){
  var d = document.getElementById('column2');
  d.setEditable(true);
  }
  }));
  var dateType = new sap.ui.model.type.Date({source: {pattern: "yyyy/mm/dd"},pattern: "yyyy/MM/dd"});
  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "Year"}),
  template: new sap.ui.commons.ComboBox({items: [
  new sap.ui.core.ListItem({text: "2014"}),
  new sap.ui.core.ListItem({text: "2015"})
  ]}).bindProperty("value","Cyear"),
  sortProperty: "Cyear",
  filterProperty: "Cyear",
  width: "50px",

  }));

  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "January"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C01", dateType),
  sortProperty: "C01",
  filterProperty: "C01",
  filterType: dateType,
  width: "50px"
  }));

  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "Febraury"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C02", dateType),
  sortProperty: "C02",
  filterProperty: "C02",
  filterType: dateType,
  width: "50px"
  }));

  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "March"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C03", dateType),
  sortProperty: "C03",
  filterProperty: "C03",
  filterType: dateType,
  width: "50px"
  }));

  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "April"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C04", dateType),
  sortProperty: "C04",
  filterProperty: "C04",
  filterType: dateType,
  width: "50px"
  }));


  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "May"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C05", dateType),
  sortProperty: "C05",
  filterProperty: "C05",
  filterType: dateType,
  width: "50px"
  }));
  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "June"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C06", dateType),
  sortProperty: "C06",
  filterProperty: "C06",
  filterType: dateType,
  width: "50px"
  }));
  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "July"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C07", dateType),
  sortProperty: "C07",
  filterProperty: "C07",
  filterType: dateType,
  width: "50px"
  }));
  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "August"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C08", dateType),
  sortProperty: "C08",
  filterProperty: "C08",
  filterType: dateType,
  width: "50px"
  }));
  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "September"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C09", dateType),
  sortProperty: "C09",
  filterProperty: "C09",
  filterType: dateType,
  width: "50px"
  }));
  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "October"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C10", dateType),
  sortProperty: "C10",
  filterProperty: "C10",
  filterType: dateType,
  width: "50px"
  }));
  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "November"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C11", dateType),
  sortProperty: "C11",
  filterProperty: "C11",
  filterType: dateType,
  width: "50px"
  }));
  oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "December"}),
  template: new sap.ui.commons.TextField().bindProperty("value", "C12", dateType),
  sortProperty: "C12",
  filterProperty: "C12",
  filterType: dateType,
  width: "50px"
  }));




  //Create a model and bind the table rows to this model
  var oModel = new sap.ui.model.json.JSONModel();
  oModel.setData({modelData: aData});
  oTable.setModel(oModel);
  oTable.bindRows("/modelData");


  //Initially sort the table
  oTable.sort(oTable.getColumns()[0]);


  //Bring the table onto the UI 
  //return oTable;

  var oLayout1 = new sap.ui.commons.layout.MatrixLayout({
  id : "matrix5",
  columns: 1,
  layoutFixed : false
  });

  oLayout1.createRow( matrix );
  oLayout1.createRow(oPanel);
  oLayout1.createRow( oTable );

  return oLayout1;
  }


});

Netweaver gateway:

var url = "http://bmh1032340.apac.bosch.com:8005/sap/opu/odata/sap/ZBRIDGE_SRV/Projectset('010101')";
  var refThis = this;
  var oHeaders = {"X-CSRF-Token" : "fetch"};
  jQuery.ajax({
  type: 'GET',
  url: url,
  cache: false,
  headers: oHeaders,
  contentType : "application/atom+xml",
  dataType:"text",
  processData: false,
  success: function(data, status, request) {
  var responseData = data;
  var xmlDoc = data;
  if(window.DOMParser) {
  parser = new DOMParser();
  var docElem = parser.parseFromString(xmlDoc, "text/xml");
  var val = docElem.getElementsByTagName("d:msgtyp")[0].childNodes[0].nodeValue;
  var splitArr = val.split(":");
  if(splitArr[0] == "01") {
  docElem.getElementsByTagName("d:ProjNum")[0].childNodes[0].nodeValue = "010101";
  docElem.getElementsByTagName("d:Descr")[0].childNodes[0].nodeValue = "UI5 Project";
  docElem.getElementsByTagName("d:Grp")[0].childNodes[0].nodeValue = "BSN2";
  docElem.getElementsByTagName("d:Psize")[0].childNodes[0].nodeValue = "3";
  docElem.getElementsByTagName("d:PrlName")[0].childNodes[0].nodeValue = "Bridge Tool";
  docElem.getElementsByTagName("d:Prl")[0].childNodes[0].nodeValue = "RBEI";
  docElem.getElementsByTagName("d:Zaccid")[0].childNodes[0].nodeValue = "234";
  var csrfToken = request.getResponseHeader('X-CSRF-TOKEN');
  refThis.createProject(docElem, csrfToken);
  } else {
  var csrfToken = request.getResponseHeader('X-CSRF-TOKEN');
  refThis.createProject(responseData, csrfToken);
  }
  }
  },
  error: function(data) {

  }
  });
  },

  createProject : function(response, csrfToken) {
  console.log(response);
  var url = "http://bmh1032340.apac.bosch.com:8005/sap/opu/odata/sap/ZBRIDGE_SRV/Projectset('010101')";
  var oHeaders = {"X-CSRF-Token" : csrfToken };
  jQuery.ajax({
  type: 'POST',
  url: url,
  cache: false,
  headers: oHeaders,
  data: response,
  contentType : "application/atom+xml",
  processData: false,
  success: function(data, status, request) {
  var responseData = data;
  var responseHeader = request.getResponseHeader('X-CSRF-TOKEN');
  console.log(responseData);
  console.log(responseHeader);
  },
  error: function(data) {
  console.log(data);
  }
  });
  },

Thanks and Regards,

Vignesh Karthick.

[former_member220538 · Accepted solution]

Hi Vicky,

In the blog shruti m has explained in details about the CURD operations.

Please go through it.

Regards,

Jeffin