Note : You will need to have some basic understanding of HTML to create custom views in HTML. You will also have be sensitive to HTML compatibility problems that exist between different browsers. 

The way that an HTML page for a custom view is designed is similar to the way you would generate a custom report, however because the custom view is typically more interactive than a report you would normally print out, there will be some additional functions you can use to help the user interact with the data values. 

An example of a custom view can be found in AssetChief: 

Example of a custom view HTML page 

The data input to the report depends on the type of data the view is being used to display. For a Record view, the input will be record data itself. For a List view, the input will be record sequence. Both of these are accessed through the $Root$ tag. The content between the $Root$ tag and the corresponding $end$ tag will be repeated for each record that is being displayed. Individual fields in the record can be accessed by putting the field name (not the title) in tilde characters (eg. ~Name~). 

Tip : If the value contains HTML that you want to integrate into the HTML page, you will need to prefix the name of the field with an ampersand (&). This disables formatting of the field and allows HTML tags to be displayed without modification. 

 
Any subtypes, of records or sequences, can be expanded in the HTML by inserting the name of the subtype in dollar symbols (eg. $Tasks$). All of the HTML between the subtype command and the corresponding $end$ command will be repeated for each of the records in the sequence. Any tags within those commands will be expanded according to the content of that record, and so fields (surrounded by tilde symbols) can be referenced that relate to the contained record.

In addition to subtypes, you can also put Boolean valued fields into dollar sign tags, and the text between those tags will only be expanded if that Boolean value evaluates to True. If the Boolean field name is prefixed with an explanation mark, the text will only be expanded if the value is False.

There are three special fields that can be used at the top level of the custom view template file:

~EditLink~

This is the URL to the edit page for the current record.

~DeleteLink~

This is the URL to the delete page for the current record.

~ListLink~

This is the URL to the record list page.

Functions and any DbfScript expression can also be added by putting DbfScript in tilde characters, after an equals sign. DbfScript expressions allow you to use any DbfScript command except for program control keywords (eg. if, loop, while). For example:

#BFBFBF 1.0pt;padding:9.0pt 10.0pt 9.0pt 9.0pt; margin-left:.3in;margin-right:0in'> ~=#input/Age + 20~ 
 
Also you can use DbfScript to query parts of the database and have sections of HTML repeat for each record in that sequence. To do this, put the DbfScript after an equals sign within dollar symbols, for example:

#BFBFBF 1.0pt;padding:9.0pt 10.0pt 9.0pt 9.0pt; margin-left:.3in;margin-right:0in'>$=load(&path/Comments)$ 
 
Then any text between that command and a $end$ command will be repeated for each record in the sequence returned from that command.

You can also incorporate multiple DbfScript statements, such as loops and if statements. To do this, you enter multiple lines between the two dollar symbols, and make sure the last statement is a 'return' statement that returns the sequence you wish to use. For example:

$=var #" class='hashtag' onclick="searchHashtag('seq')">#seq = new list for &path/Comments
 loop through load(&path/Comments) as #" class='hashtag' onclick="searchHashtag('rec')">#rec
     add #" class='hashtag' onclick="searchHashtag('rec')">#rec to #" class='hashtag' onclick="searchHashtag('seq')">#seq
 end loop
 loop through load(&root/TopComments) as #" class='hashtag' onclick="searchHashtag('rec')">#rec
     add #" class='hashtag' onclick="searchHashtag('rec')">#rec to #" class='hashtag' onclick="searchHashtag('seq')">#seq
 end loop
 return #" class='hashtag' onclick="searchHashtag('seq')">#seq$

In this example, we add together two separate lists into one, and then return that. Now everything up to the next $end$ will be repeated for each record in that unified list. Also note that any variables you define in these sections can be used later on in other commands.

Although described in the section on creating custom reports, the following functions are particularly useful in creating interactive custom views:

FileLink (field)

This function enables you to create a URL link to a specific file in the database, specified as a path and a field. This file can be used to display in an image, or an audio tag for example. It can also be used to create a download link.
 
ViewLink(path)

This function creates a URL link to the specified XPath.

ViewForeignLink(link)

This function creates a URL link to the path that is held in the given foreign link value.

GetSmallIconHtml(iconID, backColor)

This function is useful for integrating icons into your custom view. The icon is rendered against the specified back color (the icons have an alpha-transparent background).

Advanced Options

Sometimes your HTML may need to incorporate custom CSS files or scripts. Because the custom view is usually part of a page, and not the entire page, you don't normally have control over the head section where this CSS or scripts would go. To solve this issue you can place several special commands at the start of your custom view HTML that direct WorkflowFirst to add the CSS or scripts to the main page.

#css:file.css

This command directs WorkflowFirst to include the file.css stylesheet file in the header of the page.

#" class='hashtag' onclick="searchHashtag('script')">#script:file.js

This command directs WorkflowFirst to include the file.js javascript file in the header of the page.

#onload#
...
#" class='hashtag' onclick="searchHashtag('end')">#end#

This command block directs WorkflowFirst to run the JavaScript commands between #onload# and #" class='hashtag' onclick="searchHashtag('end')">#end# (ie. the "...") on the document load event, when the page first loads.

Note that all of this is also applicable to Web Mode pages.