Training Guide: HTML

This guide takes a finished form from the Build tab into OnBase: reading the HTML, saving it, importing it as an HTML form template, testing it, and keeping its design file for later changes. Allow about 30 minutes, plus time in your OnBase Test system. Finish the Build and Preview guide first.

Chapter 1: What the HTML tab gives you

The HTML tab turns the form on your Build tab into two things: the HTML file OnBase uses, and a design file Keyform Studio uses to reopen the form.

Part	What it is	Who uses it
HTML code (left)	A complete, self-contained HTML page: the form, its styling and a small validation script	OnBase, as an HTML form template
Put it in OnBase (right)	The import steps, with your form's Document Type filled in	You
Design file (right)	The form's layout and bindings as JSON text	Keyform Studio, to reopen and change the form
Summary line	How many keyword fields, the file size, and any problems still open on the Build tab	You, as a last check

The HTML is regenerated every time you open the tab, so it always matches the Build tab.

Chapter 2: Read the generated HTML

You don't need to edit the HTML, but knowing its four parts helps you check it and explain it to your OnBase administrator. Keyword field names are highlighted in the code.

The comment at the top names the form, the date it was generated, its Document Type and the naming rules.
The style block sets the look: fonts, spacing, your button colour, and the phone layout.
The form holds one block per field. Each input's name tells OnBase where the value goes.
The script at the bottom checks required fields in older browsers that can't do it themselves.

How field names work

Name in the HTML	Meaning
`OBKey_Vendor_Name_1`	Save to the keyword Vendor Name, first instance. Spaces and symbols in the keyword name become underscores.
`OBKey_Vendor_Name_2`	The second instance of the same keyword, when a form saves it twice
`local_Notes_for_AP`	Not a keyword. The value stays on the form only.
`OBBtn_Submit`	The submit button

The OBKey_ pattern is the standard OnBase HTML form convention. Button names and some rules vary by OnBase version, so confirm them against the E-Forms Module Reference Guide for yours.

Example: one field as generated

<div class="ob-f ob-half">
  <label for="fld_k3j9x2a">Vendor name<span class="ob-req">*</span></label>
  <input type="text" id="fld_k3j9x2a" name="OBKey_Vendor_Name_1" maxlength="80" required="required" data-required="1" data-label="Vendor name">
</div>

The maxlength of 80 comes from the keyword's length in OnBase, so people can't type more than the keyword can store.

Chapter 3: Copy and save the HTML file

Check the summary line above the code. If it mentions problems, go back to the Build tab and clear them first.
Select Copy HTML. A Copied message appears.
If your browser blocks the clipboard, the code is selected for you instead; press Ctrl+C (Cmd+C on a Mac).
Open Notepad (Windows) or TextEdit in plain-text mode (Mac), paste, and save the file with a .htm ending, for example AP-Invoice-Intake-v1.htm.
Choose UTF-8 as the encoding if asked, so accents and symbols survive.

Put the version in the file name (v1, v2) so you always know which file is live in OnBase.

Chapter 4: Import the form into OnBase

An OnBase administrator imports the file as an HTML form template and links it to its Document Type. The menus differ between OnBase versions, so use these steps as a checklist alongside the E-Forms Module Reference Guide for your version.

Before you start

Your OnBase system is licensed for E-Forms (HTML forms). Your administrator can confirm this.
You're working in a Test system, not production.
The Document Type and every bound keyword exist in that system with the same names as in Keyform Studio.

Steps

Open OnBase Configuration, or OnBase Studio if your version manages forms there.
Import the .htm file as an HTML form template.
Link the template to the Document Type shown in the Put it in OnBase panel, for example AP - Invoice.
Make sure the user groups who will fill in the form can create documents of that Document Type.
If submitted forms should start a Workflow, check that the Document Type feeds the right Life Cycle.
Save, then refresh or restart the OnBase client so it picks up the new template.

If the keyword names in your Test system differ from the ones in Keyform Studio, stop and fix the bindings on the Build tab first; a mismatched name is silently ignored.

Chapter 5: Test the form in OnBase

Test in each client your people use, because the Unity Client and the Web Client can use different browser engines.

In the OnBase client, create a new form of the Document Type, for example AP - Invoice.
Check the layout: headings, half-width pairs and help text look as they did on the Preview tab.
Submit with a required field empty. The form should stop and name the field.
Fill in every field with test values and submit.
Open the new document and its keywords. Compare each keyword value with what you typed, using the Preview tab's What OnBase receives list from the same values as your reference.
Check that the unbound field, such as Notes for AP, is not stored as a keyword.
If the Document Type starts a Workflow, check the document arrived in the first queue.

Record the result

Check	Unity Client	Web Client
Layout matches the preview
Required fields stop the submit
Every keyword saved correctly
Unbound fields not saved as keywords
Workflow started, if used

Chapter 6: Keep and reopen design files

The HTML file can't be reopened in the Build tab; the design file can. Keep one next to every form you put into OnBase.

Save the design file

On the HTML tab, select Copy design file.
Paste it into a new plain-text file and save it with the same name as the HTML plus .json, for example AP-Invoice-Intake-v1.json.
Store both files together: a shared folder or, better, a source control repository your team uses.

Reopen a form

Finish or save whatever is on your Build tab, because opening a design file replaces it.
On the HTML tab, paste the design file's text into Open a design file.
Select Open, then select it again to confirm.
Go to the Build tab: the form is back, with every binding and setting.

Chapter 7: Change a live form

Change a form by editing its design in Keyform Studio and re-importing the HTML, never by editing the HTML by hand; hand edits are lost the next time someone generates it.

Open the form's latest design file (Chapter 6).
Make the change on the Build tab and test it on the Preview tab.
Copy the new HTML and design file and save them as the next version, for example v2.
Import and test the new template in your Test system (Chapters 4 and 5).
Repeat the import in production, following your company's change process.

Changes that need extra care

Change	Why it matters
Rebinding a field to another keyword	Documents created after the change save to the new keyword; reports and Workflow rules that read the old one need updating
Removing a required field	Workflow rules may expect that keyword to have a value
Changing dropdown options	Existing documents keep their old values; searches and rules may need the new ones
Changing the Document Type	The form must be re-linked to the new Document Type in OnBase

Chapter 8: Troubleshooting

Problem in OnBase	Likely cause	Fix
A value isn't saved to its keyword	The keyword name in OnBase differs from the one in the form, even by a space	Check the exact name in OnBase, rebind the field, re-import
A value saves to the wrong keyword copy	The field's Instance number	Set Instance to 1 unless you meant a second copy
Submitting fails on a date	The keyword is a Date but the field isn't, or the client's date format differs	Use a Date field; test in each client
Submitting fails on a number	Letters or currency symbols in a Numeric or Currency keyword	Use a Number field; add help text such as "numbers only"
A dropdown value is refused	The keyword uses a data set that doesn't include that value	Use Use the keyword's data set so the options match OnBase
Text is cut off	The value is longer than the keyword allows	The field's length comes from the keyword; shorten the value or lengthen the keyword
Layout looks different in one client	Older clients use an older browser engine	Keyform Studio's HTML avoids newer features; tell your administrator which client and version
The form doesn't appear for users	Rights or template link missing	Check the template is linked to the Document Type and user groups can create it

Chapter 9: Practice exercise

Take the AP Invoice Intake form from the Build and Preview guide all the way into your Test system.

The Build tab shows no problems.
You can point to each OBKey_ name in the HTML and say which keyword it saves to.
AP-Invoice-Intake-v1.htm and AP-Invoice-Intake-v1.json are saved together.
The template is imported in Test and linked to AP - Invoice.
A test submission in the Unity Client stored all 7 keywords correctly.
The same test passes in the Web Client, if your company uses it.
You changed the Amount help text, saved v2 of both files, and re-imported.
You reopened v1 from its design file to confirm you can go back.