Different modes of Table in SAPUI5

Hello everyone, we will learn what are different  modes available in sap.m.Table UI controls in SAPUI5 Applications. This is continuation of previous tutorial in How to create a Table in SAPUI5, please visit this if you haven’t and continue with this tutorial. So lets get started.

There are 6 predefined different modes available for Table. They are

1. sap.m.ListMode.Delete
2. sap.m.ListMode.MultiSelect
3. sap.m.ListMode.None
4. sap.m.ListMode.SingleSelect
5. sap.m.ListMode.SingleSelectLeft
6. sap.m.ListMode.SingleSelectMaster

To set the mode to the Table we have parameter called “mode”. Sample code to set mode while instantiating the table is

var oTable = new sap.m.Table("idPrdList", {   
      inset : true, // boolean
      headerText : "List of Products", 
      headerDesign : sap.m.ListHeaderDesign.Standard, 
      mode : sap.m.ListMode.None, // sap.m.ListMode     
      includeItemInSelection : false,    
    });

You can also set the mode at runtime by calling the method setMode().

oTable.setMode(sap.m.ListMode.Delete); // delete mode  
oTable.setMode(sap.m.ListMode.MultiSelect); // multi-selection of rows

Lets look at each of these modes.

1. Delete Mode :  By setting the mode items/rows in the table are enable for deletion. In UI5 you can see delete button available to delete the items like below, when you set this mode.

[adsenseyu1]

2. MultiSelect Mode: By setting this mode, a check box is created for each and every row in the table to select the multiple rows in the Table.Output in UI looks like below.

3. Node Mode: This is the default mode. By setting this mode just normal table is displayed with data.

4. SingleSelect Mode: By setting this mode, a radio button will provided at end of each and every row to select only a single row in the table. Output in UI looks like below.

5. SingleSeletLeft Mode: This is similar to SingleSelect mode, the only difference is radio button is provide at the starting of each and every row. Output in UI looks like below

[adsenseyu1]

6. SingleSelectMaster Mode: By setting this mode you can able to select the single row in the table and selected row will be highlighted but no radio button is visible. Output in UI look like below.

By now you are familiar with different modes available in Table. Set the mode as per your requirement.In our next tutorial we will explain you event handling for all these modes.

Stay tuned to us for more SAPUI5 Tutorials. Please feel free to comment and let us know your feedback.

Thank you. 🙂