In this series, I’m showing how Portals don’t have to be heavyweight. In Part 1, I wrote about how to make the infrastructure lighter by using cloud or IBM’s Pure System. In Part 2, I introduced the concept of using IBM’s Web Content Manager system to build very simple portlets.
A typical web page or application consists of several sections:
- Links to external files
- HTML body
In WCM, we can create an authoring template that contains four HTML fields, one for each of the sections described above. The authoring template also has a workflow associated with it so we can control the publishing of our code.
We also need a corresponding presentation template to display the page. In the second screen shot I show the presentation template I built. The template includes the four fields (Element tags). And to help the author out, I included the <style> and <script> tags in the right places. As a reminder, the presentation template will display the raw HTML to the browser.
Just as I did in part 2, I mapped the presentation template to the authoring template in my content site area. This way whenever Portal displays my code, it formats it correctly via the presentation template.
Now on to the actual code using Knockout. To enter the code for my portlet, I navigate to the site area and create a new content item using the authoring template I built. In this example, I called the authoring template “ComplexPortlet”. The third screen shot shows the content item I created with the four fields collapsed.
In the CSS field,I entered in the styles I need for alternating row colors and formatting the table. If this was a real example, I might take the CSS and include it in my theme, or I might put it into a WCM component that I could reference here. Both of these options would make the CSS reusable.
I put the link to Knockout in the HTMLHead field. I could add other items here that would normally go in and <head> section of a page.
In the body of my portlet, I want to create a table using a Knockout model for data. This makes by portlet lightweight because Knockout takes care of the heavy lifting for me.
In the first line I get the data for the table. Since this is an example, I didn’t want to create a REST service. So I just included some JSON data that would normally be returned from a service. If I had the REST service available, I could use Knockout’s REST interface to retrieve the data. The JSON data contains information about two appointments.
The final line runs Knockout’s applyBindings code when the page finishes loading. This function takes the AppointmentModel object we created from JSON and Knockout fills in the table correctly.
There you have it: a pretty nice looking portlet created through WCM and uses sophisticated Knockout features. Since the WCM portlet is already built and deployed I avoided those steps and got my business application running quickly.
I have one caution to bring up to you. Knockout and Dojo don’t get along. If you try to display this portlet on a portal page that uses Dojo, your table will be empty. In version 8.5, IBM did away with having Dojo required in the default theme. In 8.5 you can pick the standard portal theme and the ‘Lightweight” style and this Knockout example works great. In version 7 and 8, you will likely have to create a custom theme that eliminates Dojo to get this to work correctly.