One of the core features of Teamstudio Export is its ability to generate both PDF and HTML archives. These archives offer an intuitive way to browse through data initially sourced from your IBM/Lotus Notes/Domino databases. Typically, the archive sites produced by Export include all non-hidden views from the original application, along with all fields present in the exported documents. However, many Lotus Notes applications have numerous views and fields intended for application logic or live production use rather than end-user consumption, from an archive perspective. These views and fields can clutter the interface, making it harder for users to find the information they need.
Teamstudio Export offers configuration settings that allow administrators to control which views and fields are displayed in the HTML and PDF archives. This customization helps enhance the user experience by hiding unnecessary data and curating the information presented.
What are some of the benefits of using these configuration options?
Enhanced Usability: By hiding non-essential views and HTML data fields, users can more easily navigate and find the information they’re looking for.
Tailored User Experience: In the case of the HTML data tab, customizing field labels and display order helps users quickly identify and understand the data they are viewing.
Efficient Configuration: Using a single configuration file simplifies the process of managing the HTML archive's display settings.
Customizing View and Field Display
We use a configuration file called `config.js` located in the “.tse” folder of the site's HTML or PDF archive. This file, written in JavaScript/JSON, is similar to property files in modern web technologies. It allows the archive site to work without a web server by registering configuration properties with the application through the “tmsData” function. The default “config.js” file includes comments and example settings that you can easily modify as needed. You can read more about the config.js file here.
In the case of filtering views in both the HTML or PDF archives the configuration file will allow you to control which are displayed by:
explicitly listing the views to display;
providing a JavaScript function that accepts an array of available view names and returns an array of views to show;
disabling the default hiding of views that start with '('.
An example of a simple config.js file that will filter explicitly listed views is shown below:
window.tmsData('config.js', {
views: { filter: [ 'all', 'by date', 'by author'] }
});As handy as this may be, it could become tedious fairly quickly in some scenarios when dealing with complex applications with vast numbers of views. For this, we can use wildcard filtering via Javascript functions.
Hiding Views Using Wildcards
Teamstudio Export also allows the use of wildcards to manage view visibility efficiently. With wildcards, you can create a Javascript function that will filter/display only views that begin with a specific term.
Let’s say you only wanted to display all views beginning with the term 'By' within an exported document library. You'd start by adding the following to the views configuration within the config.js file:
filterFn: function(views) {
return views.filter(view => view.startsWith('By'));
}For your own use case simply replace the the value 'By' with the specific term you wish to filter. Applying our example filter to a Document Library archive would give you the following UI view setup.
Use the config.js file to apply wildcard filtering to your archive views.
Instead of specifying every view you want to display in the final PDF/HTML export, you can simplify the process using a filter function. This approach makes managing and customizing the views in the Export archive easier, saving time and effort.
Hiding Fields Within the HTML Archive
When you compare the PDF and HTML archives generated by Export, there is a slight difference in the available data. The PDF and HTML archive 'Preview' tabs represent your applications as presented to the end users via their originating forms. However, you will notice within the HTML archive you also have the 'Data' tab which displays all available fields and associated data from the original database.
Many people will use the data tab in their daily use of the archive, which may require filtering of fields to help clear the clutter and provide relevant information for the intended use.
For this, you may also use the config.js file to specify what fields, labels, and order you would like them displayed in. The configuration file allows control of which fields are displayed for a particular form by:
explicitly listing the fields to display, in display order;
explicitly listing fields to display along with the labels to display for the fields;
Providing a JavaScript function that accepts an array of field names and returns an array of fields to show in one of the above formats.
Below is an example of a simple config.js file that filters fields and defines field labels for the displayed fields:
window.tmsData('config.js', {
forms:
{
'Main Topic':
{
'fields': [
{name: 'Created', label: 'Date of publication'},
{name: 'Subject', label: 'Topic'}
]
}
}
});Multi-Archive Landing Page
Another aspect common with all archives generated by Export is the individual landing pages associated with each application, accessible via the index.html file within each archive's root folder.
You may want to simplify deployment and access to multiple HTML or PDF archives for end users without distributing multiple URLs. To achieve this, we can create a sample "lander" page in the parent directory of the HTML or PDF archives.
Example of multi-archive landing page.
This example page includes links to each "index.html" (or "indexsp.aspx" for SharePoint) file, representing Teamstudio’s legacy CRM system. Below is the code for the lander page, along with instructions on how to customize it to fit your needs.
<!DOCTYPE html><html>
<head>
<title>HTML Archive Viewer - Teamstudio CRM Databases</title>
<style>
* {font-family: arial;}
table, th, td, tr {
border-collapse: collapse;
background-color: #458bca;
margin: 0px 10px 0px 10px;
width: 99%;
font-size: 30px;
color: white;
}
th, td {
padding: 15px;
height: 50px;
}
div {
border: 1px solid #dbdbdb;
margin: 10px;
padding: 0px 10px 0px 10px;
height: 100px;
}
a:link {text-decoration: none;color:#000}
a:visited { text-decoration: none;}
a:hover {text-decoration: underline; }
a:active {text-decoration: underline;}
.div_hover { background-color: #FFFFFF; }
.div_hover:hover { background-color: #efefef; }
</style>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<table><tr><td>HTML Archive Viewer - Teamstudio CRM Databases</td></tr></table>
<div id="board" style="border: 0px; margin: 0px; padding: 0px;">
<script>
var linkArray = new Array ();
/* INSTRUCTIONS FOR SETTING THE ARRAY
The array below consists of all the information that will be displayed when this page is opened.
To use the array you will need three (3) pieces of information:
1. URL to Teamstudio Export HTML Viewer
2. Title of the Notes Database
3. Details of where the Notes database originally resided on the Domino server
These pieces of information must then be combined together, being separated by the tilde character ~
then you create as many array elements as you want, remembering to increment the array count for each new value
*/
linkArray[0] = "RmUSA_nsf.tse/index.html#/dbs/db~US Customers~office\\CRM\\RmUSA.nsf on CN=TSProd01/O=Teamstudio";
linkArray[1] = "US%20Sales%2099_nsf.tse/index.html#/dbs/db~US Sales~office\\CRM\\US Sales 99.nsf on CN=TSProd01/O=Teamstudio";
linkArray[2] = "Products_nsf.tse/index.html#/dbs/db~Products~office\\CRM\\Products.nsf on CN=TSProd01/O=Teamstudio";
linkArray[3] = "TSAssets_nsf.tse/index.html#/dbs/db~Asset Management~office\\CRM\\TSAssets.nsf on CN=TSProd01/O=Teamstudio";
linkArray[4] = "Staff_nsf.tse/index.html#/dbs/db~Staff~office\\CRM\\Staff.nsf on CN=TSProd01/O=Teamstudio";
linkArray[5] = "Phone%20ListII_nsf.tse/index.html#/dbs/db~Telephone Directory~office\\CRM\\Phone ListII.nsf on CN=TSProd01/O=Teamstudio";
linkArray[6] = "RMDocuments_nsf.tse/index.html#/dbs/db~Customer Documentation~office\\CRM\\RMDocuments.nsf on CN=TSProd01/O=Teamstudio";
var y=linkArray.length;
var strSplit;
for(x=0; x<y;x++) {
var board = document.createElement('div');
strSplit=linkArray[x].split("~");
var newDIV = document.getElementById('board').appendChild(board);
newDIV.className="div_hover";
newDIV.innerHTML = "<a href="+strSplit[0]+" target='newWindow_"+x+"'><h3>"+strSplit[1]+"</h3>"+strSplit[2]+"</a>";
}
</script>
</div>
</body>
</html>Once you have the multi-archive landing page in place, you can update it as needed when you upload more HTML/PDF archives instead of distributing individual URL Links to end users. This provides a nice, clean way to deploy all of the newly generated archives within your business.
The default archives generated by Teamstudio Export work seamlessly for most users. However, for those with specific needs, the flexible configuration options provide the ability for fine-tuning archive behavior. If you have questions about configuring Export, feel free to reach out to our technical support team. We always love hearing from our customers and are here to help!