Flexible View Control for XPages – Categorized Views

HCL Digital Week made very clear the emphasis in the application development space is on “low-code”. That got me thinking about the Flexible View Control and how, at the end of the day, it really is a low-code tool to add View data to XPage applications. Just like with Domino Volt, many aspects of configuring a View with the Flexible View Control are as simple as drag, drop, and configure.

Creating a categorized View is no different. Let’s take a look at just how easy it is by creating a View of all the Ferraris listed in the used car database. Naturally, we start by creating the View Definition:

The View Definition

The View Definition being used for the demos shown in this post can be found here.

I want to categorize this View by the MODEL column. Just like we do for a Notes View, I make that the first column. Next, check off the “category” checkbox in the last column of the MODEL column row.

A couple of important notes in the above sceenshot:

  1. The column to be categorized MUST be sorted.
  2. In the image above the MODEL column is being hidden. That might seem counter-intuitive since this is the column we are categorizing, but it will make sense in a moment.

The View XPage

Link to the demo used in this post.

BEFORE adding categorization

The image above shows what the Ferraris View looks like before adding the categorization.

The image below shows what the View looks like after adding the categorization and hiding the MODEL column.

AFTER adding categorization and hiding the MODEL column

How does it work?

To create the categorization the Flexible View Control traverses the DataTable during the drawCallback phase and when a row contains a different MODEL value, a new tr node is inserted before that row to represent the category. The reason why we can hide the MODEL column is the traversal is done on the DataTable dataset, not the actual HTML of the table. After inserting the tr node a click event is applied to provide expand/collapse functionality for the category.

Let’s break down the tr node that gets added for each category:

category tr element insert for each category
  • The data-category attribute is the unique identifier for this category. This value also gets applied to all of the child rows for this category.
  • “group” classes are added to aid in referencing the category rows.
  • The data-hide attribute is used to handle expansion/collapse of the category.
  • The table cell created inside the tr node is automatically given a colspan equal to the number of cells in a non-category row.

Doing the Twist(ie)

You probably noticed in the image above that there is a “twistie” node in the tr HTML. By default this is simply a “-” to denote expansion and a “+” to denote a collapsed category. This is handled with some simple CSS:

.twistie {margin-right:5px}
.twistie-expand::before{
	content:'-';
	font-size:1.25em;
}
.twistie-collapse::before {
	content:'+';
	font-size:1.25em;
}

Adding a little more “flair” to the twistie is easy by simply overriding the CSS. For example, I’m a big fan of Font Awesome and use that for my twistie icons:

Using Font Awesome icons for twisities
.twistie-expand::before{
	font-family: FontAwesome;
	content: "\f056";
	font-size: inherit;
}
.twistie-collapse::before {
	font-family: FontAwesome;
	content: "\f055";
	font-size: inherit;
}

Expand/Collapse All

Just as in a Notes View that contains categorization, the Flexible View Control provides the ability to expand or collapse the entire View. In our demo there are two buttons at the top that are wired with this functionality:

When the control is rendered functions are created dynamically that call functions contained in the csjsCCRestView.js script library:

collapseAll : function() {
	ccRestView.groups.collapseAll(this.thisView);
},
expandAll : function() {
	ccRestView.groups.expandAll(this.thisView);
}

The code behind the buttons can then refer directly to a specific View, which we’ve named ViewBasic in the thisView property of the control for this demo:

ViewBasic.collapseAll();
ViewBasic.expandAll();

Filtering

One of the great features of DataTables is being able to enter a query in the search box and having the contents of the DataTable reduce to the records that match that query. This functionality still works when the View is categorized!

The next post will expand on the categorization functionality by introducing subcategories and a feature called “category renderers”.


4 Comments on “Flexible View Control for XPages – Categorized Views”

  1. Jeremy Braithwaite says:

    Hi Micheal, firstly have to say this is an awesome project and a real game changer for me, good job.

    One question I have is how best to deal with response documents in views, I am not sure if I have missed something in the tutorials but I am unsure how to render responses or if the control handles views with responses?

    Liked by 1 person

    • Jeremy, first off thank you for the compliment and I’m glad to hear you see the value in this project. As for your question, it’s a good one and a situation I hadn’t thought about simply because I don’t use response docs these days in my app. However, I think there is enough flexibility in the functionality of the control to help you achieve what you need to. If it were me, I would use a view that does not create the response hierarchy but still positions the response docs after the parent but with a column that identified them as responses. Then, in the control, I would use the rowCallback to provide the functionality I needed, such as indenting the response or adding a click event to the parent docs that expanded/collapsed their responses like in the Notes Client (if that is even needed). When I have a chance I will try to work up a quick demo to flesh out this proof of concept. Let me know if there is any functionality I’m missing that you are looking for with that.

      Liked by 1 person

    • Hi Jeremy – I threw together a demo that uses response docs. You can check it out here: http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewGeneral.xsp?viewdef=response-docs. I’m going to create a blog post that explains how I created it but feel free to check it out in the meantime.

      Liked by 1 person

  2. Oleg Ilin says:

    Hi Michael.
    Can you please tell me how to disable sorting icons (and sorting itself) in some columns?
    Thank you very much,
    Oleg.

    Liked by 1 person


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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s