A Flexible View Control for XPages Part 2 – Starting An Application

Get the code

To get started using the Flexible View Control, get your hands on the code.  You can do this via two methods:

  • By pulling down a fresh database from the github repo.
  • By downloading the nsf from here.  Make sure you sign the database.

Once you have the database open in Domino Designer either locally, or on your server,  build your project.

In Part 1 of the Flexible View Control or XPages series, I gave an overview of the control and architecture of how it works.  Now we get to see it in action.

Starting with this blog post, I’m going to demonstrate many features of the FVCX by creating an application starting with the FVCX source database.  As the series moves on, I’ll be using a separate database to provide the data – a Used Car database with over 2 million records and only a couple of Notes views.  Part of demonstrating the FVCX will be sharing Notes view strategies that simplify surfacing of data not just for views, but for other components like typeaheads.

Out-of-the-box the Flexible View Control has very basic styling to make it easier to integrate with whatever UI design you want to use.  For my demos, I’m going to utilize Bootstrap.

The included theme has links to a Bootstrap CDN that are commented out.  To add Bootstrap I just unhide the css and js links.

 

Configuring the Database

Now we are ready to get started!  Keep reading below or take a look at the video to the right to see the steps below in action.

Configuration involves two steps:

  • Creating the config doc used by View Definitions (adminConfig.xsp)
  • Creating the first View Definition which is used to display all View Definitions (adminViewDefinitionDoc.xsp)

The first element we are going to work with is the adminConfig XPage.  Open this page in your browser.

The purpose of this XPage is to store some basic configuration information that is used when creating View Definitions.

  • Rest Service Path – this is the path (<dir>/<database.nsf>) where you will create rest services to retrieve data.  If you leave it blank then the control will look in the current database to find rest services.
  • Servers – The list of servers that contain databases with views you need to create View Definitions for.  This list populates a dropdown on the adminViewDefinitionDoc XPage.  Leave blank if you only need to use the current server.
  • Databases – The list of databases with views you need to create View Definitions for.  This list populates a dropdown on the adminViewDefinitionDoc XPage.  This becomes important if you are separating your data from your design.

Click the Save button.  A Notes document is created.  Verify it is there by looking in the vwConfig view.  Now, any time the adminConfig XPage is opened the created doc will be automatically loaded.

 

Creating the first View Definition

The first View Definition we’re going to create will be to display …. the list of View Definitions.  Is your head spinning yet?  From the adminConfig XPage click the Create View Definition button.

The adminViewDefinitionDoc XPage opens:

There’s quite a bit to unpack here so let’s start with the basics so we can see what the results look like.

View Definition This is the “key” for this view def and should be a unique value. It’s also a good idea to make it url friendly as we will see in future posts. I am calling this view-definitions.
Use Rest Service This value should match the “path-info” of a Domino REST Service control. This is only needed if the value above is different than the path-info of your REST service. I’m leaving this blank.
Use Rest XPage This is the XPage where the REST service for this View Defintion is located. The database comes with a restServices XPage so I enter that value here.
Load On Init When checked, this tells the control to load the view as soon as the control is loaded. Since I want my view to load right away, I select it.
Server This is the list of servers we defined on the adminConfig XPage. I select *current server*
Database This is the list of datbases we defined on the adminConfig XPage. I select *current database*.
View Since I’m creating the “View Definitions” View Definition, I choose that view. (I really didn’t want to write View Definition for a 3rd time. Crap, I did it anyway)

After selecting the View in the dropdown, all of the columns show up below. Now I can start to configure how the view will look.  For my example, I’m select all of the columns except the last one.

The FVCX database comes with an XPage adminViewDefinitions that is used to show all View Definitions in the application.  This page has the custom control already dragged onto it and configured to point to our view-definitions view def we just created:

 

When creating the View Definition above, we told it that our REST service was located on the restServices XPage:

Back to the View Definition… When I click the Save button , I’m automatically redirected to this XPage.  Here is what it looks like:

We are off and running with the Flexible View Control.  In the next post we will start working with some “real” data.


A Flexible View Control for XPages Part 1 – Introduction

In my last post, I stated I would be expanding on the topics from my session “Real World XPages” at Collabsphere 2019.

The first topic is A Flexible View Control for XPages, a custom control integrated with jQuery and DataTables that once added to your design (along with it’s companion elements) can easily be added to any XPage  and connected to back-end Domino data in minutes through a Domino REST Service or an XAgent.

 

Why was this created?

  • Frustration with the available tools in XPages for displaying view data.  Anyone that has tangled with a View Panel knows exactly what I’m talking about.
  • Efficiency in development by avoiding recreating the same code over and over again.  When I make a change to the design of this control all of the views created with it get the update immediately.
  • To minimize view overhead.  One view can be reused over and over which minimizes the number of view indexes that need to be built and maintained.  Say goodbye to creating a view just because you need to show your data sorted by a different column!

This tool has been battle-tested in production for 4-5 years with every view and embedded view in our huge XPage application utilizing this control to surface data.  Over those 4-5 years it has grown and evolved to be extremely flexible and capable of handling many different use cases.  It has been, without a doubt, the single most important piece of functionality in our application as it has been leveraged over and over again to surface data.

At CollabSphere Andrew Davis of HCL stated that “XPages is still the recommended technology in the Domino stack to modernize applications” (paraphrasing).  Obviously, this could change with Domino V11 and beyond.  But wIth the recent chatter about XPages and the desire many still have to continue creating and enhancing applications, my hope is others will find the value in this tool that I have.

How it works

  • View Definitions are the ‘wiring’ for the Flexible View Control.
  • They are stored as Lotus Notes Documents and act as the View design for the Flexible View Control.  This moves much of the management of views out of the actual design element.
  • One View can be represented many different ways with different sorting, column orders and even categorization.
  • The Lotus Notes View simply acts as a table of data served via REST services.
  • View rendering is done client side with DataTables.


 

How to get the code

The Flexible View Control for XPages is available on github:

https://github.com/michaelgsmith/datatables-xpages

Here you will find detailed descriptions of the project assets and custom control properties.  Before diving in, I highly recommend absorbing the next few blog posts which will detail and explain how to get everything set up and demonstrate how to make effective use of the control.

Note:

  • The included theme loads jQuery and DataTables from a public CDN
  • The out-of-box UI is very plain to make it easier to integrate with existing projects
  • While Bootstrap is not required, the control is already equipped to integrate with Bootstrap

 

Demos

Stay tuned for Part 2 (and beyond) where I will demo how easy it is to get the database/control setup and connected to data!