EXT JS is a powerful Javascript Framework which provides a lot of visual components like Grid, forms and Windows.
The grid family is especially rich. I used it in combination with BI PUblisher XML Output in order to render data in a grid component.

Prerequisites:
EXT JS library must be installed on the same Web tiers than BI Publisher. The domain and the port must be the same but we can imagine to allow cross domain scripting. The user must be already authenticated because the JS will not ask for authentication itself.

EXT JS can use an XML reader, and we use the XML output delivered by BIP: ie:

http://localhost:7001/xmlpserver/vlrb2b/cm_vmonline.xdo?_xpf=&_xpt=1&_xdo=%2Fvlrb2b%2Fcm_vmonline.xdo&_xmode=&_paramsPORDER=*&_paramsPORD_STATUS=*&_xt=cm_items101&_xf=xml&_xautorun=true

 

 

 

 

 

 

Advantages: the component are really nice and pleasant to use. The XML output generated by BI Publisher is really suited for this approach

Drawbacks: debug seems painful !

Ext JS is a JavaScript library for building interactive web applications[1] using techniques such asAjaxDHTML and DOM scripting.

It’s quite simple to integrate a Javascript code with webcenter.
For instance, let’s consider this use case: get an XML document form a given URL, then display it at a fragment in an existing Webcenter Portal page in order to browse the content:.


Download EXT JS library. (GPL3 Licence)
Copy needed file on the WebCenter Site (on a public HTTP Virtual directory)

We take an existing example called xml-grid, then we adapt it (js file, in particular).
In webcenter, we add a HTML markup task flow, and we fill with this HTML code:

<html>

<head>

<meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-1″>

<title>XML Grid Example</title>

<link rel= »stylesheet » type= »text/css » href= »/cs/ThemeForge/extjs/resources/css/ext-all.css » />

<link rel= »stylesheet » type= »text/css » href= »/cs/ThemeForge/extjs/shared/example.css » />

<script type= »text/javascript » src= »/cs/ThemeForge/extjs/bootstrap.js »></script>

<!– page specific –>

<script type= »text/javascript » src= »/cs/ThemeForge/extjs/pmo-grid.js »></script>

</head>

<body>

<h1>XML Grid Example</h1>

<div id= »example-grid »></div>

</body>

</html>


Data sample:


The sample below is a more sophisticated sample of grid:

 

 

 

 

 

 

Others usages:
It can be useful to use BI Publisher in order to build a XML document which will be consumed with this technique.