Usability enhancement with AngularJS, Kendo and JSON Filtering.

When designing data systems to be used by internal businesses, whether ERP or CRM systems, they have to be designed to be able to keep up with the fingers of professional data-entry people. These aren’t your standard internet folks who want to buy a widget on Amazon, these are people who will be putting in hundreds of orders a day. People who know every button and how many tabs it is until they need to hit the enter key and move on.

To do this, we use a lot of client-side code. We sacrifice images, graphics, fonts and even a lot of CSS in order to load JSON objects containing data that we might otherwise have had to go back to the server to get.

In this example, we have a dropdown that contains a commission type for products in an order. The commission type is recorded on the order line-item and the amount of that commission can vary by type and by customer. So customer 1 may be getting a 50% commission while customer 2 may be getting a 20% commission. However, the data-entry clerk may be able to adjust these, so we can’t just do it server side.

We use AngularJS for most of our client-side work, combined with Telerik’s Kendo objects. We’ll assume that the data is already loaded.

Here is our dropdown. We use Telerik’s module to take advantage of the faster development and more attractive look combined with the more data-centric tools of AngularJS. (Telerik is moving more and more torwards Angular, which is one reason we have chosen this direction)

Now, we’re going to assume we’ve already loaded the data into the $scope.CommissionTypes and will be setting a watch. (we could have used ng-change or ng-selected, but we’ve had problems before, so we’ll stick to what works for now)

 var loaded = false;
 var set = false;
 function getCommissionFilter(obj){ 
               return obj.commission_type_id === $scope.CommissionType;
           }

$scope.$watch('CommissionType', function () {
                if(loaded){
                if (set){
                    console.log('watched ' + $scope.CommissionType)
                    var i = $scope.CommissionTypes
                    var b = i.filter(getCommissionFilter)
                    $scope.Commission = b[0].default_commission;
                    }else{set=true}
                }else{loaded=true}
            })

So, some explaining is in order. First of all, you may be looking at loaded and set, wondering, “What in the world???”.

Well, we do a huge amount of loading after the page has completed rendering, so sometimes applying a “watch” will fire the event when it is loaded and once again after ng-model has taken the CommissionType object and set the value. Hence, loaded and set.

The CommissionTypes object has several items within it. Here’s what it looks like:

$scope.CommissionTypes = [
{commission_type_id : 1, commission_name : "Equipment", default_commission=50},
{commission_type_id : 1, commission_name : "Phones", default_commission=30},
{commission_type_id : 1, commission_name : "Internet", default_commission=10},
{commission_type_id : 1, commission_name : "Labor", default_commission=20}
]

(I just typed that, so if you’re cutting and pasting, you’ll probably need to add some quotes, etc..)

The important thing you’ll need to do is use a filter.

 function getCommissionFilter(obj){ 
               return obj.commission_type_id === $scope.CommissionType;
           }

It’s actually very simple. the “.filter” iterates through the rows in the object and returns the ones meeting the criteria.
var retval = mydataset.filter(getCommissionFilter) is a simple way of making a copy of that dataset that has only the data in your criteria. In this case, the filter is linked to the CommissionType dropdown value.

Once we get the result, we can then overwrite the commission in the form with the default commission for the commission type selected.

HERE’S where we get speed.

If you are working on a purchase order, for example, you could load ALL the items in the order into a single json object, then when hitting “next” or “previous”, you don’t even need to do an ajax call to the server, it’s just a filter.

Speed isn’t the end-all, but it sure helps.