Type-2 Custom Form instructions

Obsolete

The information herein describes template technology which has been replaced. See workflow technology for current custom template information. Most messages taken prior to 9-1-2015 utilize this older technology. This information is available to document these past messages.

Overview   Type-1

Creating a clone in Form Manager
Detail from Admin >> Form_Manager.

Creating a clone in Form Manager

Before a Type-2 system template can be used, it must first cloned (i.e. a private copy made). The billing_prototype (at right) is such a Type-2 system template. We have clicked the clone link next to billing_prototype and created billing_prototype_3. Note that billing_prototype_3 has delete and edit links while billing_prototype does not. That is the difference between a template clone (private copy for the account) and system template (shared by everybody).

Note that billing_prototype is rendered in strike-through text. This indicates that it will not show up on the Forms menu. You can control the visibility of any template by toggling on the name to alternate between strike-through and normal. In the case of billing_prototype, it should be left at strike-through (invisible to Forms menu).


Form Manager Advanced Editor

Form Manager Advanced Editor
Detail from Admin >> Form_Manager >> edit.
Before leaving the form manager, note that you may use the Advanced Edit Interface (shown at right) to edit the template. The top level structure of the template contains the following XML structure:

  <template>
      <html> ... </html>
      <!--control> ... </!--control>
  </template>

You can navigate up and down the tag structure, with certain limitations. The navigation does not recognize parameters and all tag at any level must be unique. A future version may lock you out of navigating into areas where limitations are broken. If you do manage to navigate into an unsupported area, avoid making any edit changes and saving them since data loss is certain.


html section edits

What lies between the <html> ... </html> tags is the html for your filled out form. There is some additional markup to assist Telephone Message Pad in editing fields. That additional markup uses undefined html tags, which according to spec are not rendered. For example, suppose you have html for an image such as:

<img src=... width=200 height=150 border=0>

Surrounding it with a tag such as t657 does not affect the visible rendering:

<t657><img src=... width=200 height=150 border=0></t657>

but allows reading out the img element uniquely (provided t657 is used nowhere else) given a method to track such tags. Note that such identification tags cannot be used interior to html elements to isolate parameters:

<img src=... width=<t657>200</t657> height=150 border=0>

      error

basically because it is illegal html as written.

!--control section edits

You would also use the Advanced Editor to edit the !--control section. However, we will defer discussing the content of the !--control section until the end of this page.

Form preview
Billing form preview from Forms >> [billing_prototype_3] >> preview.

 

Form preview

At right is an html rendering of the billing_prototype clone billing_prototype_3. Everything between the <html> ... </html> tags is rendered. Everything following the <!--control> tag is treated as a comment because <!-- ... anything opens a comment.

Virtually every visible element should be editable. However, once a logo and seller information are provided, there is little need to re-enter the same information.

Similarly, the structure of the line items could well be constant from one statement to the next and there is very little editing needed.

This preview is not perfect. For example, the preview shows rounded corners since the preview is inheriting the style sheet of its container and has no style sheet of its own. In the email client we tested with, it looks like the style sheet is ignored and that is why there is no style sheet in the template. For the most accurate rendering, you need to send to the intended email target.


Form field editing
Billing form edit from Forms >> [billing_prototype_3].

Form field editing

At right is a field editing page. The top, greyed section is filled in with who the email to to, from, and the subject line. The data in this section is not stored in the html but rather is stored in the !--control section of the template.

Below that is a segmented editor. Only the auxiliary_info_block is open for editing. Click one of the radio buttons at the left and another block is opened for editing instead. Clear the checkbox at bottom and all blocks are opened at once.

All the variable data (white background) is stored in the visible html. The segmented editor is organizing what needs to be changed and stirring away distracting markup.


Control Block Structure

Here is the !--control block for the billing_proto system template. This is the same block which produced the editing picture above.

Control Block example

There are 4 sections in the edit picture and there are enumerated in the admin/fields entry.

Under admin, there are other necessary tags. The urlent is required and fixed (for now) at msg_billing.py to indicate what program interprets the control block. The inbody field of t101 names the tag in the html section which spans the body tag. Now, in the prototype, we could have easily read the <body> ... </body> tag. However, the parser does not recognize arguments and so we have a redundant tag to allow adding arguments to the body tag. The selected tag shows which field from fields is selected and show_all records the setting of the checkbox at bottom of editor.

The email panel records the status of the greyed section in the field editing picture. The mapping is obvious from the names. The email panel is also required.

Below are four blocks with the outer tag of each corresponding to the names in admin/fields. The actual tag names chosen should have meaning to the person editing the form and must be unique. Otherwise, the names used are arbitrary and may be changed provided all instances of the name a changed at the same time. We have highlighted the currently selected name to show the linkage.

Looking within the field tags, there are other tags. Their meaning is as follows:

label Establishes the label for a field when filling out a form. Must precede definition of the field.
name Names a unique tag name which surrounds the element in the html section of document. We have used a convention of an initial letter followed by a 3 digit number. You may use your own convention or ours.
charges Provides a list of tags surrounding table elements. View the code using Advanced editing as a guide.
2col_by_col   Provides a list of 2 tags surrounding table elements. View the code using Advanced editing as a guide.