SAP UI5 - Controls

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
      })