Friday, February 6, 2015

Export to Excel in Gridx Table Coach View in IBM BPM

This is post will be useful for those who want to extend Grid Table from Kolban TK with Export to Excel functionality.

Gridx Table from Kolban TK has awesome functionality packed with it, but am not going in detail about all of it. You can check this by going through the bpmwiki url for Gridx Table. I would like to give details on how to customize the Gridx Table.

Before starting the customization, it is always a good idea to copy the artifacts from toolkit to your Process App . In the Export to Excel we are going to use "data-redirect.jsp", which comes out of box with IBM BPM and feed csv data from the table and export it  as excel. Here is how we do it.

Step 1:
We need to add two AMD dependencies as shown in the below figure:



AMD Module dependencies
The module, exportCSV can be used to convert table data in to a csv data and connect  is used to attach an onclick even to the button.

Step 2:
Add two configuration variables called "ExportToExcel (Boolean)" and "excelFileName (String)" in the variables tab.The variable "ExportToExcel" can be used to show/hide the Export button and the variable "excelFileName" can be used for file name, with which the file is exported. Below image shows the variables configuration.
Variables Configuration

Step 3:
Add the excel icon image to as server managed files under web category with name "export_16x16.gif". We will be using this image on the Export button.

Step 4:
Now let us customize the load script to add the code for "Export to Excel" functionality.
Search for "gridArgs.barTop" and replace the below "if" block 



with this code:


This code will display a button below the table header, on click of which the table data will be exported as excel.
Now  go to the bottom of the load script and add the below code.




We are ready with Gridx Table coach view is with "Export to Excel" functionality.

On launching the a human service with Gridx table with some data, the table in the UI will look as in the below image, with Export button at the top.


On click of the Export Button, the data in the table will be exported as an Excel sheet as shown below.

Hope this post helps !!!

Thanks for stopping by. If you like this post leave a comment, share it and do a g +1.



9 comments:

  1. I can across this site today and you guys are doing a great job. Its very difficult to find
    code snippet for IBM BPM and you guys are doing a fab job by posting the same. Please keep updating regularly so that we have a big code repository for IBM BPM.

    ReplyDelete
  2. I am facing issue in using this. I see only blank page. Can you please help me with this

    ReplyDelete
  3. Hi, Can you please help me with gridx toolkit. I am not finding exporter under modules of gridx

    ReplyDelete
  4. Hi Mukta , In the latest versions looks like the module for exporter is changed , please check this: gridx/support/exporter/toCSV

    ReplyDelete
  5. Hi Pradeep,
    I am getting an error when this.gridx.exporter.toCSV({}) is executed. It gives toCSV undefined..any idea about this?
    Rohit

    ReplyDelete
  6. HI, We are trying to incorporate import to excel functionality In a gridx table. Here we are having an issue as the gridx buttons or gridx links that we use in the gridx table are getting hidden once we add the export to excel functionality. Can you help me with this as how we can use both of those functionalities.

    ReplyDelete
  7. For the latest version, about functionality, if its not working, then on Behavior >> Event Handlers >> Load section,

    "this.gridx.exporter.toCSV({}).then(function(res){"

    Replace with
    "exportCSV(this.gridx).then(function(res){"

    ReplyDelete
  8. Thank you very much for the info. It opens with empty sheet always. Can you please let me know why?

    ReplyDelete