How to deselect checkbox in SAP UI5 table.

Hello folks,

In one of my app I was using sap.m.Table. This table has checkbox to select a particular row. On a click of a button after some functionality I wanted to deselect all the selected checkbox. I found this as a simple solution to do it, hope it helps you too.

In this blog I have explained on how to deselect on the press of a button but this method can also be used on any other events like on navigating to different views or on completing some backend activities the checkbox is deselected.

The xml code will be like:

<Table id=”idChartTable”
 mode=”MultiSelect”
 inset=”false” 
 items=”{ 
 path: ‘oModel>/’
 }”
 selectionChange=”onTableSelection”>
   <headerToolbar>
     <Toolbar>
        <Button id="idBtn" text="Terminate"  press="onTerminate"/>
     </Toolbar>
   </headerToolbar>
   <columns>
       <Column minScreenWidth="Tablet" id="idInstanceId">
        <Text text="Instance Id"/>
       </Column>
       <Column minScreenWidth="Tablet">
        <Text text="Subject"/>
       </Column>
       ...
   </columns>
      
   <items>
    <ColumnListItem  class="listitemclass">
      <cells>
       <Text text="{oModel2>id}"/>
      </cells>
      <cells>
       <Text text="{oModel2>subject}"/>
      </cells>
        ...
    </ColumnListItem>
  </items>
</Table>

The parameter mode=”MultiSelect” adds the checkbox, we don’t need to code anything more for it.

Now suppose onclick of button whose onPress event is onTerminate following things should happen:
i) ajax call : Calls the api from which data is fetched in the table and terminate the instance in the backend.
ii) Show a message as the instance is terminated.
iii) Deselect the terminated rows.

Controller code:

onTerminate: function(oEvent){
  var oTable = this.getView().byId("idChartTable");
  var oContext = oTable.getSelectedContexts();
  var workInstanceId = [];
  var i = 0;
  var that = this;
  oContext.forEach(function(oContextItem){
    workInstanceId.push(oContextItem.getObject().id);
   });
 workInstanceId.forEach(function(workInstanceIdItem){
    $.ajax({
     url: URL,
     method: "PATCH",
     dataType: "json",
     contentType :"application/json",
     data: "{\"status\": \"CANCELED\"}",
     headers: {
      "X-CSRF-Token": token
     },
     success: function(){
      console.log("Instance Terminated");
     }
    });
  oTable.removeSelections();
  sap.m.MessageToast.show("Work Instance Terminated");
  i++;
}

Hope this helps you.
Thanks,
Pooja