there are different types of ui controls that you can use while developing ui5 applications. these controls allow you to add a button, table, images, layout, combo box, and various other controls in ui5 application.

common control types include −

simple controls
complex controls
ux3 controls
dialogs
layout

image control

var image = new sap.ui.commons.image();
image.setsrc(“image1.gif”);
image.setalt(“alternat.text”);

combo box

you can use a combo box to provide predefined entries.

properties − items, selectedkey

var ocombobox2 = new sap.ui.commons.combobox (“combobox”,{
   items:{path:”/data”,
      template:oitemtemplate, filters:[ofilter]},
   change: function(oevent){
      sap.ui.getcore(). byid(“field”).setvalue(
         oevent.osource.getselectedkey());
   }
});

simple button control

use attachpresss assign event handler for a push action.

var obutton = new sap.ui.commons.button ({text : “click”,
   press: ocontroller.update
});

autocomplete control

to autocomplete the entered value.

var uielement = new sap.ui.commons.autocomplete({
   tooltip: ”enter the product”,
   maxpopupitems: 4
});
for (var i = 0; i<adata.lenght; i++){
   uielement.additem(new sap.ui.core.listitem(
      {text: adata[i].name}));
}

table control box

it is derived from sap.ui.table and each table contains columns.

var otable = new sap.ui.table.table({
   columns: [
      new sap.ui.table.column({
         label: new sap.ui.commons.lable({ text: “first column”}),
         template: new sap.ui.commons.textview({ text: “{firstcolumn}” }),
         width: “120px”
      })

Previous Lesson

Next Lesson