Creating a sample web app using Kendo UI Builder by Progress : Creating a Web UI project : Customizing the Web UI project
  

Customizing the Web UI project

The Web UI project is populated with many directories and content that belong to the Kendo UI Builder project we created earlier.
The C:\OpenEdge\WRK\OrderEntryWebApp\app\src directory contains custom files for the OpenEdge web app and its contents are picked up automatically when we build a web app in Kendo UI Builder. Do not change any files in any other directories.
Open the \src\modules\order-entry\customer-list\controller.public.js file in the project. This file contains most sample event handlers for the OpenEdge web app. You can see default method stubs for the onShow and onRowSelect events.
Open the \src\modules\order-entry\customer-list\router-events.js file in the project. This file contains primarily the onInit and onHide sample event handlers for the OpenEdge web app. You can see default method stubs for this events.
We now add the following content to the file to add specific functions:
Function/Event
Code snippet
Functionality
onInit
onInit: function($stateParams) {
return $q(function(resolve, reject) {
console.log("onInit");
resolve({});
});
},
When the CustomerList view is initialized, the onInit message is displayed.
onShow
onShow: function ($scope, customData) {
// this.scope = $scope;

var that = this;
console.log('onShow');
try {
$scope.model.options.filterable = true;

$scope.$on('kendoWidgetCreated', function (event, widget) {
var dataSource;

console.log("Event: kendoWidgetCreated");
if (event.targetScope.vm.widget === widget) {
dataSource = event.targetScope.vm.widget.dataSource;
dataSource.bind('change', function () {
that.selectRecords(event.targetScope.vm.widget, 'MA', 'lightgreen');
});
}
});
} catch (ex) {
console.log("Exception: ", ex);
}
},
When the CustomerList view is displayed, all the rows with state= MA appears in light-green color.
onHide
onHide: function(customData) {
console.log("onHide");
},
When the CustomerList view is hidden, the onHide message is displayed in console
onRowSelect
onRowSelect: function (e) {
console.log('rowSelect', e);
try {
this.selectRecords(e.sender, 'MA', 'lightblue');
} catch (ex) {
console.log("Exception: ", ex);
}
}
When a row is selected in the CustomerList view which has state= MA then all the rows with state as MA are displayed in light-blue color.
selectRecords
selectRecords: function (grid, state, color) {
var dataSource,
data,
i,
row;

try {
dataSource = grid.dataSource;
data = dataSource.view();
for (i = 0; i < data.length; i += 1) {
if (data[i].State === state) {
row = grid.tbody.find("tr[data-uid='" + data[i].uid + "']");
row.css("background-color", color);
grid.expandRow(row);
}
}
} catch (ex) {
console.log("Exception: ", ex);
}
}
Function to support onRowSelect
After updating, the controller.public.js and router-events.js files have the following content:
/* global angular */
(function(angular) {

angular
.module('viewFactories')
.factory('orderEntryCustomerList', ['$q', function($q) {

function OrderEntryCustomerList() {
}

OrderEntryCustomerList.prototype = {

/* The resolve method could return arbitrary data,
which will be available in the "viewShowHandler" and "viewHideHandler" handler as the customData argument */

onInit: function($stateParams) {
return $q(function(resolve, reject) {
console.log("onInit");//
resolve({});
});
},

selectRecords: function (grid, state, color) {
var dataSource,
data,
i,
row;

try {
dataSource = grid.dataSource;
data = dataSource.view();
for (i = 0; i < data.length; i += 1) {
if (data[i].State === state) {
row = grid.tbody.find("tr[data-uid='" + data[i].uid + "']");
row.css("background-color", color);
grid.expandRow(row);
}
}
} catch (ex) {
console.log("Exception: ", ex);
}
},
/* "customData" is the data return by the viewInitHandler handler*/
onShow: function ($scope, customData) {
// this.scope = $scope;

var that = this;
console.log('onShow');
try {
$scope.model.options.filterable = true;

$scope.$on('kendoWidgetCreated', function (event, widget) {
var dataSource;

console.log("Event: kendoWidgetCreated");
if (event.targetScope.vm.widget === widget) {
dataSource = event.targetScope.vm.widget.dataSource;
dataSource.bind('change', function () {
that.selectRecords(event.targetScope.vm.widget, 'MA', 'lightgreen');
});
}
});
} catch (ex) {
console.log("Exception: ", ex);
}
},

/* "customData" is the data return by the viewInitHandler handler*/
onHide: function(customData) {
console.log("onHide");
},
/* Kendo event object*/
onRowSelect: function (e) {
console.log('rowSelect', e);
try {
this.selectRecords(e.sender, 'MA', 'lightblue');
} catch (ex) {
console.log("Exception: ", ex);
}
}
};

return new OrderEntryCustomerList();
}]);

})(angular);
Save and close each file.
Regenerate the OrderEntryWebApp using Kendo UI Builder. Then click Publish and choose the Debug option.
In the Servers view in Developer Studio, expand the oepas1 server instance. The oepas1 server instance displays the republish state. The modifications to the controller.public.js and router-events.js files are published. After some time, you will notice that the app, OrderEntryWebApp, is deployed on the oepas1 server instance.