A Flexible View Control for XPages Part 2 – Starting An Application
Posted: December 10, 2019 Filed under: Bootstrap, Custom Control, DataTables, Domino, JavaScript, jQuery, XPages 11 CommentsGet 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.
XPage.me 
Cool stuff. We are building something similar in React using the AppDevPack but the basic ideas are really similar. Great work !
LikeLike
Thank you! After seeing Knut Hermann’s presentation at CollabSphere about React views I started thinking along those lines as well. I’ll be curious to see what you come up with.
LikeLike
THX!!! I’m looking forward to continue the Part -3.
LikeLike
Hello, I’ve downloaded both from github and the link to the .nsf and followed the steps to create the config and the view definitions in your example, when I save the view definitions all I get is the ‘loading’ message on the view definitions page. On checking the web browser console I see ‘Failed to load resource: the server responded with a status of 404 (Not Found)’
I have signed the database.
tried on chrome, firefox and Edge
HTTP404: NOT FOUND – The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET – http:///datatables-xpages-source.nsf/restSevices.xsp/view-definitions?&x=x&_=1581011404743
There is a config and a view definitions document in the database.
Do you have any ideas why this is happening, thanks in advance
LikeLike
Hi David. Thanks for downloading and checking it out. Are you running locally or on a server? Based on the url in your message above it looks like the hostname is not there.
LikeLike
Also, I don’t know if it’s intentional or not, but your url has “restSevices” instead of “restServices”. So this may have been misspelled when the view-definitions View Definition was created. If so, you can delete that view definition and recreate it or update the restPage field on the view-definitions Notes document to correct it.
LikeLike
Hi Michael, thanks for the quick reply, I had included the hostname surrounded by greater than and less than characters which seems to have got stripped out of my comments.
Yes it was my silly spelling mistake that caused the problem, once I named it correctly it worked fine.
Thanks
LikeLike
Hi Michael, I am now trying to incorporate your design elements into one of our existing applications.
I have copied over all the design elements.
When I try and use the ‘Create View Definitions’ button nothing happens.
I have tried using just your theme in the XPage Properties and I have tried adding the contents of your ‘ccRestView’ Theme into the applications Theme, but neither let the adminViewDefinitionsDoc xpage appear
I have found if I comment out the following resources from the Theme I can open the adminViewDefinitionDoc.xsp, but there is a message on the web console saying ‘adminO is not defined’
http://code.jquery.com/ui/1.12.1/jquery-ui.min.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.min.js
Is there something I have missed?
Thanks,
David
LikeLike
Hi, I am just working through your demo database and everytime I try to save a View Definition (following your example DB and video), I get $ is not defined when I select the view.
It will then not let me save my View Definition. I am not sure if I have missed a step or if this is a server config Issue, but it would be nice to find out as I want to work through the rest of the steps and then perhaps look to use this
LikeLike
Hi Ian. Just dropped you an email asking for a screenshot. Thanks.
LikeLike
Hi Michael! I love your work and I like to try it on my domino server but when trying to use it I have exactly the same issue as Ian. Could you please help?
Thanks
LikeLike