External HTML E-form Guide

Transcription

1 External HTML E-form Guide A guide for creation and setup of external e- froms for FileBound. Document Version: Published Date: 2/27/2014

2 - 2 -

3 Copyright Copyright 2013 FileBound All Rights Reserved. Printed in USA. The information contained in this document is the property of FileBound Neither receipt nor possession hereof confers or transfers any right to reproduce or disclose any part of the contents hereof, without the prior written consent of FileBound. No patent liability is assumed, however, with respect to the use of the information contained herein. Trademarks FileBound is a registered trademark; FileBound and the FileBound logo are trademarks of FileBound. FileBound OCR technology has been provided under license by ABBYY USA Software House, Inc Active Directory, ActiveX, Excel, Outlook, PowerPoint, Visio, Windows, Windows Server, Windows XP, Windows Vista, and Windows 7 are registered trademarks of Microsoft Corporation. All other product names and logos are trade and service marks of their respective companies. Disclaimer The instructions and descriptions contained in this document were accurate at the time of printing. However, succeeding products and manuals are subject to change without notification. Therefore, FileBound assumes no liability for damages incurred directly or indirectly from errors, omissions or discrepancies between the product and this document. An attempt has been made to state all allowable values where applicable throughout this document. Any values or parameters that the customer uses beyond those stated may have unpredictable results. FileBound 1701 Cushman Drive, Unit 1 Lincoln, NE P: (402) F: (402)

4 - 4 -

5 External HTML E-forms Overview 1 Creating a New External HTML Form 1 Basic Form Needs to Submit to FileBound 2 Global E-form User 2 POST Action 2 Example Form Tag Text 2 Field Names 2 Example Form Field Names 2 FileBound Properties Mapping 2 Example FileBound Property Mappings 3 FileBound Field Mapping 3 Example Field Mappings 3 Response Pages 4 Response Page URL's 4 Submit Button 4 Example Submit Button 4 Sample Basic External HTML Form 5 Supported HTML Input Examples 6 Drop-Down Menu 6 Checkboxes 6 Radio Buttons 6 Text Area 6 Additional FileBound Property Mappings 7 Example FileBound Property Mappings 7 File Uploads with Form Submission 8 Post Action 8 Example Form Tag Allowing Uploads 8 File Upload Field 8 File Upload Properties Mapping 8 Example FileBound Upload Property Mappings 8 Sample for all Input Types with File Upload 9 Submitting Information to an Existing FileBound File 11 Merge Using all Index Fields 11 Merge Using Only the Key Field 11 HTML SigPad Signature Submission 12 Requirements for Use: 12 Supported Internet Browsers 12 Script Requirements within Form 12 Form Tag Class Requirement 12 Canvas Tag Formatting 13 Sample Signature Pad Code

6 - 6 -

7 External HTML E-forms Overview External HTML E-forms Overview HTML pages or PDF forms can be used to submit information into FileBound, an example would be a job application that is available on a company website. The submitted information is then used to generate an e-form that is stored within FileBound and displays the information that was submitted. When an e-form is created during this process FileBound has the ability to automatically send this generated from into a workflow process. Information that is submitted can be used to generate a new file within FileBound or matched to an existing file using a key segment of information identified by the FileBound project's key index field. E-forms can be generated in the following formats: 1. HTML 2. Adobe Acrobat PDF 3. Microsoft Word Document 4. Microsoft Excel Spreadsheet Creating A New External HTML Form When starting to create a new external HTML e-form a basic HTML page can be created using any HTML editor. The layout and look of the form is created using this editor. During this layout and development process all of the necessary form fields need to be added to the HTML page and contained within the <form> tag in the HTML code. The page can use the following HTML form input types: Form Fields Checkboxes Radio Buttons Drop-Down Lists Text Areas File Uploads When creating the form the developer can use any scripting, such as javascript, to perform validations and other actions on the form. The developer can also use Cascading Style Sheets (CSS) to determine the look and positioning on the HTML page. The CSS information can be contained within the code of the HTML page. Note: An External CSS style sheet can be used but it will need to be accessible via the Internet or on the network where the form is hosted

8 Creating A New External HTML Form Basic Form Needs To Submit To FileBound Basic Form Needs to Submit to FileBound To make the form submit to FileBound the developer of the form will need to know information about the FileBound server that the form is being submitted to. The developer will need to specify the server that the form information is being submitted to, the form template inside FileBound that the data will be associated with, and what submitted information will be used to populate index fields or used for merging the data with an existing file within FileBound. If form field data is not mapped to a FileBound index field it will be stored within the FileBound database. During the submission process a variable named with the submitting form field name will be created and the submitted value will be stored associated with that variable name. This variable can then be used within the internal FileBound E-form to call and display the value stored for the variable. Global E-form User Within the Main Options of the FileBound server the Global E-form user will need to be set to a user that has access to the projects that will have E-forms created within them. The selected user will need to have sufficient privileges and group rights to be able to create new files and have document editing rights. POST Action When the Submit button is clicked the information located within the <form> tag will determine where and how the form information is submitted. This tag will need to be set to post the information to the HTML2EFORM.ashx page located on the FileBound server. This is commonly referred to as the HTML2EFORM plug-in. Example Form Tag Text <form method="post" action=" Note: The HTML2EFORM.ashx page is also available on all FileBound On-Demand sites. There is no need to request to make this available. It is standard with all ON-Demand sites. Field Names All fields need to have a unique name assigned to them. This name is used for mapping the form field to the FileBound index field during the submission process. If the form field is not mapped to a FileBound index field, during the submission process the form field name will then be used to create an extra data variable and the data contained in the field will be stored within the FileBound database. Example Form Field Names <p>name: <input type=text name="name"></p> <p>home Phone Number: <input type=text name="homephone"></p> FileBound Properties Mapping - 2 -

9 Creating A New External HTML Form Basic Form Needs To Submit To FileBound When the form information is submitted to FileBound the HTML2EFORM plug-in will need to know where the data will be submitted to within the FileBound server. Input field types will need to be created that are of the type "hidden". These fields will need to be populated with information that can be found within with FileBound server Central Administration window. Some of these fields can use specific ID numbers or names. Listed below are the required fields that are needed for the from to be successfully submitted: FBProjectID - This should be the Project ID where the data is being submitted to or FBProjectName - This should be the project name where the data is being submitted to FBeformID - This should be the e-form ID that will be used to display the submitted information or FBeformName - This should be the e-form name that will be used to display the submitted information FBMatchOption - Determines if the uploaded content should match "ALL" index fields or only the "KEY" index field to merge the data into an existing file Example FileBound Property Mappings name=fbprojectname value="client Info"> name=fbeformname value="information Form"> name=fbmatchoption value="key"> FileBound Field Mapping When the form information is submitted to FileBound the HTML2EFORM plug-in will need to know what form data will need to be used to populate FileBound file index fields. Input field types will need to be created that are of the type "hidden". These fields will be named with the variable for the FileBound index field, for example "FBField1". The default value for the field will need to be populated with the form field name that contains the information that should be used for the index field within FileBound when the form is submitted. Example Field Mappings In the example below the "Name" form field needs to populate field 1 within FileBound and "Home Phone Number" form field needs to populate field 2 within FileBound. Example Form Fields: <p>name: <input type=text name="name"></p> <p>home Phone Number: <input type=text name="homephone"></p> Field Mappings name=fbfield1 value="name"> name=fbfield2 value="homephone"> - 3 -

10 Creating A New External HTML Form Basic Form Needs To Submit To FileBound Response Pages After the Submit button is clicked by the user and the form data is sent to the HTML2EFORM plug-in the user needs to be presented with a status of the submission. Separate HTML pages will be created for each response and will need to be accessible to the user just the same as the html page with the form was. URL's to the HTML pages will be used to present the user with the appropriate message. Input field types will need to be created that are of the type "hidden" that will contain these URL's. The pages that are used can have any look and layout that the developer of the page wants the page to have. The HTML2EFORM plug-in will point the user's Internet browser to the appropriate URL after the completion of the submission process or if it encounters an error during the submission process. Response Page URL's name=fbokpage value=" name=fberrorpage value=" Submit Button At the end of the form a standard "Submit" button will need to be added to the form that will allow users to submit the information to FileBound. Example Submit Button <input type=submit name="submit"> - 4 -

11 Creating A New External HTML Form Sample Basic External HTML Form Sample Basic External HTML Form <html> <head> <title>example External E-form For FileBound</title> </head> <form method="post"action=" <p>name: <input type=text id="name" name="name"></p> <p>home Phone Number: <input type=text id="homephone" name="homephone"></p> <p>address: <input type=text id="address" name="address"></p> <p>city: <input type=text id="city" name="city"></p> <p>state: <input type=text id="state" name="state"></p> <p>zip Code: <input type=text id="zip" name="zip"></p> <p>employee Number: <input type=text id="empnumb" name="empnum"></p> name=fbprojectname value="client Information"> name=fbeformname value="information Form"> name=fbmatchoption value="key"> name=fbfield1 value="name"> name=fbfield2 value="homephone"> name=fbfield3 value="address"> name=fbfield4 value="city"> name=fbfield5 value="state"> name=fbfield6 value="zip"> name=fbokpage value=" name=fberrorpage value=" <input type=submit name="submit"> </form> </html> Figure 4.1: Web Page within Internet Explorer Generated From Supplied Code - 5 -

12 Supported HTML Input Examples Sample Basic External HTML Form Supported HTML Input Examples FileBound HTML E-forms support many different form input types. Listed below are examples of the different types. Drop-Down Menu <select name="dept"> <option value="selected">select One <option value="sales">sales <option value="support">support <select> Checkboxes <input type="checkbox" name="itmeone"> Option One <input type="checkbox" name="itmetwo"> Option Two <input type="checkbox" name="itmethree"> Option Three Radio Buttons <input type="radio" name="favcolor" value="red">red <input type="radio" name="favcolor"value="green">green <input type="radio" name="favcolor" value="blue">blue Note: The value for this field type cannot have any spaces in the name. For example use "TechnicalSupport" instead of "Technical Support" Text Area <textarea name="comments"style="width: 600px; height: 120px"></textarea> Note: The text area above has had some style formatting added to specify the textarea box size

13 Additional FileBound Property Mappings Sample Basic External HTML Form Additional FileBound Property Mappings When the form information is submitted to FileBound the HTML2EFORM plug-in will need to know where the data will be submitted to within the FileBound server and anything extra that might need to be done. Input field types will need to be created that are of the type "hidden". These fields will need to be populated with information that can be found within with FileBound server Central Administration window. Some of these fields can use specific ID numbers or names. Listed below additional properties that can be used: FBWFProcessID - This should be the specific Workflow Process ID that the generated from can be routed into. FBWFProcessName - Can be used instead of "FBWFProcessID". This should be the specific Workflow Process Name that the generated from can be routed into. FBProcessID - This should be the e-form process ID that will be used to generate multiple e-forms at on time. FBProcessName - Can be used instead of "FBProcessID". This should be the e-form process name that will be used to generate multiple e-forms at on time. FBFileID - The file ID that the submitted data will be associated with. FBArchiveID - The archive ID that the submitted data will be associated with. FBArchiveName - Can be used instead of "FBArchiveID". The archive name that the submitted data will be associated with. Example FileBound Property Mappings name=fbwfprocessname value="invoice Approvals"> name=fbprocessid value="2256"> name=fbdivider value="key"> name=fbseparator value="html"> - 7 -

14 File Uploads With Form Submission Sample Basic External HTML Form File Uploads With Form Submission External forms that submit data to FileBound can be configured to also allow file attachments to be uploaded to FileBound during the submission process. For example, the ability to upload a resume when submitting an online job application. When developing an external HTML e-form that provides this functionality addition information needs to be added to the form. Multiple uploads are possible, just repeat the code and change the "1" with "2", "3", etc. Below are the areas that will have extra configuration needs. Post Action Within the <Form> tag the "enctype" will need to be added to allow the upload of an attached file. Example Form Tag Allowing Uploads <form method="post"enctype="multipart/form-data" action=" File Upload Field Browse For File: <input type="file" name="fbdocumentdata1" type="" /> Note: The name for this field type MUST be named "FBDOCUMENTDATA1". File Upload Properties Mapping When the file is uploaded to FileBound the developer of the external submission form has the ability to specify how the uploaded file will be named and where what divider and separator it will be stored in. The below hidden inputs will need to be added to the form to allow the HTML2EFORM plug-in upload the attached file into the proper location. FBDocumentName - This will replace "Page 0001" within the viewer after upload FBDocumentDivider - Name of the Divider the uploaded file will be placed in within FileBound FBDocumentSeparator - Name of the Separator the uploaded file will be placed in within FileBound Example FileBound Upload Property Mappings name=fbdocumentname1 value="docname"> name=fbdocumentdivider1 value="divname"> name=fbdocumentseparator1 value="sepname"> Note: Additional upload fields can be added to the form by repeating the same code and replacing the 1 with 2, 3, etc

15 Sample For All Input Types With File Upload Sample Basic External HTML Form Sample For All Input Types With File Upload <html> <head> <title>example External E-form For FileBound</title> </head> <form method="post" enctype="multipart/form-data" action=" <p>name: <input type=text id="name" name="name"></p> <p>home Phone Number: <input type=text id="homephone" name="homephone"></p> <p>address: <input type=text id="address" name="address"></p> <p>city: <input type=text id="city" name="city"></p> <p>state: <input type=text id="state" name="state"></p> <p>zip Code: <input type=text id="zip" name="zip"></p> <p>employee Number: <input type=text id="empnumb" name="empnum"></p> <p>department: <select name="dept"> <option value="selected">select One <option value="sales">sales <option value="support">support <select> </p> <input type="checkbox" name="itmeone"> Option One <br> <input type="checkbox" name="itmetwo"> Option Two <br> <input type="checkbox" name="itmethree"> Option Three <br><br><br> <input type="radio" name="favcolor">red <input type="radio" name="favcolor">green <input type="radio" name="favcolor">blue <br><br><br> <textarea name="comments"style="width: 600px; height: 120px"></textarea><br><br> Browse For First File: <input type="file" name="fbdocumentdata1" type="" /><br><br> name=fbdocumentname1 value="docname"> name=fbdocumentdivider1 value="divname"> name=fbdocumentseparator1 value="sepname"> Browse For Second File: <input type="file"name="fbdocumentdata2" type="" /><br><br> name=fbdocumentname2 value="docname"> name=fbdocumentdivider2 value="divname"> name=fbdocumentseparator21 value="sepname"> name=fbprojectid value="34"> name=fbeformid value="79"> name=fbmatchoption value="key"> name=fbfield1 value="name"> name=fbfield2 value="homephone"> name=fbfield3 value="address"> name=fbfield4 value="city"> name=fbfield5 value="state"> name=fbfield6 value="zip"> name=fbokpage value=" name=fberrorpage value=" <input type=submit name="submit"> </form> </html> - 9 -

16 Sample For All Input Types With File Upload Sample Basic External HTML Form Figure 4.2: Sample Page Generated From Sample Code

17 Submitting Information To An Existing FileBound File Merge Using All Index Fields Submitting Information To An Existing FileBound File It is sometimes necessary to have the data that is being submitted generate an E-form within a file that already exists within FileBound. By default FileBound is going to try to match all of the submitting index field information to an existing file. Merge Using all Index Fields If all of the FileBound index fields match the data that is being submitted by the external form then the new E-form will be generated within the existing file. When using this method all index fields will have to match, no fields can be left blank during the submission process unless those fields are blank within the existing file in FileBound. To use this matching option code the "FBMatchOption" within the submitting HTML page using the following format: name=fbmatchoption value="all"> Merge Using Only the Key Field When a project is created within FileBound an index field is designated as the "Key" index field. This is normally a field that contains unique values across all of the files that are stored within that project. When external HTML form data is being submitted to FileBound to generate an e-form instead of matching on all of the existing file's index field values it can match on just the key index field. To use this matching option code the "FBMatchOption" within the submitting HTML page using the following format: name=fbmatchoption value="key">

18 HTML SigPad Signature Submission Requirements For Use: HTML SigPad Signature Submission If the e-form that is to be submitted requires a signature, a signature area can be added to the e-form. The user can then use their mouse or a touch device to apply the signature. The form will not be able to be submitted until a signature is entered. Once submitted internal e-forms can be used to display the signature. Using this signature method all of the data is stored within the FileBound database and does not create an actual image. Requirements for Use: There are a few requirements that are needed when using the SigPad signature capability. Supported Internet Browsers To use this signature submission method an Internet Browser that supports the Canvas element of HTML5 and jquery will need to be used to submit the e-form. A list of supported browsers are listed below: Desktop Browsers Internet Explorer 9.x or Higher Google Chrome Firefox 2.0 or Higher Safari 3.1 or Higher Opera 9 (Win) or Higher Mobile Browsers ios 3.2 or Higher Android Browser 2.1 or Higher Opera Mini 5.0 or Higher Opera Mobile 10 or Higher Script Requirements within Form The SigPad functionality is possible because of functionality in HTML5 and jquery. For the signature field to properly display on the page there are several different scripts that need to be used. Starting with FileBound these scripts are included with the FileBound server installation. The scripts will need to be added within the <head> tag The four scripts that need to be included and their default locations are: <script src=" <script src=" <script src=" <script> $(document).ready(function() { $('.sigpad').signaturepad({ drawonly: true }); }); </script> Form Tag Class Requirement Within the <form> tag that contains the Canvas element the class must be set to "sigpad", otherwise the signature area will not properly be displayed. <form action=" method="post" name="eform" id="eform" class="sigpad">

19 HTML SigPad Signature Submission Sample Signature Pad Code Canvas Tag Formatting Within the body of the HTML e-form add the <Canvas> tag where the signature area needs to be displayed. Along with the Canvas tag an <input> tag of type "hidden" will need to be added and named "output" as well as have a class of "output". This will display the signature area and provide a hidden input field to store the signature data. When the data is submitted to FileBound an e-form variable labeled $$output$$ will be created and the internal form will use this variable to display the signature. The Canvas tag and Input tag should look like the following: <canvas class="pad" width="500" height="96" style="left: 0px; top: 0px"></canvas> Note: The width, height and style elements can be adjusted to fit the look and needs of the e-form. name=output class="output"> Sample Signature Pad Code <html> <head> <title>sigpad External Example Form</title> <script src=" <script src=" <script src=" <script> $(document).ready(function() { $('.sigpad').signaturepad({ drawonly: true }); }); </script> </head> <body> <form action=" method="post" name="eform" id="eform" class="sigpad"> <canvas class="pad" width="500" height="96" style="left: 0px; top: 0px"></canvas> name=output class="output"> <br> <input type=submit name=submit value="submit" /> name=fbprojectid value="13" /><br /> name=fbeformid value="70" /><br /> name=fbextension value="html" /><br /> </form> </body> </html>

20 - 14 -

21 Upland Software: 1701 Cushman Drive, Lincoln, NE Phone: Fax: