xPage export to excel using JavaScript




xPage -Client Side JavaScript Export to Excel :   XPage has lots of good unknown features that will definitely help us to derive our required functionality.
So now we will see the hidden trick of xPage, we will see the Export to excel functionality in simple JavaScript.

But before that, will explain you the hidden tricks on xPage. xPage has unique powers that always generates a unique component ID for each element on xPage, so here we are going to use that xPage feature to export the current viewpanel visible documents to excel.

This example only exports the current visible documents from xPage viewpanel, below you can see the pager with a count of 2 for a navigation (Refer Screenshot I) , but with this trick we can export only current visible documents on page 1, i.e. 5 documents but letter on will also show you how to export all documents from viewpanel . Let’s see the below example

Example: export to excel on visible documents using JavaScript. 

Steps to add your export to excel code:

1.   Open /create new xPage with control embedded “viewPanel”.

2.   Add your view to view data palate with fields that you want displayed on viewpanel, we have added 5 columns.

3.   Add button to export all visible documents on page 1 i.e. 5, we have added “Export visible documents” button above the view.

4.   Now write down the below simple client side JavaScript code, on “Export visible documents” button “OnClick” event using  client side JavaScript.
Refer below screen shot.
Screenshot I:

In above screen shot there are 5 columns and five entries, we are now considering entries from first page only 

Refer below screen for client side java script –


Screenshot II:

Explanation :

var viewPanelID="view:_id1:viewPanel1"
// the view panel Id from your xPage
var htmltable= document.getElementById(viewPanelID);     
 //if you look it on view page source you will get an idea that “view:_id1: viewPanel1” is     considered as HTML table id on the actual webpage.      So it’s very easy to pick the values from table rows.
var html = htmltable.outerHTML;
// its generates the outer HTML body of view:_id1:viewPanel1 ID table.
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html));
// important line for export to excel functionality, window.open will open a new excel file in new window using encodeURIComponent, it’s encodes the HTML page as we know and the second is the content type keyword 'data: application/vnd. ms-excel’ is used to define the file type as excel


List of browsers that supports to content type property:
1.   Chrome
2.   Firefox
3.   Safari
5.   Opera


Result:
Click on export to excel button and find the result, below is the result screen shot from excel application.
Screenshot III:




All columns exported as per the viewPanel columns on xPages. First name, Last Name,   DOB, City, Country.
This is a simple export to excel method using JavaScript and we think this is not foolproof export to excel as you can see there are some limitations for browser dependency also we can export documents on first navigation only, but yes, you can adjust your logic, if you are supporting only the listed browsers also you can use this code after some sort of search result that returns the minimal count or documents that you want export.
If you want foolproof export to excel then we achieve it from our lovable Lotus Script, yes trough Lotus script and of course Server Side JavaScript.
Conclusion:
xPages has own unique id for each elements /components  , that can be utilized anywhere as we did it for export to excel.
Also some more topics listed below on export to excel –












No comments :

Post a Comment

Leave A Comment...

Subscribe to: Post Comments ( Atom )