Skip to Content
avatar image
Former Member

Develop an SAPUI5 Form GridLayout using OData service

Hi Experts,

Can you guys give some code example of how to consume OData service with an SAPUI5 form. I don't want to use tabular format. I just want to create some fields like a regular form. When I click Submit, this data should be submitted in the back end. All the examples that I found for the OData are for tables or the data is in the tabular format.

Please give me an example with code snippet. Any documentation to do this would also be helpful. Thanks very much.

Regards,

Kishore.

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

1 Answer

  • Best Answer
    Jun 03, 2015 at 08:16 AM

    Hi,

    See the below example.

    Please let me know for any issues.

    Hi,

    Use below code in index.html.

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

    <script src="resources/sap-ui-core.js"

    id="sap-ui-bootstrap"

    data-sap-ui-libs="sap.ui.commons,sap.ui.table"

    data-sap-ui-theme="sap_bluecrystal">

    </script>

    <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

    <script>

    sap.ui.localResources("products");

    var view = sap.ui.view({id:"idProduct1", viewName:"products.Product", type:sap.ui.core.mvc.ViewType.JS});

    view.placeAt("content");

    </script>

    </head>

    <body class="sapUiBody" role="application">

    <div id="content"></div>

    </body>

    </html>

    Then write this code in your view.

    createContent : function(oController) {

    var oLayout = new sap.ui.layout.form.SimpleForm("formId",{

    title: "Product Maintainance",

    content: [

    new sap.ui.commons.Label({text: "ID"}),

    new sap.ui.commons.TextField("id",{width: '200px', editable: false}),

    new sap.ui.commons.Label({text: "Name"}),

    new sap.ui.commons.TextField("name",{width: '200px'}),

    new sap.ui.commons.Label({text: "Description"}),

    new sap.ui.commons.TextField("description",{width: '200px'}),

    new sap.ui.commons.Label({text: "Price"}),

    new sap.ui.commons.TextField("price",{width: '200px'}),

    new sap.ui.commons.Label({text: "Rating"}),

    new sap.ui.commons.TextField("rating",{width: '200px'}),

    new sap.ui.commons.Label({text: "ReleaseDate"}),

    new sap.ui.commons.TextField("date",{width: '200px', value: "2014-12-28T22:22:22"}),

    new sap.ui.commons.Label({text: ""}),

    new sap.ui.commons.Button({

    text: "Save",

    width: '100px',

    press: function() {

    oController.save()

    }

    })

    ]

    });

    var oMatrix = sap.ui.commons.layout.MatrixLayout({

    layoutFixed: true,

    width: '300px',

    columns: 3

    });

    oMatrix.createRow(

    new sap.ui.commons.Button({

    text: "Create",

    width: '100px',

    press: function() {

    oController.create();

    }

    }),

    new sap.ui.commons.Button({

    text: "Edit",

    width: '100px',

    press: function() {

    oController.edit();

    }

    }),

    new sap.ui.commons.Button({

    text: "Delete",

    width: '100px',

    press: function() {

    oController.remove();

    }

    })

    );

    //table

    var oTable = new sap.ui.table.Table("tableId",{

    visibleRowCount: 5,

    editable: false

    });

    oTable.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "ID"}),

    visible: true,

    template: new sap.ui.commons.TextView({text: "{products>ID}"})

    }));

    oTable.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Name"}),

    visible: true,

    template: new sap.ui.commons.TextView({text: "{products>Name}"})

    }));

    oTable.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Description"}),

    visible: true,

    template: new sap.ui.commons.TextView({text: "{products>Description}"})

    }));

    var oSorter = new sap.ui.model.Sorter("products>Name", true); // sort descending

    oSorter.fnCompare = function(value1, value2) {

    console.log(value1 + ' - ' + value2);

    var val1Mapped = get(value1);

    var val2Mapped = get(value2);

    console.log(val1Mapped + ' - ' + val2Mapped);

    if (val1Mapped < val2Mapped) return -1;

    if (val1Mapped == val2Mapped) return 0;

    if (val1Mapped > val2Mapped) return 1;

    };

    oTable.bindRows("products>/Products").sort(oSorter);

    var bindEle = [oTable,oLayout, oMatrix];

    return bindEle;

    }

    Then write this code in your controller.

    1. sap.ui.controller("products.Product", {

    /**

    * Called when a controller is instantiated and its View controls (if available) are already created.

    * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

    * @memberOf products.Product

    */

    onInit: function() {

    var oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/V3/(S(3ngooq0fkelm0nublhbj01xu))/OData/OData.svc");

    oModel.oHeaders = {

    "DataServiceVersion": "3.0",

    "MaxDataServiceVersion": "3.0"

    };

    sap.ui.getCore().setModel(oModel,"products");

    },

    /**

    * Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered

    * (NOT before the first rendering! onInit() is used for that one!).

    * @memberOf products.Product

    */

    // onBeforeRendering: function() {

    //

    // },

    /**

    * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.

    * This hook is the same one that SAPUI5 controls get after being rendered.

    * @memberOf products.Product

    */

    onAfterRendering: function() {

    $("#formId").hide();

    },

    /**

    * Called when the Controller is destroyed. Use this one to free resources and finalize activities.

    * @memberOf products.Product

    */

    // onExit: function() {

    //

    // },

    mode: 0,

    resetForm: function() {

    $("#name").val('');

    $('#description').val('');

    $('#price').val('');

    $('#rating').val('');

    $('#id').val('');

    },

    create: function() {

    this.mode = 'create';

    this.resetForm();

    $("#formId").slideDown(300, function() {

    var id = sap.ui.getCore().byId('tableId')._getRowCount();

    $("#id").val(id);

    });

    },

    edit: function() {

    this.mode = 'edit';

    var oTable = sap.ui.getCore().byId('tableId');

    var selected = oTable.getSelectedIndex();

    if(selected ==-1) {

    alert("select a row");

    }else{

    $("#formId").slideDown(function() {

    var data = oTable.getModel('products').oData['Products('+ selected +')'];

    var id = data.ID;

    var description = data.Description;

    var price = data.Price;

    var rating = data.Rating;

    var name = data.Name;

    $("#name").val(name);

    $("#description").val(description);

    $("#price").val(price);

    $("#rating").val(rating);

    $("#id").val(id);

    });

    }

    },

    removeId: 0,

    remove: function() {

    this.mode = 'delete';

    var oTable = sap.ui.getCore().byId('tableId');

    var selected = oTable.getSelectedIndex();

    if(selected ==-1) {

    alert("select a row");

    }else{

    var data = oTable.getModel('products').oData['Products('+ selected +')'];

    this.removeId = data.ID;

    this.save();

    }

    },

    save: function() {

    var requestObj = {

    requestUri: '',

    method: '',

    headers: {

    "X-Requested-With": "XMLHttpRequest",

    "Content-Type": "application/json;odata=minimalmetadata",

    "DataServiceVersion": "3.0",

    "MaxDataServiceVersion": "3.0",

    "Accept": "application/json;odata=minimalmetadata"

    }

    };

    var newData = {

    "odata.type": "ODataDemo.Product",

    "ID": $("#id").val(),

    "Name": $("#name").val(),

    "Description": $("#description").val(),

    "ReleaseDate": $("#date").val(),

    "Rating": $("#rating").val(),

    "Price": $("#price").val()

    };

    if(this.mode == 'create'){

    var url = "proxy/http/services.odata.org/V3/(S(3ngooq0fkelm0nublhbj01xu))/OData/OData.svc/Products";

    var method = "POST";

    requestObj.requestUri = url;

    requestObj.method = method;

    requestObj.data = newData;

    }else if(this.mode == 'edit') {

    var id = $("#id").val();

    var url = "proxy/http/services.odata.org/V3/(S(3ngooq0fkelm0nublhbj01xu))/OData/OData.svc/Products("+id+")";

    var method = "PUT";

    requestObj.requestUri = url;

    requestObj.method = method;

    requestObj.data = newData;

    }else if(this.mode == 'delete') {

    var id = this.removeId;

    var url = "proxy/http/services.odata.org/V3/(S(3ngooq0fkelm0nublhbj01xu))/OData/OData.svc/Products("+id+")";

    var method = "DELETE";

    requestObj.requestUri = url;

    requestObj.method = method;

    }

    OData.request(requestObj, function() {

    sap.ui.getCore().getModel('products').refresh();

    $("#formId").slideUp();

    });

    }

    });

    Regards

    Dhananjay

    Add comment
    10|10000 characters needed characters exceeded