Tech Tip - Customize Views and Field Layout in HTML Notes DB Archives

If you’re familiar with (or a user of) Teamstudio Export, you’ll know that it provides an easy way to create HTML or PDF format archives of Lotus Notes databases. By default, Export will create HTML sites that resemble the look and feel of the original Notes database as closely as possible. In other words, the output archive site will include just the visible views, and will render Notes documents as if they were being viewed in the Notes client.

However, there may be times when you want to change that default behavior. For example, there may be hidden views and fields that you want to be able to view in the archive. If that sounds like you, you’ve come to the right place! In this post, we’ll talk about how to unhide hidden views and customize the way that fields are displayed in the HTML archive UI.

First though, why do we hide all of this stuff in the first place? Some Domino applications contain a significant number of views and fields that are only used by application logic. Often, these views and fields do not provide any useful information to the end-user, and impede their ability to locate relevant information. Since most users of the archive web sites that Export creates are just looking up archived data, it makes sense to present it to them in the most familiar way possible. By hiding the views that are hidden in the Notes UI, and rendering the fields as they would appear on the Notes form, we reproduce a familiar view of the data for users.

However, it is always possible to switch from the “Preview” tab to the “Data” tab, and thereby get access to the raw data in every field on the document. Export allows you to control which fields are displayed, including the order of display, and optionally provide field labels to aid with interpreting the data. You can also control which views are visible. These settings are controlled via a configuration file, which is named config.js, and is located inside the site's HTML folder (the .tse folder), at config/config.js. Documentation for the config settings, along with examples can be found in the default config.js file generated when a site is created.

The config file is a JavaScript / JSON configuration file, similar to properties files used by many modern web technologies. To allow an HTML site to be self-contained and browsed locally without the use of a web server, the JavaScript object that represents the configuration properties is registered with the application by passing it to a function ('tmsData') that is called when config.js is loaded by the browser. The default config.js file contains comments documenting this function, along with example settings that can be uncommented and modified as you wish. A basic understanding of JavaScript syntax and JSON is helpful when editing this file, but not necessary. Note that the web application must be reloaded in the browser for changes to the config.js file to take effect.

The file “config-base.js” contains default settings, and is overwritten with each HTML export. The config.js file is only created the first time an HTML export is created, and can override properties in config-base.js.

By default, views are shown in the HTML export UI if they are not hidden in Notes (i.e. the view name does not start with the character “(“), or if the view name is recognized as a “special view name” (e.g. “($Inbox)“). For special view names, Export tries to apply the same title that the Notes client uses, for example, a view named “($All)” is displayed as “All Documents,” and “($Inbox)” id displayed as “Inbox.”

The mapping of view names is provided by config-base.js in the function assigned to the property “views.filterFn“.  This function can be copied to the same property in config.js, and tweaked however you like to override the default settings.

You can control which views are displayed by explicitly listing the views to display, by providing a JavaScript function that accepts an array of available view names and returns an array of views to show, or simply by disabling the default behavior of hiding views that start with '('. The default version of config.js contains many detailed examples showing how this can be done, or feel free to contact us if you need help.

As far as controlling how fields are displayed, you can only do this for the “Data” tab in the HTML export UI. The layout of the “Preview” tab is based on the design of the form that applies to this document, so that can’t be changed. You can configure which fields are displayed for any given form, by explicitly listing the fields to display, in the desired order, by explicitly listing the fields to display along with the labels to display for each field, or by providing a JavaScript function that accepts an array of field names and returns an array of fields to show in one of those formats. Again, the default config.js file contains many different examples that show you how to do this in detail.

Bonus tip! You can toggle all the filters on or off at any time by Shift-Double-Clicking the main Export header bar. This feature can be helpful to see the full list of fields available when you’re modifying filters, without the need to save the config.js file and reload the application.

Although Export works nicely for probably 98% of cases right out of the box, it does also give you the ability to really fine tune the display to show exactly what you are looking for. For more detail on this, or if anything is not clear, click below to start a conversation with us. We love to chat!