Enable button based on a condition SAPUI5

[meenakshi_raina]

Hi Everyone,

I have a scenario where in I am using a table which has 4 columns- (Quantity column is editable). Once the user modifies the quantity and clicks on SAVE button, the 'Status' related to the material gets changed.

The 'KIT COMPLETION' button on the screen is disabled and should be enable only when all the materials have the status set as "USED". Please advice on the solution approach.

Regards

Meenakshi

[sonalika_porwal]

Hi Meenakshi,

On click of `Save` button, once your data is updated in the table, call another function which will check the values of your `Status` column. Then if all the values are USED, set the model property associated with the enabled property of your Kit Completion button as true.

var table = this.getView().byId('tableId').getItems()

// filters out the STATUS column of the table
var tableData = table.map(function(oItem){
   // assuming that you are using the default model  
   return oItem.getBindingContext().getProperty('statusPropertyName');
});

// checks if all the values are USED
var isAllStatusUsed = tableData.every( (val) => val === 'USED' )

// sets in the model property
this.getModel().setProperty('/propertyName', isAllStatusUsed );



XML View:

// Bind the property to your Button 
<Button press="onKitCompletionPress" text="Kit Completion" enabled="{/propertyName}" />

[ThorstenHoefer]

Hi,

try to get the count, based on a condition.

The button is enabled, if the count of "inactive" is equal 0

this.getCount([new Filter("Status", "NE", "USED")])
        .then(  function(pCnt){  
          _oViewModel.setProperty("/inactive" ,pCnt ); 
      } );



    getCount: function(pFilter){
      var _oModel = this.getModel();
      
      var sEntitySet = this.getView().byId("smartTable").getEntitySet();
      var sEntitySetPath = "/" + sEntitySet + "/$count";

      return new Promise(function(resolve, reject) {
        _oModel.read(sEntitySetPath,
          { 
            filters: pFilter,
            success: function(oData, oResponse){
              resolve(oData); }
          }
        );
      });
    },

[saurabh_v]

The easiest approach to achieve this could be as below:

1. Write a function in your controller which iterates through the model path which is bound to the table, and check if each row has the value 'USED' for the Status column. If yes, return true, else return false from this function.

2. On the press event of the Save button, after saving the modified data to the backend, call the function from point 1 and if it returns true, then set the model property (bound to the enabled property of the Kit Completion button) as true.