Are you sure you’ve used exactly the same line . Instead of #
Otherwise can you export and share the page so I can have a look?
Hi Sean
Here the link for the Page.
https://drive.google.com/file/d/0B-MHHSlP6-kMRWtwSlZ3SEZMWk0/view?usp=sharing
Thanks
Thanks,
I’ve just imported the page, clicked on Preview and then Clicked on the Button. The export.csv file is created and there is Data in it.
I opened it in Notepad++ and Excel and both show data from the table. However in this data there are extra invalid characters that look like new lines. I will investigate and get back to you in the morning.
regards
Yes, I saw that.
Apparently, the Cells have to be dragged and expanded for the Data to appear.
Initially I opened with Notepad++, It was empty.
Then I expanded the Cells and then reopened with Notepad++, I got the data.
Its a bit strange behavior.
I’ve updated the code to remove all unnecessary characters, the export now comes out clean…and as expected. Glad to be of service.
/**
* The controller is a JavaScript function that augments the AngularJS scope and exposes functions that can be used in the custom widget template
*
* Custom widget properties defined on the right can be used as variables in a controller with $scope.properties
* To use AngularJS standard services, you must declare them in the main function arguments.
*
* You can leave the controller empty if you do not need it.
*/
function ($scope) {
// define a function to be used in template with ctrl.toggleBackgroundColor()
this.exportTableToCSV02 = function() {
function exportTableToCSV029($table, filename) {
var $rows = $table.find(‘tr:has(td)’),
// Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(11), // vertical tab character
tmpRowDelim = String.fromCharCode(0), // null character
// actual delimiter characters for CSV format
colDelim = ‘“,”’,
rowDelim = ‘“\r\n”’,
csv = ‘"’ + $rows.map(function(i, row) {
var $row = $(row),
$cols = $row.find(‘td’);
return $cols.map(function(j, col) {
var $col = $(col),
text = $col.text().replace(/(\r\n|\n|\r)/gm,“”).trim();
//debug code to print the strings and find out what’s in there
//for(var x = 0; x< text.length; x++) {
// console.log("Character " + x + " is " + text.charCodeAt(x) + “
”);
//}
// escape double quotes and remove unwanted newlines
return text.replace(/“/g, '”“'); // .replace(/(\r\n|\n|\r)/gm,”")
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + ‘"’;
// Deliberate ‘false’, see comment below
if (false && window.navigator.msSaveBlob) {
var blob = new Blob([decodeURIComponent(csv)], {
type: ‘text/csv;charset=utf8’
});
// Crashes in IE 10, IE 11 and Microsoft Edge
// See MS Edge Issue #10396033
// Hence, the deliberate ‘false’
// This is here just for completeness
// Remove the ‘false’ at your own risk
window.navigator.msSaveBlob(blob, filename);
} else if (window.Blob && window.URL) {
// HTML5 Blob
var blob = new Blob([csv], {
type: ‘text/csv;charset=utf-8’
});
var csvUrl = URL.createObjectURL(blob);
//this trick will generate a temp tag
var link = document.createElement(“a”);
link.href = csvUrl;
//set the visibility hidden so it will not effect on your web-layout
link.style = “visibility:hidden”;
link.download = filename; //fileName + “.csv”;
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
// Data URI
var csvData = ‘data:application/csv;charset=utf-8,’ + encodeURIComponent(csv);
//this trick will generate a temp tag
var link = document.createElement(“a”);
link.href = csvData;
//set the visibility hidden so it will not effect on your web-layout
link.style = “visibility:hidden”;
link.download = filename; //fileName + “.csv”;
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
//use a default name to export - change as necessary
//if the table name in the div id= changes - you MUST change the name here also
//default is dvData
//var args = [$(‘#dvData>table’), ‘export.csv’];
var args = [$(‘.table-responsive>table’), ‘export.csv’];
exportTableToCSV029.apply(this, args);
};
}
regards
Seán
Thanks a lot Sean.
This code works like a charm.
Thanks for the Help. I appreciate it.
Hello
One drawback is the table headers dont come in the excel.
Were you able to get the table header.
Also if you have a repeatable container then this will not work. This is applicable for table only.
Hello Dibyajit.Roy
Yes you are right, I could not the table header, but at least i get only the button because i edited widget template and i only use this line:
Export Table data into Excel¨
Don´t worry about the container, it was very usefull for me.
Is it possible to get an .xlsx o .xls format?
Hi Dibyajit and Loreley2018,
No the header isn’t part of the deal. I didn’t consider it at the time and haven’t investigated it…I might have a look but can’t promise anything.
Regarding XLS or XLSX this is not possible unless you purchase other plugins etc. CSV is a fully recognised method of downloading any data to Excel. There will be no provisioning to Excel format direct.
Regards
Seán
Hello Sean.
First of all, I would like to thank you for all your Comments, Posts and answers in the bonita Community.
A lot of things make sense thanks to you… the above code works for me and has helped me several times. Its a Working model.
If you do come up with a solution to add the header in the above example, it would be great … but its no problem as of now…
Let me know if you can guide me for a similar scenario but instead of a table widget, i have a repeatable custom container with text fields to display same as a table…
Everything is same as above… except the API response variable is set as value to the container.
Again many many thanks for your valuable feedback.
Regards
Hello Sean McP !
I agree with Dibyajit, your code Its a Working model, but i need the export the headers.
Don´t worry about that, I will continue my research.
Thanks very much
Hi Dibyajit and Loreley2018
:) Happy news...
Not the most elegant but based on the previous code NOW HAS HEADERS!!!
Just replace the existing code with the following and it will work exactly the same way,
regards
Seán
function ($scope) {
// define a function to be used in template with ctrl.toggleBackgroundColor()
this.exportTableToCSV02 = function () {
function exportTableToCSV029($table, filename) {
var $rowsH = $table.find('tr:has(th)'),
// Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
tmpColDelimH = String.fromCharCode(11), // vertical tab character
tmpRowDelimH = String.fromCharCode(0), // null character
// actual delimiter characters for CSV format
colDelimH = '","',
rowDelimH = '"\r\n"',
csvH = '"' + $rowsH.map(function (i, rowH) {
var $rowH = $(rowH),
$colsH = $rowH.find('th');
return $colsH.map(function (j, colH) {
var $colH = $(colH),
textH = $colH.text();
return textH.replace(/"/g, '""'); // escape double quotes
}).get().join(tmpColDelimH);
}).get().join(tmpRowDelimH)
.split(tmpRowDelimH).join(rowDelimH)
.split(tmpColDelimH).join(colDelimH) + '"';
//console.log($rowsH);
var $rows = $table.find('tr:has(td)'),
// Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(11), // vertical tab character
tmpRowDelim = String.fromCharCode(0), // null character
// actual delimiter characters for CSV format
colDelim = '","',
rowDelim = '"\r\n"',
csvD = '"' + $rows.map(function (i, row) {
var $row = $(row),
$cols = $row.find('td');
return $cols.map(function (j, col) {
var $col = $(col),
text = $col.text();
return text.replace(/"/g, '""'); // escape double quotes
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"';
//console.log(rowDelim + $rows);
var csvS = csvH.replace(/""/,'"');
var csvT = csvD.replace(/""/,'"');
var csv1 = csvS + rowDelim + csvT;
var csv2 = csv1.replace(/""/,'"');
var csv = csv2.replace(/""/,'"');
//.concat(rowDelim, csvD.replace(/""/,'"'));
console.log("1" + csvS);
console.log("2" + csvT);
console.log("3" + csv1);
console.log("4" + csv2);
console.log("5" + csv);
// Deliberate 'false', see comment below
if (false && window.navigator.msSaveBlob) {
var blob = new Blob([decodeURIComponent(csv)], {
type: 'text/csv;charset=utf8'
});
// Crashes in IE 10, IE 11 and Microsoft Edge
// See MS Edge Issue #10396033
// Hence, the deliberate 'false'
// This is here just for completeness
// Remove the 'false' at your own risk
window.navigator.msSaveBlob(blob, filename);
} else if (window.Blob && window.URL) {
// HTML5 Blob
var blob = new Blob([csv], {
type: 'text/csv;charset=utf-8'
});
var csvUrl = URL.createObjectURL(blob);
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = csvUrl;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = filename; //fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
// Data URI
var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = csvData;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = filename; //fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
//use a default name to export - change as necessary
//if the table name in the div id= changes - you MUST change the name here also
//default is dvData
var args = [$('#dvData>table'), 'export.csv'];
exportTableToCSV029.apply(this, args);
};
}
1 Like
Hello Sean
Thank you . I will try the New code.
1 Like
Hello Sean!!
First of all, thanks a lot for your help.
I used it, but didn't export anything. I compared your codes, and i made this change>
//var args = [$('#dvData>table'), 'export.csv']; <---I comment this line
var args = [$('.table-responsive>table'), 'export.csv'];<---I added this one
exportTableToCSV029.apply(this, args);
and then i got some data, but didn't work for me, because only got the 2nd and 3rd column
Sorry
exportTableToCSV029.apply(this, args);
1 Like
Hello
I am not sure if you can generate PDF from UI Designer.
You can use Apache POI Jar files to create and display PDF files.
There are many examples for Apache POI. Check the Community.
Regards