How to Use custom HTML and JavaScript To Export Data to Excel
Hi
I have BonitaSoft BPM 7.3.1 .
I have a Custom Application Page fetching Data from an API call. The Data is displayed in a tabular format.
Now I need to export the same data as an Excel Sheet.
I need to have a button to export the Data .
I have come across several Links for this Process.
1) http://jsfiddle.net/hybrid13i/JXrwM/
2) http://stackoverflow.com/questions/16078544/export-to-csv-using-jquery-a...
3) http://jsfiddle.net/terryyounghk/KPEGU/
I am a newbie here and cannot figure out how to use these custom HTML and JavaScript in my Application page.
I have tried adding the information to a custom Widget.
HTML code in the Template and JavaScript code in the Controller section. But That doesn't Work.
Also I tried taking a TEXT field in the Page and adding the HTML Code there. Creating a JavaScript Variable .
Upon Preview, Nothing happens.
Any Guidance will be Much Appreciated.
Kindly Provide a Step by Step guide if Possible.
Also If Someone have already Created such a Page, Please share a link to download.
Thanks
Hi Dibyajit.Roy!
Try using this component:
http://ui-grid.info/
To do so, create a custom widget, in the html field, put:
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
In the Javascript field, inside the function declaration, put:
$scope.gridOptions = {
columnDefs: [
// put here the fields that yout data table has
{ field: 'name' },
{ field: 'gender', visible: false},
{ field: 'company' }
],
enableGridMenu: true,
enableSelectAll: true,
//define here the name of your exported file
exporterCsvFilename: 'myFile.csv'
exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
}
In Required angular modules field, put:
ui.grid, ui.grid.selection, ui.grid.exporter
In assets field, import this two:
https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js
https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css
At least, I recommend you to read more at http://ui-grid.info/ about this component and how to use it more efficiently.
Cheers,
Marcos Vinícius Pinto
Comments
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
Hello Sean
Thank you . I will try the New code.
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>