A modern commenting view in XPages

Introduction

In the old days you a typical commenting feature was something with a form and a view. Typically you could read a list of comments in a historical (flat) order and on the bottom you had the form to enter your comment. Something like in the IBM Domino blog template.

domino-blog

With the rise of social and mobile it became more important to be able to comment-only so the form moved to the top and the list of comments became sorted in the opposite order (Youtube).

Discussions are still displayed in a thread but since threads are less friendly on a mobile device a more what’app like chat display. But these are more instant messaging apps, similar to Slack or IBM’s upcoming Toscana.

slack

My idea: welcome to the bubble

So what can/should we do to modernize the display of the comment feature in our Notes/XPages application?

Well mainly we still have a top level object (TLO) where people comment on. To stimulate people to comment the form should be close to this TLO. We can promote the interaction between a user and others and provide some form of “bubble speech” experience and (ofcourse) the option to “like” a comment.

That would bring us to something more like this:

social_comment

 

Notice on the left you see the comments I have made and on the right comments made by others. The latest comment is displayed first and mines are a bit more outstanding using a background-color.

Now how it’s made

To come to this solutions I am using the following technologies:

  • XPages
  • Java
  • SSJS
  • Bootstrap
  • PrettyTime
  • CSS
  • JavaScript / mention JS

Note that in a previous post I described how to add @mention autocomplete like Facebook, Twitter & Google+ to your XPages app. So I will not discuss in this post how to build the form to comment.

Here is a general outline of what we are going to build:

outline

Step 1 – basic structure; a repeater with a panel

step01

First I have a repeat control which is bound to an ArrayList containing JsonObjects. This approach you can find in my Bildr project on OpenNTF (shameless plug).

I also added an infinite scroll function. You can read about how to set that up in this post.

The panel has a computed styleclass. The style defintion “right” does nothing more than a  text-align: right. This makes sure the text in the content is … aligned right.

Step 2 – adding a user icon

Humans are visually oriented and idle so nothing wrong making our display attractive with a user icon.

step02

In this example I am just displaying some random icons, but if you have a corporate directory with user profiles containing icons you should embed them here.

The pull-left and pull-right classes are from Bootstrap. My comments are pulled to the left, comments from others to the right.

Step 3 – the media body

Next item that we add is a div with a media-body class. It contains out of 2 sections: the content of the comment (text written) and some meta-data (date, author). I also added a “like” link which is inspired by Thomas Adrian’s Intrapages app also available on OpenNTF.

step03

(Guess I don’t need the attributes here…). Here is the part of the meta-data:

step03b

First I display the Author name, only for comments written by others. In order to make the date more human friendly to read I am using PrettyTime. In the past I have blogged about how to use it.

For the remove link I am using the userbean to check if I can delete documents in the database and if the comment is mine: (@UserName() == obj.From) && (userBean.canDeleteDocs == true)

For the event I check and ask if I am sure that I want to remove the entry and then I simply remove it by UNID:

step03c

For the “like” button I would like to point to Adrian’s example in his Intrapages project. I made however the exeption to store the likes in a separate document, so not in the comment. By this way I can tighten my security model. Everybody has the role of [liker] and author access. So everybody can update a like document and not the original comment document.

The like function uses the cookie management principles described here. It stores the username:

userCookie = new javax.servlet.http.Cookie(“userid”, @UserName());

I have set the duration of the cookie as long as the session is active:

//Cookie.setMaxAge(-1) will make the cookie expire after the browser is closed
userCookie.setMaxAge(-1);

But beware that the cookie still exists when users logout and login with a different username-password combination !!

So I have a counter for the number of likes, and depending on my activity I have a like or unlike link.

Ready! Some CSS whistles

After we have added some more (basic) CSS we are done! As a result we have created something much more modern that the old school comments display as we know from the IBM Domino Blog template.

If you are interested and want to receive the details of this setup I welcome you to send me a message and we can exchange code.

Add 20 years of experience to your workforce

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: http://www.linkedin.com/in/patrickkwinten and get in contact.

I am happy to work WITH you !

 

 

 

 

DevTip: using the latest font-awesome CSS toolkit in your XPages application

Tired off or you feel restricted by the Bootstrap Glyphicons? I bet you do. So you fancy to use Font-awesome as addition? Excellent choice. But after you have added them to your web-content folder and place them on an XPage you will notice the desired font does not appear.

Luckily for you other people have bumped into this before and allocated the problem and come with a fix.

So now you started to load the libraries your XPage application is depending on into ODP/NSF by using Bower or another package manager. If you do not specify a specific version but go for “latest” you will notice that in the suggested fix a version is specified for the font, so which each new release (which you are not aware of due to the “latest” option) your fix is out of sync.

CDN to the resque you might think. Since they handle the URL complication you are good to go as a consumer. Try to add a style sheet resource to an XPage without the http/https protocol is not allowed. If you modified it by hand in the source code like:

href=”//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css”

in the browser something as

link rel=”stylesheet” type=”text/css” href=”/apps/customerx/fontawesomecdn.nsf//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css”

will be produced which won’t work. You can add the protocol only once and you can not make the protocol conditional here.

Themes to the rescue! In a Theme design element you can check against what scheme the application runs and if so go for the corresponding protocol:

<theme>
<!– FontAwesome –>
<resource rendered=”#{javascript:context.getUrl().getScheme().equals(‘http’)}”>
<content-type>text/css</content-type>
<href>http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css</href&gt;
</resource>
<resource rendered=”#{javascript:context.getUrl().getScheme().equals(‘https’)}”>
<content-type>text/css</content-type>
<href>https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css</href&gt;
</resource>
</theme>

Here I have choosen to go against maxcdn which provides a “latest” option. If I check in the browser if delivers me

/*!
* Font Awesome 4.6.3 by @davegandy – http://fontawesome.io – @fontawesome
* License – http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/

Summary: problem solved.

  • I have the latest version of font-awesome
  • I have not an URL problem
  • I respect the protocol my application runs under

Unfortunately, my library is gone from my package manager file.

If you have a better suggestion then please drop a comment here below.

Update – Use Grunt

After writing this post I thought that their might be customers who block CDN resources. What to do then?

In Brad Ballasaitis example he created an additional CSS to overwrite the default font-family specification, one without the URL ?v= parameter.

In case you use a tool like Bower to download and install 3rd party libraries or plugins the original CSS with the URL ?=v parameter will be installed. You could write a simple Grunt task (I am new to this) that picks up your custom font-family CSS file from a temporary (fixes?) directory and copy it into the font-awesome CSS directory. A simple example would be:

/*
Copy font-awesome fix
Author Patrick Kwinten
All rights reserved
*/
‘use strict’;

module.exports = function (grunt) {

    require(‘load-grunt-tasks’)(grunt);
grunt.initConfig({
copy: {
main: {
src: ‘fixes/font-awesome-fontFamily.css’,
dest: ‘WebContent/libs/font-awesome/css/font-awesome-fontFamily.css’,
options: {
process: function (content, srcpath) {
return content;
},
},
},
}
});
};

If you run this task you are back to a state where you can now overwrite the default font-family selector again.

Load the CSS files via a Theme design element e.g.:

<!–
Not the following is not working in conjuction with the
XSP Property ‘runtime optimized resources’.

Therefor the following workaround is applied:
– Move the @font-face part into 2 new CSS e.g.
./font-awesome/css/font-awesome-fontFamily.css
./font-awesome/css/font-awesome-fontFamily.min.css

Note the paths to the fonts differ in these files.

– Load 1 of the css via the Theme based upon the context.getProperty(‘xsp.resources.aggregate’) property
–>
<resource rendered=”#{javascript:context.getProperty(‘xsp.resources.aggregate’).equals(‘false’)}”>
<content-type>text/css</content-type>
<href>font-awesome/css/font-awesome-fontFamily.css</href>
</resource>
<resource rendered=”#{javascript:context.getProperty(‘xsp.resources.aggregate’).equals(‘true’)}”>
<content-type>text/css</content-type>
<href>font-awesome/css/font-awesome-fontFamily.min.css</href>
</resource>
<resource>
<content-type>text/css</content-type>
<href>font-awesome/css/font-awesome.min.css</href>
</resource>

Add 20 years of experience to your workforce

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: http://www.linkedin.com/in/patrickkwinten and get in contact.

I am happy to work WITH you !

End of contract – a retrospect

Introduction – I am out of work !

Hi there. Recently I was informed that the company that invited me urgently to move abroad for a professional and challenging work environment was not intending to continue my contract after my trial period.

Reactions I received were ‘how sad’ and ‘probably we are less easy to work with than we intend to be’.

I guess a healthy and professional work-environment depends on the people and handling expectations, all supported by management. I do may say this has been MY WORST WORKING EXPERIENCE EVER, and this should summarize it.

However, the unsuspected decision (there has never been a discussion, so no outcome) has brought me and my family with infants in a small social nightmare. We have made a considerable investment with a transmigration, short-term high-price accommodation etcetera) based on the promises we received.

In an attempt to make this post not the saddest of all ‘I am a IBM ICS developer and looking for a job ‘ (you may reply however in case you know a job opportunity) I was thinking writing about my activities the last x months and my plans for the near future.

Log of activities

Spring Tool Suite

The last months I have been developing my first Java program in Spring Tool Suite (STS). The program runs as a service and basically it collects data from a financial service and create reports (spreadsheets) from the received data. The bit where IBM Notes plays a role is that for logging activities OpenLog is being used. For displaying the log entries I build an interface with the help of XPages.

Why STS? – Because I was told so.

What is your experience? – After programming in XPages with more and more Java (Managed beans, Java classes, External libraries, Expression Language) the learning curve was quiet steep. Luckily I got help with a patient colleague who showed and explained me a lot of ins and outs in developing in STS (Thanks!).  A lot of things that are simply to manage in JSF (e.g beans) I had to setup myself and I have been taking the existance of scope variables for granted. On the other hand the REST templates in STS work like a charm and make it easy to work with REST services.

So this project has been a good learning experience for me, although the working conditions (read: project specifications) were poor.

XPages 2.0 err 1.0

Further I have been working on XPages development by updating an existing XPages application.

When I first looked at the application I saw a load of design elements. Basically each type of document had it own large set of design elements to display information in different views, so with the help of the Dynamic Content control, some Java collections and work more with one JSON configuration file instead of losely coupled keyword documents I managed to reduce the amount of design elements dramatically.

Besides that a search interface had to be added. When I proposed to use the jQuery DataTables plugin for a more dynamic and potential search function instead of a custom form with hard-coding the dropdown boxes I was like talking abracadabra, my blog posts on the datatables plugin prove however this can be implemented fairly quick and easy.

So no chance here to introduce Managed beans, Java classes, JSON as data format for document collections, REST services, use XPages only as render engine, avoid SSJS as much as possible, avoid setting up unnecessary Notes view for delivering (slightly) different sets of data, use expression language above SSJS (when possible). So no chance to prove my skills here. Should I feel sorry for the customer?

Working on a Mac

For some it’s like nature but do you remember the time you came from a Windows environment and started working with a Mac? The last couple of months I have been working with Mac and this was also a great learning experience!

The future

So what will bring the future? From what I understand the Notes market in Sweden has been very low the last couple of years so I might have a problem here. My skills are mainly focussed on XPages development, and the expectations for this platform are very unclear (did I hear a roadmap for IBM Notes / Domino somewhere ?)(please do not post depressing comments about the prospects of this product).

The lack of updates from IBM and the limit amount of companies embracing this technology let consider me to look for alternatives.

React

I have decided to study some upcoming or rising technologies for web development and one of them I consider React. For a couple of years I have been experimenting with Angular and data residing in IBM Notes. It feels to me that Angular has more rules to follow than React (React is about the view in the MVC concept) so the latter looks more easy to start with.

Knut Herrman gave me a nice introduction on React as front-end for Domino a while ago.

So hopefully I can demonstrate soon my first “React application” to you.

Graph data modelling

The data that we live with becomes more connected so another ‘leg’ I would like to stand on in the near future is on graph data modelling. I have followed several courses for Neo4j now and been exploring the Graph db in the OpenNTF Domino API whichs allows me to build applications in an environment I feel comfortable in.

I have blogged about Graph data-modelling with Notes data in other posts so expect some more posts about this.

One thing I notice the job opportunities in this area seem to be scarce but perhaps I am looking under the wrong categories on the wrong sites.

So hire me!

I am open for all opportunities; a permanent job, a fixed contract, sub contract. Everything working with interesting technology is better than sitting at home. So if you happen to know something of interest do not hesitate to contact me.

For more information on my work experience I direct you initially to my LinkedIn profile.

 

 

 

 

 

 

Building a search function with DataTables plugin (V)

Introduction

In the last post we moved the input fields out of the table and into a separate form. In this post I will include a nice usability feature for search term highlighting. This feature is particular helpful if you allow search in columns where values do not differ so much from each other like order numbers or article numbers.

Say hello to Mark()

Mark.js is a JavaScript keyword highlighter function. You can use it as pure JavaScript or jQuery plugin.

First let me show the end-result and then we will walk through the changes:

datatables05

Modifications

In order to enable Mark I made chances to the following items:

  • webcontent folder
  • theme
  • custom stylesheet
  • xpage
  • javascript library

In the webcontent folder I included the distributed files. I included only the jQuery plugin as a resource in the Theme document:

<resource>
<content-type>application/x-javascript</content-type>
<href>mark/jquery.mark.js</href>
</resource>

In the custom stylesheet I added a class definition to distinguish the searched term with some highlight:

span.markSearched {
background: yellow;
color: black;
}

In our xpage I added the name attribute for each input element e.g. name=firstname. This attribute will be used as reference to apply the Mark feature.

The main changes take place in the JavaScript. I have written a separate function for it so we do not need to call it on loading:

$(function() {
var db = $(“#persons”).DataTable();
db.destroy();
localStorage.clear();
// Map inputs with columns (nth-child(X))
var inputMapper = {
“firstname”: 1,
“lastname”: 2,
“company”: 3,
“job”: 4
};

// Initialize DataTables
var db = $(“#persons”).DataTable({

stateSave : saveState,
fixedHeader: true,
“language” : {
“lengthMenu” : “Entries per page _MENU_”,
// “info” : “Page _PAGE_ of _PAGES_”,
“infoEmpty” : “No entries found”,
“infoFiltered” : “”
},
scrollY : yScroll,
“ajax” : “api.xsp/Persons” ,
“columns” : [
{
data : “firstname”,
“defaultContent”: “<i>Not set</i>”
},{
data : “lastname”,
“defaultContent”: “<i>Not set</i>”
},{
data : “company”
}
,{
data : “job”
}
],

// Set elements per page
pageLength: 10,
// Disable entry selection
bLengthChange: false,
// Act on table rendering
drawCallback: function() {
// Iterate over all inputs (by mapper names)
$.each(inputMapper, function(colName, index) {
// Determine the entered keyword

var val = $(“input[name='” + colName + “‘]”).val();
// Determine the column related to the input
var $col = $(“.datatables-table tbody tr > td:nth-child(” + index + “)”);
// Remove marks in related column
$col.unmark({
“element”: “span”,
“className”: “markSearched”
});
// Mark in related column
$col.mark(val, {
// Define mark.js options (see https://markjs.io/)
“element”: “span”,
“className”: “markSearched”
});
})
}
});

// Trigger table redraw on search keyword change
$(“input”).on(“keyup change”, function() {
var db = $(“#persons”).DataTable();
var $this = $(this);
var val = $this.val();
var key = $this.attr(“name”);

// Search inside DataTable column
// subtract -1 because :nth-child starts with 1,
// DataTables with 0
db.columns(inputMapper[key] – 1).search(val).draw();
});

});

In the inputMapper variable we define the input fields and their order appearance in the table.

Instead the initComplete callback we will use the drawCallback function instead. The initComplete runs once, the drawCallback runs everytime the table is redrawn, e.g. when we enter search terms. For each input element we take the entered value and match it with values in the corresponding column. When a match is found a span element with the classname markSearched is applied.

Finally we register events for the input elements so if characters are entered or removed the table gets redrawn.

Wrap up

That’s it! I hope you like this feature. I wonder how easily you could do this with a viewPanel control…

 

 

 

Building a search function with DataTables plugin

Introduction

In Domino you have multiple options how to provide a search function for an application. I have seen many examples where a FT search query is build for a database, where the form type is defined, which fields should be used in the search etcetera. Most of them are a maintenaince nightmare, layout is little flexible and usability is lacking (e.g. perform a search towards a query which will result in zero hits).

What if you make it easier to maintain, more flexible for user specific desires and add facetted search principles? A win situation?

DataTables

In the following posts I will write how to use the jQuery DataTables plugin to provide a quick search function for your Domino apps. I assume you use XPages.

Stage 1 – Getting & presenting the data

In the initial stage we just try to get and present the data we need. As example I will be using the FakeNames application. I have created a public repo which has at the moment:

  • an xpage to present the data (dtPersons.xsp)
  • an xpage (api.xsp) which will contain rest services
  • a Java class that generates the data in JSON format
  • a CSJS library to transform the HTML table on dtPersons.xsp to  DataTables object
  • the required resources from DataTables.net
  • a Theme resource to have the resources available
  • a Notes view to use as data source.

In order to create some fake documents I have set up an LS agent to do so.

If you bind this all together, you have already a search function:

datatables01

Right on top you have a search field where you can query the columns in the table. The columns are sortable too. Probably it is matching most of the search functions you have seen for Domino. But wait! There is more possible…

 

Exploring the Domino Explorer

Introduction

We live in a connected world today and also the data in your IBM Notes/Domino platform is more connected that you perhaps realise:

I work work for company X at department Y and besides my assignment as “ICS product specialist” I perform in different roles, sometimes as developer, sometimes as a solution architect, sometimes as project manager etc. I own a range of devices to do my work, bought in by different suppliers under different conditions/contracts. Now a external project-leader (they claim they are the best) has became responsible for a new project (Z since it is the final project the company is ever going to run) and to make a huge impact the project-leader want to equip his team (which I have become member of) with the latest and greatest of devices to make our work most convenient and the impact of the project delivery as huge as possible. BUT of course he is unaware about the devices the team owns already and the lifetime of the contracts. He also does not want to make top management angry so he suggest to provide this team with devices just 1 configuration level below top management. So how does the project-leader require the information he need to know (a list of end of lifetime for the current devices the project team owns compared with the list of current devices top management owns) ?

All objects in the story above (organisation, departments, employees, devices, contracts, suppliers) are represented in Notes documents. By connecting them in a Graph DB new information can be gathered!

Graph

Lately I have been exploring Graph data modelling more closely. Mostly because I see many opportunities to connect/model unstructured data in fluid ways. Faster than relational datasources sometimes can.

For now I have been mainly looking at Neo4J because most Graph related education is focussed around this product. But for IBM customers you have IBM Graph (cloud only?) and since recent IBM Notes via the OpenNTF Domino API.

Graph need NoSQL

Graph needs NoSQL databases since NoSQL is capable of describing the variety of objects that are around in enterprise data. As it turns out Lotus Notes is around as one of the first NoSQL databases!

ODA & Tinkerpop

The OpenNTF Domino API has included Tinkerpop and an implementation to store content in a graph database structure.

This is great because as Domino developer you are concerned that your data is stored in an NSF. Probably you want to avoid the hassle of moving your data to another technology first and focus on developing applications directly.

Domino Explorer

Recently Oliver Busse has released Domino Explorer. It scans the Domino Directory and the Catalog application to show the capabilities of Graph in an XPages application. Getting the Notes data into a Graph data model is done via the OpenNTF Domino API.

In the next part of this post I will focus on how this is was implemented…

Document: Exploring the Domino Explorer

This document describes the setup of the Domino Explorer (DE) application (app) available on OpenNTF (link). The DE app demonstrates the Graph db capabilities via the OpenNTF Domino API (ODA) (link).

By exploring the architecture of the app better understanding of the Graph technology is aimed to achieve and how to implement it in XPages applications.

Presumptions

It is presumed that the reader of this document has advanced level of understanding of XPages technology, intermediate level of Java programming language, medium level of understanding of IBM Notes data and low level of the graph data model.

If not turn around or educate yourself on these topics😉

Graph glossary

The view design element “graph” group it’s containing documents into the two basic units in the Graph Data Model (Graph/GDM): Edges and Vertices.

Vertices

Vertices (singular:vertex) are the objects in a graph.

Edges

Each edge has two (or in hypergraphs, more) vertices to which it is attached, called its endpoints. Edges may be directed or undirected; undirected edges are also called lines and directed edges are also called arcs or arrows.

IBM Notes data

When we translate this to IBM Notes data, vertices are mostly objects that contain values or properties (edge). E.g. a user is member of a group. An order has a date-stamp etcetera. With graph you can make queries to find different types of objects connected via shared properties e.g. A car-leasing company may have a fleet of rental-cars which may have present or past drivers.

General overview

Design elements in scope of the dissection

To have some sort of start we will start easy and give an overview of the design elements involved:

Design element Purpose Scope
Views Used to store documents that are used in the graph data model.
Documents are of type Edge or Vertex(Vertices).
X
XPages Used to initiate business logic and present the result to the user in a web interface. X
Custom controls Used to break parts of XPages into reusable pieces. X
Script libraries Client-side javascript libraries used to interact with the web presentation. X
Java Java classes that contain the business logic. X
Images Used to enhance the web presentation.
Style sheets CSS definitions used to enhance the web presentation.
Themes Use to set rules for the application regarding style, behaviour, resources
faces-config.xml Configuration file for the application, mostly used for registering managed beans.

For the rest of this document we will only focus on design elements that are marked with X under the Design elements will most likely be discussed in the logical order how the graph data model is implemented in the DE app.

Managed Beans

Managed Bean (link) is a regular Java Bean class registered by the XPages framework. Important beans registrered in the DE app for Graph are:

Bean name Class
config net.notesx.domex.controller.ConfigurationController
scanner net.notesx.domex.controller.ScannerController

Config

The ConfigurationController class controls the configuration for the GDM. It  sets which databases are in scope for the GDM (Names.nsf, catalog.nsf).

It uses the:

 

Java class Usage
net.notesx.domex.graph.GraphHelper Setup of the Graph
net.notesx.domex.graph.Configuration Configuration of the Graph

DFramedTransactionalGraph<DGraph> configGraph = GraphHelper.getGraph();

Configuration configuration = configGraph.addVertex(“configuration”, Configuration.class);

configuration.setApplicationName(applicationName);

configuration.setNamesPath(namesPath);

configuration.setCatalogPath(catalogPath);

configGraph.commit();

In the code above the Graph db is loaded and the configuration added as a Vertex.

Configuration class

The configuration class contains the following properties:

  • $$Key (??? identifier for current configuration)
  • ApplicationName (name for the application, display only)
  • namesPath (location of the names.nsf)
  • catalogPath (location of the catalog.nsf)

GraphHelper class

The GraphHelper class sets up the Graph in the following order:

  • Setup an element store for configuration
  • Add the types (Vertices) to the element store
  • Create a configuration for the Graph
  • Add the element store to configuration and set the default element store (= filepath of current database)
  • Setup the Graph by using the configuration
  • Return it

// set element store for configuration

DElementStore configStore = new DElementStore();

Database currentDatabase = Factory.getSession(SessionType.CURRENT).getCurrentDatabase();

configStore.setStoreKey(currentDatabase.getFilePath());

// setup the type

configStore.addType(Configuration.class);

configStore.addType(DXDatabase.class);

// create a graph config

DConfiguration config = new DConfiguration();

DGraph graph = new DGraph(config);

// add the config element store

config.addElementStore(configStore);

config.setDefaultElementStore(configStore.getStoreKey());

// setup the graph

DFramedGraphFactory factory = new DFramedGraphFactory(config);

DFramedTransactionalGraph<DGraph> fg = (DFramedTransactionalGraph<DGraph>) factory.create(graph);

// return the graph

return fg;

Scanner

This class adds the database, user and group objects to the Graph according the specified class for each object.

Important methods:

  • scanPeopleAndGroups
  • scanDatabases
  • scanAcl
  • scanMember

scanDatabases

  • Get the path of the catalog db via the ConfigurationController class
  • Initiate the Graph datamodel via the GraphHelper class
  • Put all documents from View $ReplicaID into a document collection
  • For each document add a vertex to the graph using the DXDatabase class
    • Set properties for the vertex
    • Commit it to the Graph
    • Run the scanAcl method for the databaseVertex object

scanPeopleAndGroups

  • Get the name of the names db via the ConfigurationController class
  • Initiate the Graph datamodel via the GraphHelper class
  • Put all documents from View $VIMPeople into a document collection
  • For each document add a vertex to the graph using the DXUser class
    • Set properties for the vertex
    • Commit it to the Graph
  • Put all documents from View $VIMGroups into a document collection
  • For each document add a vertex to the graph using the DXGroup class
    • Set properties for the vertex
    • Commit it to the Graph
    • Run the scanMember class for the groupVertex object

scanAcl

  • For the given database (vertex object) get the database object
    • Grab the ACL
    • For each ACL entry add a vertex using the DXACLEntry class
      • Set properties for the vertex
      • Add the ACL entry vertex as an Edge to the DB vertex (the label “hasAcl” will be used)
      • Commit it to the Graph

scanMember

  • For the given group (DXGroup class object):
    • For each member in groupmembers list:
      • Check if it contains a “/” ( This is a user)
        • Create a user object with the DXUser class from the Graph
        • If the user object is not null (in the Graph) add it to the group
      • If not (this is a group)
        • Create a group object with the DXGroup class from the Graph
        • If the group object is not null add it to the group
      • Set a property for the vertex
      • Commit it to the Graph

Other classes

DE contains more classes stored under several packages:

  • Common
  • Domex
    • Controller
    • Graph
    • Rest

Common package

Classes under the common package are used for setting properties for application e.g. navigation, page behaviour etc. They are out of scope for this document.

Domex \ controller package

Classes under the domex \ controller package are ConfigurationController and ScannerController and available as described earlier as managed beans.

Domex \ graph

Classes under the domex \ graph package are directly related to the Graph data model and describe the Graph data objects (vertexes):

  • Configuration
  • DXDatabase
  • DXACLEntry
  • DXGroup
  • DXUser

Each class describes the type of the object, the properties the object has and how to get & set them, the edges the object has and in which direction they go.

Annotation Description Example
@TypeValue Interface annotation for marking the Element property-value that may contain type information. @TypeValue(“DXACLEntry”)
@Property Property annotations are for getter and setters to manipulate the property value of an Element. @Property(“$$Key”)

public String getKey();

@Property(“name”)

public void setName(String s);

@AdjacencyUnique Adjacency annotate getters and adders to represent a Vertex incident to an Edge. AdjacencyUnique extends this idea to ensure that there is only one instance of an Edge with a specific label between any two specific Vertices. This allows the user of the graph to call an “add” method and return the existing adjacency if it already exists. @AdjacencyUnique(label = “hasAcl”, direction = Direction.OUT)

public Iterable<DXDatabase> getDatabases();

Below is as example of the definition of the DXUser.java class:

package net.notesx.domex.graph;

import org.openntf.domino.graph2.annotations.AdjacencyUnique;

import org.openntf.domino.graph2.builtin.DVertexFrame;

import com.tinkerpop.blueprints.Direction;

import com.tinkerpop.frames.Property;

import com.tinkerpop.frames.modules.typedgraph.TypeValue;

@TypeValue(“DXUser”)

public interface DXUser extends DVertexFrame {

@Property(“$$Key”)

public String getKey();

@Property(“username”)

public String getUserName();

@Property(“username”)

public void setUserName(String s);

@AdjacencyUnique(label=”member”, direction=Direction.OUT)

public Iterable<DXGroup> getMembershipInGroups();

}

The GraphHelper class is described earlier in this document and is used to setup the Graph.

Domex \ Rest package

The classes under the domex \ rest package create collections of json objects for the objects in the Graph data model. Some classes take in parameters, some don’t. Each class defines what type of graph object is in scope.

The way these classes are initiated is as follow:

  • On XPages rest service(s) of type customRestService are defined. The servicebean property directs to which class the service is bound to.
  • The XPage contains JavaScript libraries.
    • In a library can be defined which rest service should be called when the document is ready e.g. to build a collection of database objects.
    • In a library can be defined which rest service should be called when a link is being clicked e.g. a row in a data table control and if a parameter should be send (e.g. the replica Id of the database). Also is defined what should be done with the data returned from the rest service.

XPages

The design elements described above come together in the XPages design elements. We will demonstrate by describing an XPage.

Alldbs.xsp

Elements:

Type Name Purpose
Custom Control _layoutBS3 Reusable layout for application.
JavaScript library alldbs.js Calling Rest Services.

On document ready: data

On click table row: acl

Rest service control Pathinfo: data Bound to Java class net.notesx.domex.rest.AllDatabasesService
Rest service control Pathinfo: acl Bound to Java class net.notesx.domex.rest.AclService
HTML table datatable Placeholder for result from rest service under pathinfo data
Div acl Placeholder for result from rest service under pathinfo

XPage logic explained

On document ready:

  1. When the document is ready an AJAX call is made to the rest service under pathinfo data. This initiates Java class net.notesx.domex.rest.AllDatabasesService.
  2. The class gets the Graph data model and collects all objects/vertexes of the type specified in the DXDatabase class.
  3. For each vertex a JsonJavaObject is created which is being filled by properties from the vertex.
  4. Each JSON object is a JSONJavaArray.
  5. The array returned to the rest service which returns it to the AJAX call.
  6. When the data is returned the HTML table is updated. Note that the table is of type datatable. This is a Bootstrap plugin. When the data is returned to the datatable object it knows how to update the content (rows and columns) of the table.

Below you find the process visualize:

Screen Shot 2016-05-16 at 11.09.02

When clicking a row:

  1. When the document is ready a listener is registered for each time a table row (TR) element is clicked.
  2. When such a TR is clicked an AJAX call is made to the rest service available under pathinfo acl. As data the replicaid value is send with the call. This value is stored in the data-set for each row.
  3. The AJAX call initiates class net.notesx.domex.rest.AclService. Here with the value of the given request parameter replicaid once again the Graph datamodel is opened and searched for the DXDatabase vertex that has a matching replicaid property.
  4. The returned vertex is bound to the DXDatabase class (name = db).
  5. If the DXDatabase is not null a collection is setup of type Iterable and filled with objects of type DXACLEntry for each item from the method db.getACLEntries.
  6. Then the collection is walked through and for each item a JSONJavaObject is created and filled with properties from the DXACLEntry object.
  7. The JSONJavaObject is placed in a JSONJavaArray. This array put as a string in a new JSONJavaObject which is returned to the rest service.
  8. The rest service returns the data back to the AJAX request.
  9. The AJAX request clear the DIV with id acl and fills it with the data received from the rest service. For each JSON object in the array a line with values is written in the DIV.

The process is visualized below:

Screen Shot 2016-05-16 at 11.11.07

The processes described above are the most basic types. The Graph is called for basic objects, not correlated.

As a result the following information is displayed on your screen:

Screen Shot 2016-05-16 at 11.17.13

Summary

Perhaps you are thinking: what the fuzz?! I can do something similar with document collections, perhaps showing a single category from a categorized column or perhaps create a jsonarray containing jsonjavaobjects and iterate through them and find a match.

Perhaps you can for THIS example. But I rather would avoid to create an unnecessary amount of design elements for it. Also in this example a very basic query is performed. Rethink the story in the beginning of this post. How are you gonna search your data under those conditions?

Also the combination to display your result data with the DataTables plugin you can build on the fly custom tables and reduce the amount of Notes views to a minimum.

In a future post I will describe more enhanced queries. Stay “connected”!

Links of interest

 

 

Stress testing with ODA Graph

I am very interested in Graph data modelling and with the Graph capabilities in OpenNTF Domino API I decided to setup some demo environments just to get my head around the subject and how you can implement it in XPages and use Notes data.

To my opinion reading Notes data in the Graph database structure can bring interesting new opportunities, far beyond what we can deliver with Views and Collections today.

Oliver Busse has provided a great starting point with his SUTOL demo application so I started with that one.

Besides the implementation and Graph capabilities I am also curious about performance.  So I run some tests on my working demo app. With the help with a simple agent I decided to be gentle and create a set of only 20.000 user documents.

The first test was about returning user profiles (nodes) matching certain properties (relations), presented in a repeat control. Below the list the time to load the filtered set is displayed.

stress01

stress02.JPG

When I compare the result with a normal view filter (by category or FT search) the results where a bit disappointing.

I also noted that navigating through the list was very slow (20 seconds or more returning a new set of rows of 10 documents). More than I expected I received timeouts.

stress03

The reason for this performance is still unknown. I guess there is no index created yet for the user node in the graph db structure. Why navigating through the list is so latent in performance is also a mysterie.

Nevertheless, my demo is up and running so expect more results on Graph in XPages with Notes data in the future on this blog.

Below are sampels of performance using the “traditional” FT search filter capacity in Notes. Notice the difference.

stress04.JPG

stress05.JPG

I would like to thank Oliver Busse for his guidance getting the demo app up and running and for explaining some basic concepts of the implementation.

 

 

 

 

I’ve got the bower

As I am trying to get my XPages development workflow more in line with other development teams, my next step was to implement bower so I can skip dragging, copying, removing, updating (too many verbs already) in order to manage my projects.

First stop was Frank van der Linden’s post on bower4xpages. Most of the commands are described in his post so I skip to repeat them here..

Step 1 – Install Node.js

You can install bower with the Node package manager.  So step 1 was to install Node.

Step 2 – Install Bower

With the node package manager I installed bower.

Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.

Step 3 – Setup the bower files

When Bower runs it needs 2 files: bower.json and .bowerrc file. In the json file you list the dependencies and the rc file points to the location where the files will be copied to. Here is a tip how to create a nameless file in notepad.

Having placed these files in the root of my repository location I was ready for the next step.

Step 4 – Install Git

Since I have been using SourceTree as Git client for Windows I needed to install Git client because Bower makes use of it.

Post Step 4 – Set Windows Environment Variables

When trying to run bower I got message that Git was not installed. Here is a description how to set your Windows environment variables.

Step 5 – Run bower run

Now with everything installed and set the last thing to do was to open the Command Prompt and cd to the root directory of my repository and run the ‘bower install’ command.

As a result I got all the dependencies in my project downloaded and installed.

bower_result

Once again achieved “a new(er) way of working”.

We have a release

Hahaha no not a date for Domino-next but last week I received a message from OpenNTF’s IP Manager that my Bildr project is finally released.

Quite interesting to learn about all those licenses and what consequences one might have for your project.

I thank Peter Tanner for his patience and assistance!

Next step perhaps setting up a video how to quickly install the project on your Domino server…