2. Build Custom eForms from Scratch
Kathy Kugle
Technology Consultant
Kansas State University
kkugle@ksu.edu
Stacy Walker
Product Manager
stacy.walker@perceptivesoftware.com
3. Session Overview
Learn about Perceptive eForms first-hand from a Perceptive Software
customer. See how they are designed from the bottom up, understand
the components that are involved, and learn about customization that
can be added with JavaScript for field entry validation. We will also
explore tips and tricks to make e-form design quicker, easier and
effective for your organization.
7. Publish eForms in Forms Designer
Publish to Forms Server
and ImageNow
Writes to imagenowforms.xml
Index key values
Custom property IDs (if keys)
Creates data definition
Form unique ImageNow
ID XML file
8. Publish eForms in Forms Designer
Publish to Forms Server
and ImageNow
Creates presentation
folder and files
Stylesheet XSL
CSS
Images
9. Publish eForms in Forms Designer
Publish to Forms Server and ImageNow
Creates form name
Associates data definition
and presentation files
Creates document or project type
Selects “is a form”
Associates form
Assigns custom properties
10. Publish eForms in Forms Designer
Publish to ImageNow only using designer
Creates data definition xml
Creates form ID presentation
Does NOT write to imagenowforms.xml
Does NOT have index keys
Creates form name
Associates data definition and presentation files
Creates document or project type
Assigns custom properties
11. Manual Form Creation
Manually create
data definition and
presentation files
Add in files through
manage form components
Data definition XML
Create presentation
folder (name of form)
XSL, CSS, images and
other supported files
12. Manually create
form type
Select components
Data definition XML
Presentation folder
Set security
Manual Form Creation
13. Publish Forms from Manual Creation
To Forms Server and ImageNow
Modify imagenowforms.xml
Custom properties (use ID number)
Index keys
Manually create document type or project type
Modify to associate with form
To ImageNow only
No index keys, not distinct document
Meta data for image file or other document
14. Customizing eForms Forms Server
imagenowforms.xml
Configuration Parameters
Button text, color and position
Button actions and action order
Reset – fullScreenSuccess: false
Transform Parameters
Save to PDF and attach to form
Print to PDF
15. Data parameters
Pass info to form
One copy of file – check in/check out
Customizing eForms Forms Server
imagenowforms.xml
16. Customizing eForms
Cascading Style Sheets (CSS)
Modify XSL
Link shared or local CSS
Assign classes
JavaScript
Form validation
Test online form not associated ImageNow first
Link shared or local JS in XSL
18. Customizing eForms
State information
(user, queue, client type, group)
JavaScript in XSL
Live view in XML
19. Customizing eForms
Add form field types (controls)
Modify XML
Add data definition nodes (tags)
Modify XSL
Adding and deleting rows of a table
Checkboxes
Radio boxes
Must be child of div tag
Use form tag in XSL for radio button dots
20. Customizing eForms
Internal form gives
syntax errors to debug
Except configuration
parameters
Use Title tag for simple
hover help text in XSL
on label and input tags
No JavaScript needed
No CSS needed
No special Internet
Explorer tricks
21. eForms Tips
eForm Security
Workflow queue properties, forms
Must add each form to queue
Outside of workflow – form security is needed
All users group added with view for new form
Must modify
Encoding
Save as ANSI or ASCII encoded
UTF-8 with BOM (support in 6.8)
Java 1.7
22. eForms Tips
Custom properties
Different object numbers production or test
Create properties in both
Create form to have object numbers in both
Switch out test numbers for production
Presentation Files (CSS, XSL)
Replace (requires restarting web server)
Remove, Add
Escape reserved XML characters
23. eForms Tips
Code for WebNow and ImageNow in JS and XSL
Option elements
WebNow needs to check for null
ImageNow permits only single argument
Events
Use addEventListener for WebNow
Use attachEvent for ImageNow
Microsoft IE requires specific Namespace (ImageNow)
24. eForms Tips
Code for WebNow and ImageNow in JS and XSL
Get Elements
getElementsbyName needs to test for null
WebNow returns null object
ImageNow returns empty array
getElementsbyID needs both id and name
WebNow returns null object
ImageNow checks for name
25. Training Courses
RUG ImageNow eForm Workshop
Classroom
ImageNow iScript/eForms Developer Training
Classroom, virtual
ImageNow eForms Developer Training
Classroom, virtual
ImageNow eForms Administrator Training
Virtual, blended, e-learning
I have more than 10 years experience with ImageNow and have worked with eForms less than a year. I am not server admin or central IT. My background was html (html4 and xhtml), some JS and some CSS. Not a programmer but do have some education in that area.
eForms use xml (extensible markup language) snippets, xsl (extensible stylesheet language) and css (cascading style sheets.) If you are going to write, customize your own or customize the eForms created by the eForms designer, I recommend that you understand these file types first.
I recommend you use the w3c (world wide web consortsium) schools xml and xslt tutorials: http://www.w3schools.com/xml/ and http://www.w3schools.com/xsl/
Also their CSS turorial: http://www.w3schools.com/css/
This is not a tutorial on writing eForms but rather my experience gained through our 6.6 environment with information from the portal (install guides, cases, help files) and is not necessarily comprehensive.
Custom properties must be created in management console first in order to drag and drop within the designer and use for index keys
Screenshot of the Forms Designer: custom properties upper left, form element lower left, drag n drop area in middle and field properties in right column.
The eForms designer takes care of writing to the imagenowforms.xml for the form indexes (including the custom property IDs that are keys)
It also writes the data definition xml file.
When publishing with the Forms designer, it creates the presentation folder and the associated files (xsl, css & images)
When you are publishing to ImageNow and the forms server, the forms designer crates the form name and associates data definition and presentation files.
It creates the document type or project type, selects the checkbox that the type is a form, associates the form, and assigns custom properties.
If you publish just to ImageNow using the forms designer:
Creates data definition xml
Creates presentation files
Does not write to imagenowforms.xml
Does not have index keys
Creates form name & associates data definition and presentation files
Creates document or project type and assigns custom properties.
When you are creating the form yourself (manually), you must create the data definition and presentation files, add in the files through manage form components,
Create the form type, select components (xml and presentation folder) and set security.
When you manually publish forms:
to the forms server and ImageNow, you modify the imagenowforms.xml to add index keys (including custom properties), manually create the document type or project type and associate the form to that type.
To ImageNow only, no index keys to assign (not distinct document, serves as meta data for image file or other document
When customizing eForms published to the forms server:
There are configuration parameters (button attributes and actions) For the Reset button (which empties fields without reopening form) it requires the fullscreensuccess to be false (fullscreensuccess is param that controls if submitting the form opens another page or stays on form. )
Transform parameters used in conjunction with printTransform and printTransformAsAttachment or rescaleFormsPrint allows print to pdf at save or print.
If print when input tags are styled (class for external or inline styles): Must change print method used to pdf template, xsl-fo template, or config param rescaleFormsPrint
You also can data parameters (information about end user) to the imagenowforms.xml and embedded URL to populate fields in your form (see examples of both.)
When editing the imagenowforms.xml use a check in check out system since there is only one copy for all forms. (unlike the xml data definition and presentation files by form.)
Customize eForms with CSS, modify your xsl to link shared or local css and assign classes (if used)
Print stylesheets don’t work completely
Don’t style input elements if using print functions
Use rescaleFormsPrint config param to try different print type
Customize your eForm with JS for form validation. I recommend you test online form not in ImageNow first to get your validation correct and then test in ImageNow. Then link to shared or local JS.
You can use JS to have field help text (adding a button for help or having a link to help)
Caveat with JS is that the browser used on the forms server is ICE browser (browser in a browser) which will not allow all JS functions to happen as with just a browser (IE, firefox, chrome, etc.) like changing focus. The whole window gets focus instead of the element.
If you like you can set the state information in your Javascript in the head of your xsl. This is the only JS that should be in the head of your xsl. Any other JS should be linked to local or shared js file.
The live view of the data populating the xml is the state information only available as form is open (view source to see it.)
If you want to add additional form elements (field types called controls in the documentation) you must modify the xml to add nodes (tags), modify the xsl to add the fields: add or delete rows of a table, checkboxes, and radio buttons (which must be the child of div tag and must use form tag in xsl for the radio button dots –selected)
Tips for customizing eForms:
The form displayed inside of ImageNow can be used to debug since the syntax error will display instead of the rendered form (except config param errors.)
Use the title tag for simple hover help in your xsl on label and input tags (no js, css or special IE tricks needed.)
eForms Tips: eForm security,
1. in workflow, add each form and correct presentation to queue (can use diff ones here than on forms server or for other queues) – workflow access trumps forms security
2. Outside of workflow, form security is needed
3. Caution, by default the All Users group is added with view access for new forms (you must modify)
Encoding:
Be sure your editor tool produces ANSI or ASCII (not UTF-8 with BOM) for JS, CSS, xml, xsl
My preference was Notepad ++
Java 1.7 issues with eForms resolved for 6.7 and fix for 6.6 is either already out or coming soon.
Tips:
Custom properties have diff numbers in production and test so create in both, create form that displays the object number in both, and switch out of test form before moving to production.
Presentation files (CSS & XSL) can be updated by clicking replace but must restart web server or use remove and add.
Be sure to escape reserved xml characters (for example: text for button cannot have apostrophe “Submit to Registrar’s Office”)
Tips: Code for WebNow and ImageNow in your JS & XSL: Option elements (webNow-check for null, ImageNow-single argument); Events (WebNow addEventListener; ImageNow attachEvent)
Microsoft IE requires specific namespace to display eForms:
Forms Designer adds these tags:
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
Some forms had “extra” xmlns for head and body tags that had to be removed to allow correct display in ImageNow which uses IE
Designer:
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
Tips: code for WebNow and ImageNow in js and xsl: Get Elements
getElementsbyName needs to test for null (WebNow returns null, ImageNow returns empty array)
getElementsbyID need id and name (WebNow returns null object, ImageNow checks for name)
