Skip to Content

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

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Emanuele Ricci

    You can improve this tutorial by adding following some best practice.

    First of all, you’re using oData/JSON model binding inside your table. You should never update the table rows info manually as you’re doing but you should only update the binding itself that will update the table automatically.

    Second of all, you should only update/deselect raws that have been modified (terminated) successfully.

    In this case, you have 2 scenarios:

    • You’re using OData and that info will be updated automatically (it’s not your case) and you cycle OData response records to only deselect those
    • You are using normal REST/Ajax call so you must loop through the response and check if the record has been terminated. If so you update your JSON Model and uncheck the row’s checkbox
    (0) 

Leave a Reply