Working With Selected Rows in the Editable Data Grid in the Infor CRM SLX Web client

The editable grid allows for multi-selecting rows and then clicking a button to perform an action against them. Let’s take a look at how to implement a custom button to do this.

The first thing to do is to add a new Tool to the grid. In the quickform, click on the editable grid. In the properties window, you will see at the very bottom, a property called Tools. Click into this where it says (Collection) and click the Ellipse.

The tools collection edit dialog will open. Here you can add a button on the left side. On the right side you will see the properties of the new button. In the properties, these are the important attributes:

  • Merge Control Id – here you can specify an ID on the toolbar that you want to place this control either before of after. If nothing is specified it will add the button to the far right.
  • Merge Position – specify either Before or After, to place this new button to the left or right of the specified Merge Control Id.
  • Applied Security – you can specif a secured action name to control visibilty to only roles containing that action.
  • Display in Insert – set to True if you want this to button to appear if this smart part is going to be on an insert page and you want it to display when inserting.
  • Hide condition- here you can add a javascript function to return either true or false. True hides the button and false does not. You can click the ellipse in the Hide Condition to open a window to edit the code. An example of the function mark up is like this:
  • function() { 
      if (1!=1) return true;
      else return false;
    }
    
  • Name – the ID of the button
  • On Click – the javacript function that occurs when you click the button. We’ll get into this next.
  • Tooltip – the float over tip for the button.

Writing the On Click code
Now that we know the properties, lets take a look at the On Click function. Again this is a javascript function which will run on the click action.

A couple of important things to note within the code.

  • this referes to the dojo widget of the grid. This is not just the grid but its entire implementation
  • this.grid refers to the grid component of the widget.
  • this.grid.getSelectedRowData() is a function to get which rows are selected. It returns an array of the fields collection.

The this.grid is implemented in the slxclient\js\Sage\UI\Controls\Grid.js file. You can check out that file for complete details of other functions.

To start off with let’s first check that the user selected some rows. To do this we can use the following code:

function () {
         var grid = this;
         var selectedItems = this.grid.getSelectedRowData();         
         if (selectedItems.length === 0) {
             return;
         }
}

If the array length returned by the this.grid.getSelectedRowData() function is zero we know no rows were selected and we exit our function.

Now after we checked that something has been selected we can call a function on each item. To do this we add a forEach call to a function. While this is running we also want to visually indicate this by calling grid.showLoading(). This provides the spinning wheel animation. Then once the running is complete we call grid.refresh() to reload the grid to show whatever might have changed.

function () {
         var grid = this;
         var selectedItems = this.grid.getSelectedRowData();         
         if (selectedItems.length === 0) {
             return;
         }
         grid.showLoading();
	 selectedItems.forEach(myFunction);
         grid.refresh();	
}

Now the only thing to do is to implement the “myFunction” that is called in the forEach call of the array. This being javascript we need to have this function declared before we actually use it. It is easiest just to declare this as a variable before actually calling it, like is shown here:

function () {
var grid = this;
var selectedItems = this.grid.getSelectedRowData();
if (selectedItems.length === 0) {
return;
}
grid.showLoading();
var fnFunction = function (item) {
//Do something here
};
selectedItems.forEach(myFunction);
grid.refresh();
}
[/js]
In our function we pass in a single argument “item” which is the item within the array representing the selected item.

Now in the final step we can do something like make an update using client side sdata on each row to update a value. In this example we are working with Sales Order data so we are passing into the sdata call the resource of salesOrders. We then set the selector to the current item’s $key value (the primary table ID of the Sales Order). Once we have our sdata payload defined we specify we want to perform an update. In this case we are setting a property of “UserField1” to the value “MAGIC!”. In this request we have a success and failure outcome. IN the success branch we are logging to the browser’s console a message. And in the failure we display what the failure was in a dialog. Here is that final code:

function () {
         var grid = this;
         var selectedItems = this.grid.getSelectedRowData();         
         if (selectedItems.length === 0) {
             return;
         }
         var store = grid.store;
         grid.showLoading();
         var service = Sage.Data.SDataServiceRegistry.getSDataService('dynamic');
         var myFunction = function (item) {             
             if (item) {
                 var request = new Sage.SData.Client.SDataSingleResourceRequest(service)
                     .setResourceKind('salesOrders')
                     .setResourceSelector('"' + item.$key + '"')
                     .setQueryArg('select', 'Opportunity');

                 request.update({ 'UserField1': 'MAGIC!' }, {
                     async: false,
                     success: function () {
                         console.log("We updated the row!");
                     },
                     failure: function (result) {
                         Sage.UI.Dialogs.showError(result);
                     }
                 });                                  
             }
         };
         selectedItems.forEach(myFunction);
         grid.refresh();
}
Want content like this delivered to your inbox? Sign up for our newsletter!
ABOUT THE AUTHOR

Kris Halsrud

Kris Halsrud is a Senior Analyst / Developer for Customer FX Corporation.

Submit a Comment

Your email address will not be published. Required fields are marked *