Here is the information you would need for the blog
In order to run a SAP custom UI5 app on your system, you must have the following
- Tomcat Apache (Server) or NetWeaver Portal CE 7.3 for deployment
- SAP UI 5 Plug-in installed in SAP NetWeaver Developer Studio/Eclipse.
- HTML5 browser support (Works best on Google Chrome)
If you do not have a UI5 toolkit, here’s the link
SAP custom UI5 app – Please note that you should have:
- Minimal understanding of NetWeaver Gateway and OData services
- Knowledge about SAPUI5 controls and libraries
- Basic knowledge of JavaScript, HTML, CSS
Since SAP custom UI5 app has more intuitive features in terms of functionality (supporting all devices) and provides robustness and stability, it is imperative that you know how to build a SAP custom UI5 app to make itself a complete solution as per your needs. Instead of creating or updating single records, which generally consumes more time and effort. In this blog, I have addressed how to create and post multiple records at once for a SAP custom UI5 app
Challenge
Posting single records using SAP Custom UI5 App is quite easy to do, however, posting multiple records at once and integrating through OData services has been a challenge
I had faced a similar problem as aforesaid while creating multiple expense records for SAP expense report app, which is a SAP Custom UI5 app. The distinction was when an OData service requests can consume multiple values at once to the server, probably there should be a proper way to create and update multiple records from the front-end too. Therefore, I have explored the options myself to integrate the OData services given to me can accept multiple records while posting, but I had no idea how to fulfil it from front-end.
Solution
Despite my several attempts of posting this query on several forums and Q&A discussion chatrooms, I ended up in vain.
Therefore, I decided to explore options by using JavaScript.
You don’t have to be an expert in all the languages to get things work for you, a very minimal level of understanding and knowledge will definitely help in saving time and effort.
There is a concept called objects and arrays in JavaScript, if you are already aware this is going to be easy while if you are not well-versed it is easy and can be done using four simple steps.
Step 1: Create user input fields
First of all, create all the input fields which need to be send to backend server through ODATA services. In addition, make fields mandatory if the user has to compulsorily give the input so as the users don’t leave the fields blank. The input fields can also be combo boxes, date picker, time picker and so on while you can use the same input fields to create multiple records.
var rd = new sap.m.Label(“rd”,{textAlign:”Right”,width:”50%”,text:”Receipt type”});
var descnames = new sap.ui.core.Item({
text : “{ExpenseType}”
});
rd1 = new sap.m.ComboBox(“rd1″, {
width:”43%”,
placeholder : “Select Expense Type”,
items : {
path : “/results”,
template : descnames
},
});
This is achieved with the help of “Add” button. Most of all, when you click and add rows to the table, the data above the input fields gets refreshed automatically this means you don’t have to clear the data every time.
sap.ui.getCore().byId(“receipttype”).setValue(“”);
Step 2: Create table to store multiple values (User inputs)
Consequently, after creating input fields, you will have to create a table that can store multiple user inputs as line items.
However, this is just to make sure that the date you create is being recorded one by one
Var oTable = new sap.m.Table();
var oColtype= new sap.m.Column({header: new sap.m.Text({text:”Receipt Type”}), width: “150px”});
var oColdate = new sap.m.Column({header: new sap.m.Text({text:”Receipt Date”}), 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}”
}),
]
}));
Step 3: Adding multiple records using “Add” Button
In order to store each expense to the internal table “oTable”, I have included a button called “ Add” Button Each time you click this button it allows creation of a new row in the table while allowing you to add data to it. In conclusion, you can create “n” number of records.
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(“rd1”).getValue(); // receipt type input field
var m2 = sap.ui.getCore().byId(“rdate1”).getValue(); // receipt date input field
var obj = {otype: m1,odate :m2d};
aData.push(obj);
var store ={“store”:aData}
oTable.setModel(new sap.ui.model.json.JSONModel(store));
}
“aData” is a globally declared array and “obj” is an object that creates an instance for every new record added to the array.
While “aData” array can hold “n” number of records. However, an array cannot be directly moved to the “oTable”.
To resolve this I have created a variable “store” and set the “store” values to “json” model as a result of which this “json” model can be bounded to the “oTable”.
oTable.bindItems(“/aData”);
Step 4: Creating and update Multiple records
Finally, we have the multiple records that can be 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);
}
var postdata1 = {
Reason : d1,
StartDate:dateformat,
StartTime:time1,
EndDate:dateformatend,
EndTime:time2,
Destination:d6,
AdvanceAmount:d7,
CostCenter:””,
EmpNum:empnum,
Country:””,
Currency:”USD”,
Remark:””,
CreateTripI: arrayOfItems,
}
To check the length of an array “aData” you can access the value of each ‘obj” Create one final array “arrayofitems” while pass through oData services.
This is how you can post multiple records at once in custom UI5 apps
There are many points to explain. I am condensing the information to be precise.
However, in my next blog, I would cover more topics in order to address challenges faced day-on-day
Hope this helps you, Please post your questions as comments and I shall reply to you with answers accordingly