A Flexible View Control for XPages Part 3 – Create a Basic View
Posted: December 19, 2019 Filed under: Bootstrap, Custom Control, DataTables, Domino, XPages | Tags: Bootstrap, DataTables, Domino, XPages 2 CommentsSee the demo live
You can see the demo created in this post here. As more demos are added to demonstrate the many features of the Flexible View Control, they too will be available online.
In Parts 1 & 2 we learned about the Fexible View Control and created the configuration we needed to get started with our application.
The Data
Now, we are going to create a view from scratch utilizing a database of 2 million records comprised of used car data.
To get started I need to add the used car database to my configuration document so the View Definition XPage can read the views in this database.
As mentioned in a previous post, and as you can see above, I’m using Bootstrap (3.4) in my application for my UI framework. I’ve already created a navigator custom control:
and an XPage template I’m going to use to create all of my demo pages:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom" styleClass=""
style="overflow:hidden">
<xp:this.resources>
<xp:script src="/ssjsCCRestView.jss" clientSide="false"></xp:script>
</xp:this.resources>
<div class="level0-flex-container">
<div class="level0-flex-item">
<xc:ccNav></xc:ccNav>
</div>
<xp:panel styleClass="actionBar" id="panelActionBar" style="">
</xp:panel>
<!-- Drag ccRestView here
-->
</div>
</xp:view>
We’re going to get started with the most basic implementation of the Flexible View Control. In my used car database, I have a view xspPhilPaChevTahoe which shows all of the Chevy Tahoes in Philadelphia, PA. Normally I wouldn’t create a single purpose view like this – it’s being done for demonstration purposes only. In a database of 2M records, this view contains 70 and I’m going to display it with the Flexible View Control.
The View Definition
First, I create a View Definition and point it to the xspPhilPaChevTahoe view in the used car database and select all of the columns.
The REST Service
Next, I create the Rest Service that will be used to fetch the data. We told the View Definition to find the REST service on the restServices XPage. This is where I add mine and give it a path-info that matches the key I used in my View Definition above.
After building the application I do a quick test to make sure I’m getting data from the Rest Service:
The XPage
To create my page where I want to put my view, I create a copy of the XPage template and call it viewBasic. I also add a link to the Open button in my navigator custom control that will open this new XPage.
The Flexible View Control
Now, I’m ready to add the control to my new XPage by dragging it from the custom control palette:
After adding the custom control, take a look at the custom properties by clicking on the control and then clicking the Custom Properties on the Properties tab. There are a lot of properties (some of which have default values) which are integral to making this the “Flexible” View Control for XPages. Some of these properties get passed on to DataTables as the view is constructed.
Most importantly, there are three properties that must be set in order for the control to work properly.
Property | Description |
thisView | Unique identifier for this view. This value is used in the internals of the custom control to get a handle on this instance of the view control. |
viewKey | This value refers to the View Definition that the control will use to get its configuration and location of rest data. |
dataTableClass | A CSS class name that gets applied to the DataTable and is used to refer to the table programmatically. This value should be unique. |
On my viewBasic XPage I use the following values:
The Results
After saving and building I load my viewBasic XPage in the browser and verify I am getting the results I expect:
What we have now in our browser is a DataTable (v. 1.10.19) and all of the standard front end tools that come baked into that framework, such as filtering, sorting, etc.
Recap
The purpose of this post was to demonstrate how easy it is to quickly add a view to your application using the Flexible View Control for XPages:
- Create a View Definition.
- Create a REST Service (or reuse an existing service) that points to your Domino view.
- Add the custom control to your XPage and point it to your View Definition
Next
In the next post, I’m going to take this simple example and start adding advanced functionality to create more functional views.
Hi, thanks for posts. I am getting error when trying to do this steps on my own database. (CLFAD0246E: Exception occurred servicing request for: /ext/datatables-xpages.nsf/adminViewDefinitionDoc.xsp – HTTP Code: 500)
And another one. Can we download your demo (used_cars) database?
With regards, Dan Bobr
LikeLike
Hi Dan. Thanks for the comment. Did you create the configuration yet with adminConfig.xsp? You need to open this page first and save it before trying to create or view View Definitions. Make sure you have a doc in the vwConfig view. I’m happy to make the used car db available. However, it is very large. I will send you the design with a subset of docs. When I get a chance I will make the full copy … it will be about 1GB. Feel free to let me know if you have any more questions.
LikeLike