Gridx in XPages – Creating a Simple Grid

In the last post, I showed how to make Gridx available in an XPages application. In this post, I’ll show how to create your first Gridx grid in XPages.

Gridx Series

Gridx in XPages — Entire Series

Creating the Grid

Assuming you have already followed the steps in the last post, you are ready to create your first grid.

A Gridx grid requires the following:

  • A data store
  • A cache implementation
  • Defining grid columns
  • Defining the grid
  • Placing and instantiating the grid

The example is a very simple one with hard-coded data. The goal here is to get a grid up and running so we can build upon it in future posts.

It starts with a script tag and code that uses Dojo AMD loading to include the required modules. In the code below, the Gridx/Grid module is loaded and given the name Grid; a dojo Memory store module is loaded and given the name Memory, and a synchronous cache module is loaded and given the name Sync. The dojo.domReady! module is also loaded — this causes the script to wait until the page is ready before executing.

  require([
    "gridx/Grid", "dojo/store/Memory",
    "gridx/core/model/cache/Sync", "dojo/domReady!"
  ], function(Grid, Memory, Cache) {

First, we need to set up the data store. This example uses a Memory store to hold hard-coded data.

  var store = new Memory({
    data: [
      {id: 1, name: 'John', country: 'United States', things: 100},
      {id: 2, name: 'Bill', country: 'Lithuania', things: 57},
      {id: 3, name: 'Bob', country: 'China', things: 123},
      {id: 4, name: 'Jim', country: 'Germany', things: 154},
      {id: 5, name: 'Tom', country: 'Brazil', things: 78}
    ]
  });

Next, we need to define the column structure for the grid. The field attribute maps to the name attribute of the data store. The name attribute of the column defines the column title to display. When a width is not defined, it appears that it will take up the remaining available width.

		
  var columns = [
    {id: 'name', field: 'name', name: 'Name', width: '70px'},
    {id: 'country', field: 'country', name: 'Country'},
    {id: 'things', field: 'things', name: 'Things', width: '40px'}
  ];

Then, we need to define the grid object. The object takes the cache, data store, and column structure.

  grid = new Grid({ 
    id: "my_gridX", 
    cacheClass: Cache, 
    store: store, 
    structure: columns 
  });

Finally, we need to tell the grid where to be placed and then initialize it with the startup method.

		
  //Put it into the DOM tree.
  grid.placeAt('gridX_Here');
  grid.startup(); 

The placeAt call needs the ID of an element where the grid should be generated.

This div tag on the page provides a place. IMPORTANT: The div must have a height defined, or it will end up at 0 and you won’t see anything. (This example defines it inline, but it’s better to use CSS.)

<div id="gridX_Here" style="height:300px; width:300px;"></div>

CSS

The grid also requires a few stylesheets. This example uses the Claro theme. Those stylesheets can be loaded from the existing Dojo implementation on the server. The URLs use /.ibmxspres/dojoroot/, which tells the server to look in the root Dojo directory.

The third stylesheet is specific to Gridx and is loaded with a URL relative to the application’s WebContent directory.

  <xp:this.resources>
    <!-- Claro Theme -->
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/claro.css">
    </xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/document.css">
    </xp:styleSheet>
		
    <!-- -Main GridX Stylesheet  -->
    <xp:styleSheet href="gridx/resources/claro/Gridx.css">
    </xp:styleSheet>
  </xp:this.resources>

Full Page Source

Putting this code together with the setup code from the last post, here is the full source of my sample page:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

  <xp:this.resources>
    <!-- Claro Theme -->
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/claro.css">
    </xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/document.css">
    </xp:styleSheet>
		
    <!-- -Main GridX Stylesheet  -->
    <xp:styleSheet href="gridx/resources/claro/Gridx.css">
    </xp:styleSheet>
  </xp:this.resources>


  <xp:this.properties>
    <xp:parameter name="xsp.client.script.dojo.djConfig"
      value="modulePaths:modPaths">
    </xp:parameter>
  </xp:this.properties>

	<xp:this.beforePageLoad><![CDATA[#{javascript:// Get the relative URL up to the .nsf
var relativeUrl = context.getUrl().getPath();
var index = relativeUrl.indexOf('.nsf');
var gridxPath = relativeUrl.substring(0, index+4) + '/gridx';
	
// Write out a JS variable with the module path for djConfig
// This works around a problem of the property being improperly escaped.
// Solution by Sven Hasselbach: http://stackoverflow.com/questions/13720849/djconfig-in-xpages-escapes-values-making-the-setting-wrong
var exCon = facesContext.getExternalContext();
var response = exCon.getResponse();
var writer = response.getWriter();
writer.write("<script>\n");
// writer.write("var modPaths = {'gridx':'/Gridx_Testing.nsf/gridx'}");
writer.write("var modPaths = {'gridx':'" + gridxPath + "'}");
writer.write("\n</script>\n");}]]>
</xp:this.beforePageLoad>

  <script>
  require([
    "gridx/Grid", "dojo/store/Memory",
    "gridx/core/model/cache/Sync", "dojo/domReady!"
  ], function(Grid, Memory, Cache) {

  var store = new Memory({
    data: [
      {id: 1, name: 'John', country: 'United States', things: 100},
      {id: 2, name: 'Bill', country: 'Lithuania', things: 57},
      {id: 3, name: 'Bob', country: 'China', things: 123},
      {id: 4, name: 'Jim', country: 'Germany', things: 154},
      {id: 5, name: 'Tom', country: 'Brazil', things: 78}
    ]
  });
		
  var columns = [
    {id: 'name', field: 'name', name: 'Name', width: '70px'},
    {id: 'country', field: 'country', name: 'Country'},
    {id: 'things', field: 'things', name: 'Things', width: '40px'}
  ];

  grid = new Grid({ 
    id: "my_gridX", 
    cacheClass: Cache, 
    store: store, 
    structure: columns 
  }); 
		
  //Put it into the DOM tree.
  grid.placeAt('gridX_Here');
  grid.startup(); 

});
</script>

<div id="gridX_Here" style="height:300px; width:300px;">
</div>

</xp:view>

If you’ve include gridx in your WebContent folder as shown in the last post, you should be able to copy this source into an XPage and load a grid.

Gridx 3 - Grid

It doesn’t do anything yet, but we’ll add features soon.

Advertisements

10 responses to “Gridx in XPages – Creating a Simple Grid”

  1. Baxter Jimuk says :

    Hi, up to this point I don’t think I’ve read anywhere whether GridX work in XPiNC or not. So does it work in the Notes Client? Because from my testing it only works in the browser (I used Chrome). I’ve gone through your example 3 times to make sure it’s the same as yours but mine still doesn’t work in Notes Client. Both my Domino Server and Notes Client are 9.01 with FP2….

    • Baxter Jimuk says :

      Nevermind it works..but only if I right click the XPage that I’m working on and Preview in Notes instead of setting that page as the launch page and opening from Notes workspace..so just ignore my issue. Thanks

  2. D.R. (@drTheFirst) says :

    Hmm. I get an error: Uncaught ReferenceError: require is not defined.. can’t figure out what is the problem..

  3. Marcus Loza says :

    Hi Brad! Great Job! The the gridx xpage is presenting the error:

    The value of the property ‘require’ is null or not defined; is not a function object

    What is it wrong?

    Thanks a lot!

  4. seanshaggerty says :

    Hello Brad,

    After following the example provided in this post produces a Grid in the browser (chrome) .
    The grid has the headers “Name” “Country” “Things” , but none of the data paints into the grid.
    The body of the grid box only shows “Loading….”
    There are no load errors showing in debugger.
    Any ideas?

    Second: What is the reason for renamed the downloaded grid frolder name “gridx_1.3.9” >> to >> “gridx” ? why not just leave it alone as is?

    thx,
    s.haggerty

    • Brad Balassaitis says :

      I’ve heard from several people that newer versions of gridx don’t work when dropped in. My testing was done with 1.3.3. (I recently worked with someone to fix a similar issue and using that version allowed everything else to work.)

      The theory in renaming the folder is so that future updates wouldn’t require additional changes for loading, but it shouldn’t be a big deal either way.

  5. saurabh says :

    Hey Brad.. getting error “require is not defined” in browser console what to do?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: