Merge and Manipulate IBM Domino Server Side Generated HTML in Express using cheerio

Instructor: [00:00] One of the things you might want to do, is reuse Domino-generated HTML where you've got some complicated computed values using app formulas, or other various ways of generating HTML in Domino.

[00:11] If we take this notes form which has got some pass-through HTML on it. In here, I have a computed value field, and it has a looping at formula. What we want to do, is rather than get the data, we just want to grab this HTML and use it inside our Express application.

[00:29] The Domino Web form looks like this, it's a standard loop bootstrap template I've got. This is what I want to reuse, these three images. Inside our Express application, in our server.js file, we've installed Cheerio, which is a package used within Node.js which basically allows you to use JQuery type methods to extract and manipulate HTML.

[00:52] The first thing I am going to do is create a new root called render HTML. We're going to set it some options to get hold of the data from Domino. Our URL this time is not going to use the Domino data service. Instead, we're just going to be opening a web form.

[01:07] Our method is going to be a .get, and we'll resolve the full response. We will now make the call to Domino. The HTML we get from Domino is in the response body. We need to pass that HTML to the Cheerio library so that it can manipulate it.

[01:27] We used the Cheerio load mode method, and we can now use standard JQuery type methods. What I want to do is get hold of the card images, and then we're going to a block which has got an ID of records. If we look at the source of the HTML, we can see that.

[01:47] This is the block we want. As you can see from the source HTML, it has an ID of records on this div which contains the three images I want. If we look at the source of one of the images, we can see this is actually a relative URL to the Domino server. This will not work in our Node application. We need to include the Domino hostname.

[02:06] Using the Cheerio library, we can manipulate the source for all the images. This is the sort of thing you can do in JQuery. We should select all images within the records block, we will loop over them, and for each element, we will change its source.

[02:23] We'll add the hostname for the Domino server in front of the current source. What we're trying to demonstrate here is, not only can you get the HTML from Domino, you can also then manipulate it to however you want to use it.

[02:38] I also don't want the buttons, which are all within those cards. Again, using the Cheerio methods, and JQuery-like methods, we can remove and manipulate some of the HTML. Simply targeting four buttons within the records div, I can call the remove method.

[03:00] Finally, we're going to render this HTML out to our Handlebars. We're going to create a new template called Domino HTML, which is going to be a simple template, and we'll pass it, the HTML we got from Domino after we've modified it.

[03:17] Our new template very simply looks like this, it's a bootstrap row and column, and then, we have the HTML we got from Domino inserted in here. Note, we've got three braces inside, and you need to enter three braces if you want your Handlebars template to render HTML. Let's have a look, see what it looks like.

[03:35] We've started our server, refreshed the page, entered our new URL, and here comes the data. This data is HTML that's come from Domino, which has been created using a computed app formula. We've manipulated the HTML, we get back remove buttons, and change the image source.

[03:54] If we have a look at the image source, we can see that the URL now includes the Domino host name.