BonitaSoft: Custom Widget for BDM Download CSV

CSV File Download

• Create a page and add a variable of type external API.

StepForm being the name of Business Data Model whose data we are going to download in CSV format. “find” being the query in BDM that will return all field values of database.

• Create a custom widget that when used in UI designer will look like as

• Open the UI Designer window from Bonitasoft studio and click on the Create button on the left side, choose custom widget, provide it a name and click create. This will open a create widget window.Code the HTML part for the widget in a template field.

• Code the jquery part in Controller section. Complete code will look like

function ($scope){
$(".download").click(function() {
// var FileName = $("#filename").val();
var  ColumnHeading=$scope.properties.fieldName;
var JSONData = $scope.properties.pageData;
// var exclude = $("#exclude_col").val();
/* if(FileName==""){
alert("Please enter file name");
return false;
} else {
//alert($scope.properties.pageData);
$(".txtarea").html($scope.properties.pageData);
$scope.apiData =  $scope.properties.pageData;*/
JSONToCSVConvertor(JSONData,true, $scope.properties.FileName , $scope.properties.exclude, $scope.properties.fieldName);
});
//});

function JSONToCSVConvertor(JSONData,ShowLabel, FileName, ExcludeCol, ColumnHeading) {
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excludeArr  = ExcludeCol.split(",");
var excludeArrIndex = [];</code>
var CSV = '';
if (ShowLabel) {
var row = "";
for (var index in arrData[0]) {
// alert (Index);
if($.inArray(index, excludeArr)===-1){
row += index + ',';
}
}
row = row.slice(0, -1);
CSV += row + '\r\n';
}
for (var i = 0; i < arrData.length; i++) {
var row = "";
for (var index in arrData[i]) {
if($.inArray(index, excludeArr)===-1){
var arrValue = arrData[i][index] == null ? "" : '' + arrData[i][index] + '';
row += arrValue + ',';
}
}
row.slice(0, row.length - 1);
CSV += row + '\r\n';
}
if (CSV == '') {
growl.error("Invalid data");
return;
}
var fileName = FileName;
if(msieversion()){
var IEwindow = window.open();
IEwindow.document.write('sep=,\r\n' + CSV);
IEwindow.document.close();
IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
IEwindow.close();
} else {
var uri = 'data:application/csv;charset=utf-8,' + escape(CSV);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
function msieversion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie != -1 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
{
return true;
} else { // If another browser,
return false;
}
return false;
}
}

• Create a new property to link controller variable and UI designer variable, property name to be controlled variable’s name and label name which will be displayed in UI designer choose type as a collection for JSON. Here create a property for pageData that will hold the JSON data and set its type as collection

• If we want to provide the file name from UI designer then bind the variable for the file name(here variable name in the controller is FileName) in properties, with property name as a variable name in the controller and give label which will be displayed in UI designer.

• If we wish to exclude some of the column values to be downloaded in CSV file then create a variable in the controller and bind that variable in in the property by creating a new property with value as variable name.

Using this custom widget in UI designer and setting its property values as:

• The name we provide here as property value will bind to controller variables.(a)JSONData will hold the source of JSON data from where data will come.(b)ColumnExclude will hold the column headings that will be excluded in CSV file.(c)Name of File will be the name of the downloaded file with .csv as the file extension.

•  It will look like as:

• The downloaded file content will be as