We all know that we can write script code to create Fiori UI instead of writing <Tag> in script. Normally people think "writing script code" is more time consuming. But I think it's not true. Let's think about those complex transaction Fiori app. Yes, they have lots of input fields like text input field, date field, checkbox, radio button and so on. So even you write <tag> in script, it's not an easy work. However regardless how many input fields needs to be included or columns in table, we can group them with Form, table and so on. So my idea is create some useful script function to generate UI from JSON data. When UI design finish the UI mockup, develop only needs to construct the JSON data to stand for the UI. The real UI will be generated by script code on run time. Look at an example and sample code below. See demo screen shot first.
Here we have 12 input fields on above screen. I build a JSON data like below.
var ui_postingform = [
{"id":"postfc1","title": "", "elements":[{"type":"label", "text":"Payment Method", "hCells": "2", "newline":"true"},
{"type":"textfield", "id": "idpaymentmethod","hCells":"2", "newline":"false"},
{"type":"mylabel", "text":"Pmnt Block", "hCells": "2", "newline":"false"},
{"type":"textfield", "id": "idblock", "hCells":"2", "newline":"false"},
{"type":"label", "text":"Payment Terms", "hCells": "2", "newline":"true"},
{"type":"textfield", "id": "idpaymentterms", "hCells":"2", "newline":"false"},
{"type":"mylabel", "text":"Dunning Area", "hCells": "2", "newline":"false"},
{"type":"textfield", "id": "iddunningarea", "hCells":"2", "F4Table":"H_T047M", "F4Field": "DUNNAREA", "Position": "2","newline":"false"},
{"type":"label", "text":"House Bank", "hCells": "2", "newline":"true"},
{"type":"textfield", "id": "idhousebank", "hCells":"2", "newline":"false"},
{"type":"mylabel", "text":"Dunning Block", "hCells": "2", "newline":"false"},
{"type":"textfield", "id": "iddunningblock", "hCells":"2", "newline":"false"},
{"type":"label", "text":"House Bank Account", "hCells": "2", "newline":"true"},
{"type":"textfield", "id": "idhousebankacc", "hCells":"2", "newline":"false"},
{"type":"mylabel", "text":"Note to Payee", "hCells": "2", "newline":"false"},
{"type":"textfield", "id": "idnotetopayee", "hCells":"2", "newline":"false"},
{"type":"label", "text":"AccDeterm.Val.", "hCells": "2", "newline":"true"},
{"type":"textfield", "id": "idaccdeterm", "hCells":"2", "newline":"false"},
{"type":"mylabel", "text":"Bank Details", "hCells": "2", "newline":"false"},
{"type":"textfield", "id": "idbankdetails", "hCells":"2", "newline":"false"},
{"type":"label", "text":"Tax Type", "hCells": "2", "newline":"true"},
{"type":"textfield", "id": "idtaxtype", "hCells":"2", "newline":"false"},
{"type":"mylabel", "text":"Tax Group", "hCells": "2", "newline":"false"},
{"type":"textfield", "id": "idtaxgroup", "hCells":"2", "newline":"false"},
Later my script will read this JSON data and create kinds of UI control according to "type". (E.g textfield will create a control of sap.m.Text, mylable will create sap.m.Lable and so on. hCells is used for layout, "newline" here is just for new line)
You script may looks like below to handle JSON data:
switch(fields[j].type){
case 'mylabel':
oControl = new sap.m.Label({text: fields[j].text, layoutData: new sap.ui.layout.form.GridElementData({hCells: fields[j].hCells})});
break;
case 'label':
if (oFormElement != null){
oFormElement.setLabel(fields[j].text);
}
continue;
case 'textfield':
if (( fields[j].F4Table != "") && (fields[j].F4Table != undefined )){
var F4 = {};
F4.id = fields[j].id;
F4.F4Table = fields[j].F4Table;
F4.F4Field = fields[j].F4Field;
F4.Position = fields[j].Position;
f4fields.push(F4);
oControl = new sap.m.Input(fields[j].id, { type: "Text",
showValueHelp: true,
valueHelpRequest: function(){
for (var x = 0; x < f4fields.length; x++){
if (f4fields[x].id == this.sId){
controller.tablename = f4fields[x].F4Table;//"REEX_PAYMENT_FI_S" ;
controller.field = f4fields[x].F4Field;// "DUNNAREA";
controller.f4position = f4fields[x].Position;
break;
}
}
if (!controller.valueHelpDialog) {
controller.valueHelpDialog = sap.ui.jsfragment("REBP.Dialog.SearchHelp", controller);
//this.getView().addDependent(controller.valueHelpDialog);
}
//controller.valueHelpDialog.setModel(controller.getView().getModel("REF4"));
controller.f4scid = this.sId;
// open value help dialog
controller.valueHelpDialog.open();
},
layoutData: new sap.ui.layout.form.GridElementData({hCells: fields[j].hCells})});
} else {
oControl = new sap.m.Input(fields[j].id, { type: "Text", layoutData: new sap.ui.layout.form.GridElementData({hCells: fields[j].hCells})});
};
break;
case 'datepicker':
oControl = new sap.m.DatePicker({id: fields[j].id});
break;
case 'dropdownbox': oControl = new sap.m.Select({}); break;
case 'checkbox': oControl = new sap.m.checkBox({id: fields[j].id, text: fields[j].text, select: fields[j].select}); break;
case 'daterange': oControl = new sap.m.DateRangeSelection({id: fields[j].id, delimiter: '-', displayFormat: 'yyyy/mm/dd', change:fields[j].handlefunction});break;
case 'button':
oControl = new sap.m.Button({text: fields[j].text, layoutData: new sap.ui.layout.form.GridElementData({hCells: fields[j].hCells})});
oControl.attachPress(eval(fields[j].func));
break;
}
oFormElement.addField(oControl);
}
above code is just a sample, you can write your owns. Once create such kind of functions, you can pass the JSON data to script and generate the UI on the run time. You can use such a way to speed the PoC development or for some screens which has lots of controls but with less relationship between controls. Since the Json data is easy to create, you can easy adjust UI position or add, delete fields; add some new attribute for later enhancement. Customer can also enhance you UI via change your JSON data.(Actually you put the json data into a separate file to isolate the UI logic and UI metadata.)
2 Comments
