SAP Custom Fiori Apps

Step-by-step approach to create multiple records using SAP Custom Fiori Apps

In SAP Custom Fiori Apps, it’s quite easy to create single record at a time ,but creating multiple records has always been hectic.

I have written this blog to help you posts multiple records at a time to the backend server through ODATA service.

It’s going to be easier with the below solution..

This will not only help you creating,but also updating and deleting.

I faced this problem when i had to create multiple expense report which is SAP Custom Fiori App,the ODATA service given to me can accept multiple records while posting,but i had no idea how to fulfill it from front­end.

I posted this query on almost all the SAP blogs but ended up in vain.

Then i decided to try it with my own idea,just by using Javascript coding.

There is a concept called objects and arrays in Javascript,hope you know it very well.I was not even well­versed in those concepts ,all
I was not even well­versed in those concepts ,all i knew is the basics.With just basic concepts in mind,
With just basic concepts in mind, i came up with the solution for creating multiple records.

Here comes the step by step process :

SAP Custom Fiori Apps Step 1 : Add or Create input fields

Create input fields needed that is posted to backend through ODATA service.

Also make it mandatory if the user has to compulsorily give the input,so that the user(you) won’t leave the field blank.

The input fields can also be combo boxes,date picker,time picker etc.

The input fields can also be combo boxes,date picker,time picker etc.

SAP Custom Fiori Apps Step 2 : Store multiple values by creating tables (User inputs):

After creating input fields,you will create a table where you can store multiple user inputs as line items.
Var oTable = new sap.m.Table();
var oColtype = new sap.m.Column({header: new sap.m.Text({text:”Material”}), width: “150px”});
var oColdate = new sap.m.Column({header: new sap.m.Text({text:”Batch”}), width: “150px”});
oTable.addColumn(oColtype).addColumn(oColdate);
oTable.bindItems(“/aData”, new sap.m.ColumnListItem({
cells : [ new sap.m.Text({
text : “{otype}”
}), new sap.m.Text({
text : “{odate}”
}),
]
}));

SAP Custom Fiori Apps Step 3 : Add Button:

Add this button to create more records.

Create a new button and write a press event for the button.
var button = new sap.m.Button(“button”,{text:”ADD”,press:oController.addbtn});
Eg.
var aData = new array(); // Create it globally in index.html
addbtn:function()
{
var m1 = sap.ui.getCore().byId(“firstfield”).getValue();
var m2 = sap.ui.getCore().byId(“secondfield”).getValue();
var obj = {otype: m1,odate :m2d};
aData.push(obj);
var store ={“store”:aData}
oTableD.setModel(new sap.ui.model.json.JSONModel(store));
}
Here “obj” is an object which creates an instances for every new record added.
“aData” is the globally declared array because you push the object one by one to the array.

The records are added to single array. An array can hold the collection of data of same datatypes.

I cannot directly create a json model with the array data,so i have created a variable “store” and set the “store” values to the json model.

Aforesaid table created is binded by this model.
oTableD.bindItems(“/aData”);

SAP Custom Fiori Apps Step 4: Posting Multiple records

Now,we have the multiple records stored in an array “aData”.
Eg.
var arrayOfItems = new Array();
for(var i=0;i<aData.length;i++)
{
var obj = {“ExpType”:aData[i].otype,”RecDate”:aData[i].odate};
arrayOfItems.push(obj);
}
Here i am checking the length of array “aData” and accessing the value of each array values to storing the values in object “obj”.
Create another array “ arrayOfItems” and pass this array to the oData service. This is how you can create multiple records at a time.

Hope this helps you…