Amgraf s OneForm Designer Plus Creating I-Forms

Transcription

1 Amgraf s OneForm Designer Plus Creating I-Forms Presented by: Debra Poll

2 List of File Names and Usage Note 1: OneForm Designer Plus creates all of the files needed to deploy Internet forms on Microsoft Windows IIS and UNIX web servers, with databases such as SQL Server 2000, Oracle 8i, and MySQL. Although OneForm Designer Plus creates all of the files needed for I-Forms, you will need the assistance of a Webmaster to help set up your Internet Server. You may need help to create a Document Root location for your I-Forms, give the CGI scripts executable permissions, and to make sure the database drivers are the correct ones, etc. List of Files Required for Each Internet Form USAGE OneForm Designer Plus Form Fillable and Printable I-Form XML Description of I-Form fields FILE NAMES iformname.elf iformname.html iformname.xml I-Form Database Scripts & Files Create a New Table Drop an Existing Table List of All Records in Database Show Database Record Details Table Design Documentation File create_iformnametable-pl.cgi drop_iformnametable-pl.cgi list_iformname-pl.cgi details_iformname-pl.cgi documentation_ iformnametable.lst Transaction Scripts & Files Save Submitted Text to Database Display Database Search Form Search Database and List Results Open Selected I-Form save_iformname-pl.cgi search_iformname-pl.cgi and search_iformname.html results_iformname-pl.cgi open_iformname-pl.cgi Help with Finding New I-Forms Show List of Forms and Options Select New Form or Find Form admin_iformname.html index_iformname.html Note 2: When starting a new I-Form, it is best to create a project directory specifically for that particular I-Form. If possible, name the project folder the same as the I-Form. Many files are generated and they will need to be copied over to your Internet server, and this will make it easier to manage these files. 1

3 Testing I-Forms on Local Machine Note 3: Because Internet forms are eventually placed on UNIX servers, directory names and file names must all be lowercase. This avoids any file naming problems associated with CGI scripts not locating files because they do not match exactly. Server Information OneForm Designer Plus creates Perl5 CGI Scripts for a Generic UNIX Apache Platform using UNIX pathing. The scripts have also been tested and should work with Microsoft Windows IIS Servers. File naming is case dependent, and because of this, lowercase is required for the names of your I-Form project folders and files. Internet forms will not be located if pathed incorrectly or the filename does not match exactly. Internet Server Document Root All files will be referenced relative to the web site s Document Root. The following directories should exist directly under the Document Root. project This is the individual I-Form directory and, if possible, has the same name as the I-Form. sharedgifs This is a holding area for any commonly used GIF files. This allows them to have the same path for many common elements, such as buttons and logos. Testing I-Forms on Local Machine Local functions like calculations and tab ordering can be tested without moving the I-Form to the server. To make sure.gif graphics are found, etc., the local paths for your I-Forms should mirror those on the server. Once the I-Form has been completed, the files can then be moved to their matching directories on the server. C:\Program Files\Amgraf\OneForm\UserFiles You can either go to that location and use it as your Document Root on the local machine or copy it to another location. Transferring Files When using FTP to transfer files to the server, ALWAYS select the file type of ASCII for all.html and CGI files. The scripts will not execute if you transfer them as binary. For the image files.gif and.jpg, use BINARY. 2 OneForm Designer Plus Ver

4 Basic Steps for Creating an Internet Form Basic Steps for Creating an Internet Form For the most part, the concepts behind designing an Internet form are identical to that of an Electronic form. Outlined below are the steps for creating a working Internet form, complete with a submit button, database, a reply message, and form retrieval scripts. Step 1: Draw Base Artwork or Import a File Step 2: Place Fields and Set Tab Order Step 3: Add Custom Calculations and Field Masks Step 4: Test the I-Form on Local Machine Step 5: I-Form Server Preferences Step 6: Set up Database Table Step 7: Specify the Save Script and Reply Message Step 8: Specify the Open I-Forms Script Step 9: Specify the Search and List Criteria Step 10: Set Save Button Properties Step 11: Generate the I-Form Scripts Step 12: Generate the I-Form HTML Step 13: FTP Files to Server Step 14: Make CGI Files Executable Step 15: Create Database Table Step 16: Test Fill, Save, Retrieve for the I-Form Figure 14-1: Sample I-Form 3

5 Step 1: Draw Base Art Step 1: Draw Base Art When you click the New File tool you are creating a brand new file. For Internet forms we need it to have an extension of.elf. Before selecting [Okay], you have an opportunity to type in a new form name and change the form size. The file name must begin with an alpha character and use only lowercase letters. Numbers are permitted in the file name. The file name should be unique. Figure 14-2: Drawing Properties For Internet forms, the ideal page width is 6.1 inches. Most systems (800 x 600 resolution) can display 6.1 inches of the page at one time without the user having to scroll from left to right. Systems with resolutions of 1024 x 768 or higher will display the full 8.5 inches of a normal portrait form. Note: If the form is wider than 6.1 inches, you can always use the Scale Factor value when you generate the HTML to reduce the displayed size, as shown in Figure These graphical elements are supported by HTML JavaScript forms: Vectors Both horizontal and vertical lines. Boxes With or without fills. Rounded corners are not supported and will display as squared. Text Times, Arial, and Helvetica are supported. Other fonts will be converted to Times. All point sizes are supported; however, the vertical and horizontal point size should be the same because cross-scaling is not supported. Leading should be set to normal standards, generally one point more than the vertical point size. Note: Embedded fonts are supported for other typefaces if you follow the Microsoft WEFT guidelines. Go to /typography/web/embedding/ for more information. Graphics GIFs should be used in most cases. For photos, use JPEGs. 4 OneForm Designer Plus Ver

6 Step 2: Place Fields and Set Tab Order At this time Arcs, Splines, and Filled Areas are not supported and they will be ignored. If necessary, replace all unsupported components with GIFs. Future enhancements to OneForm Designer Plus may include support for these components via the Vector Markup Language (VML). Import a File OneForm Designer Plus has two Import options: EPS or PDF. Note: Whenever you import a file, save the results then re-open the converted file before proceeding to edit or add fill fields. When importing PDF or EPS files into OneForm Designer Plus specifically for I-Forms, there are certain steps that should be taken in order to improve the quality of the display of the form. Assemble broken text strings into single components. Many times when forms are imported, words will come in as individual letters. This is especially true if kerning, abnormal word space, or letter space has been used in the original typesetting software. To re-assemble text, use Cut Text Only. Begin by Grouping all text that you wish to combine except for the first text box. Once grouped, choose Cut Text Only under the Edit menu. Choose the Select tool and select the text box you wish to combine the text into. Place the cursor at the end of the text box. Choose the Paste button and the text will be pasted at the end of the text box, combining the text into one text string. When importing EPS files, the Composition Mode generally comes in as Flush Left. It will be necessary to check the Composition Mode of text items, especially those that appear to be Flush Right, Centered or Justified. Since.html substitutes fonts, the anchor position and Composition Mode of text items becomes very important. The Anchor position is where the text is fixed on the page and the Composition Mode is where the text aligns within the text box. For Flush Left, the anchor position is lower-left corner of the text item and the composition mode aligns to the left. To modify a Flush Left text item to be Flush Right; change the composition mode to be Flush Right within Text Properties. Next, position the lower-right corner of the field in its correct anchor position. Step 2: Place Fields and Set Tab Order Once the base artwork is complete, begin placing fields on your form. Use the Add Field tool and Auto Field tool to place fields on your form. Set any standard E-Form Component Properties as you go. Be sure that the field height and text print size are set at a proper ratio. For example, if the field s vertical size is.11 inches, then the text size should not be larger than 8-point. If the text size is too large for the field, the text will appear to be cut off. Buttons need to have a height of at least.19 inch to accommodate the caption text. 5

7 Step 2: Place Fields and Set Tab Order Note: Do NOT name the submit button submit. Use another name like SaveForm for the button. Set the Tab Order The Tab Order can be set by going to the Options menu, E-Form Options, and Set Tab Order. Choose Restart Tab Order in the Pop-up menu and click on the fields in the order in which the user is to tab through the form. Choose Done Setting Tab Order in the Pop-up menu. Figure 14-3: Set Tab Order For more information on setting the Tab Order, see Chapter 7: Adding the Finishing Touches. 6 OneForm Designer Plus Ver

8 Step 3: Add Custom Calculations Step 3: Add Custom Calculations Calculations can be added to Internet forms through the programming section in E-Form Preferences. Inserting calculations for I-Forms is not much different than inserting calculations for E-Forms. The main differences are the types of code used and location the code is inserted within the programming section. When working with Internet forms, the calculations inserted should be written in JavaScript code. JavaScript is widely used on the Internet and there are many resources to learn JavaScript coding. Calculations for Internet forms are added within JscriptIncludes in a function called MainCalculation as shown below: BeginJscriptIncludes function MainCalculations { Insert Your Calculations Here. } EndJscriptIncludes The calculation must begin with an open bracket and end with an end bracket. This is similar to the Begin Sub and End Sub found in Visual Basic. In addition, each line of code must end with a semi-colon, as if putting a period at the end of a sentence to symbolize the end of a thought. A line of code may actually take up two lines, but is not complete until there is a semi-colon. A heading must be placed before each component within a calculation. There are two acceptable headings document.forms[0] and the formname. The document.forms[0] heading is generic and makes the string transferable to any form. The formname is specific to the form, being that it holds its form name within its code. If the form name should change, the calculations must be edited to reflect it. An additional statement must be added in the string representing the type of number being referenced. All field types are referenced as value, but must be further defined as either being an integer or floating decimal. ParsInt refers to an integer. An integer is any whole number either positive or negative. Decimal values will be discarded when using ParsInt. The TparsFloat is a floating decimal and will accept any number, including a decimal. 7

9 Step 3: Add Custom Calculations Simple I-Form Calculations The following is a simple calculation of two fields: Total = FieldA + FieldB The calculation will be demonstrated both in Visual Basic and JavaScript along with instructions on converting Visual Basic to JavaScript. Figure 14-4: Custom Calculations Using Visual Basic Calculations in an I-Form If you are converting an E-Form to an I-Form, and the E-Form has Visual Basic code that already works, you can choose to generate the I-Form with VBScript, as shown in Figure There is one change that may need to be made to your VB code first. Your DIM statements must be explicit, i.e. Dim I As Integer You will also need to remove any % symbols used within your variable references. These changes will make your VB coding compatible with both Visual Basic and VBScript. Adding a Mask to a Field Formatting can be added to fields to control the look of the data, for example, inserting a decimal point. This is similar to the mask functions that can be inserted for electronic forms. To add a mask that will format a Social Security Number, click the Add Mask button as shown, followed by selecting the Mask Type: SSN. 8 OneForm Designer Plus Ver

10 Step 3: Add Custom Calculations Figure 14-5: Click the [Add Mask] Button Figure 14-6: Select Mask Type 9

11 Step 4: Test the I-Form on Local Machine The Save Button Now is the time to add a Save button to your I-Form. This button will be used to save the form fill data on the web server. Use the E-Form field tool to draw the button on the form. Name the button field SaveForm or something similar (do not use the name Submit as that is reserved for other purposes) and position it on the I-Form where it will be visible and easily accessible. The caption on the button can be set to whatever is appropriate. Figure 14-7: Add a Save Button Step 4: Test the I-Form on Local Machine At this point, the form is ready to be generated. Go to the Options menu, E-Form Options and Generate E-Form. Choose Generate Code for Internet Form - HTML. Check the Run Form option and [Okay]. 10 OneForm Designer Plus Ver

12 Step 4: Test the I-Form on Local Machine Figure 14-8: Generate I-Form The form will generate the HTML/JavaScript code and open the form as an.html page in your browser. Test the iformname.html and make any necessary changes to the.elf file in OneForm Designer Plus. Items to test for are data input, checkboxes, tab order, the look of the fields, and image display. Note: You will not be able to test the database or Save button until you complete Step 15. Figure 14-9: Testing an I-Form 11

13 Step 5: I-Form Server Preferences Step 5: I-Form Server Preferences Note: Before you create your web server scripts, it will be helpful to have a printout of your I-Form with the field names shown. The I-Form Server Preferences are set by going to the Options menu, E-Form Options, and I-Form Server Preferences. The preferences allow you to specify the actions of the CGI Scripts that run on the web site server to save, search, list, and retrieve the I-Form. The scripts also manage the creation and maintenance of the server data table where the I-Forms are stored. Figure 14-10: Go to I-Form Server Preferences 12 OneForm Designer Plus Ver

14 Step 6: Setup Database Table Step 6: Setup Database Table The CGI scripts needed to initialize a database table for an I-Form are created in the Specify I-Form Database Table tab. There are 3 steps required to build the database scripts: Designate a path to save the scripts, assign the Primary Key, and define the output table. First, [Browse for Database Path] for the pop-up window to locate the directory where your scripts will be placed. Note: It is OK to use the same Project directory where the.elf is saved, and that will be the default path. Just click OK to proceed. Figure 14-11: Setup I-Form Database Second, select a field to designate as the database s Primary Key. All the fields on the form appear in the field list as shown above. Click on the field name to use as the Primary Key (sometimes called Form Number) for saving the form. Set that field to the Primary Key by clicking the [Set Primary Key] button. The letters Pri will appear next to the field name. Note: If there is not a field on the form that is suitable to be designated as Primary Key, then you should [Cancel] out of the I-Form Server Preferences, then create a new field named AutoInc, type Numeric, and then designate AutoInc as your Primary Key. 13

15 Step 7: Specify the Save Script and Reply Message Third, click the [Primary Table] button. At this time the Define I-Form Primary DB Output Table dialog will appear. The table name will appear in the Name of Primary Output Table field. Click the Attach All Fields checkbox and then click [Okay]. Your database scripts are now ready to generate. Step 7: Specify the Save Script and Reply Message Click the Specify Save Script Tab. Everything is already set for normal use and you should not need to make any changes on this panel. Unless you have special requirements, you may proceed by clicking the Specify Open Script Tab. You can now go to Step 8. The Script File Name will be the name of the save script. This is usually save_iformname-pl.cgi. Figure 14-12: Specifying the Save Script 14 OneForm Designer Plus Ver

16 Step 8: Specify the Open Script The I-Form Database Path is the location that the Save script will place the data. [Browse] for the database path. The reply message is the dialog sent back once the user submits their information. The message lets the user know that their data has been received and often contains a link to another page. Checking Use Basic Reply Script and pathing the location of the return HTML is all that is necessary. Step 8: Specify the Open Script Click the Specify Open Script Tab. Everything is already set for normal use and you should not need to make any changes on this panel. Unless you have special requirements, proceed to Step 9 by clicking the Specify Search Form Tab. Figure 14-13: Specifying the Open Script 15

17 Step 9: Specify the Search and List Criteria Step 9: Specify the Search and List Criteria Each time a user fills out an I-Form and saves it on a web server, a record is written in a data table. To retrieve a filled-in I-Form, it is necessary to use a search form to locate the required I-Form. The Specify Search Form Tab builds the search form using the I-Form field names specified. The Specify List Form Tab indicates how the search results are to be displayed. Both tabs work in the same manner by adding fields to the search and list criteria. Figure 14-14: Specifying the Search Script 16 OneForm Designer Plus Ver

18 Step 9: Specify the Search and List Criteria The results list can use the same fields as the search form, or just the primary key field. The default is to have the primary key field as a link so that you can retrieve a saved I-Form. Through the [Move Up] and [Move Down] options you can rearrange the display of the resulting list. You may now go to Step 10. Figure 14-15: Specifying the Results List Script 17

19 Step 10: Set Save Button Properties Step 10: Set Save Button Properties To define your Save button, click the Specify I-Form Button Tab. Choose the button field name in the Form Button drop-down box. Choose the Button Display. A button may display as a button or may display as a GIF. When the button is considered the SUBMIT button it will cause the data on the form to be captured by the Save script. To Create a Submit Button, check Submit All Data on Form. Notice the path is pointing to the previously defined Save script. When Prompt User for Completion is checked, a message will appear (to the user) before saving. You may now go to Step 11. Figure 14-16: Submit Button 18 OneForm Designer Plus Ver

20 Step 11: Generate the I-Form Scripts Step 11: Generate the I-Form Scripts Go to the Gen Scripts Tab within I-Form Preferences. If you have worked through the panels as documented in Steps 5-10, all the checkboxes except .fil File and Delete Record will be checked. Check or uncheck the checkboxes as desired. Open/Save Options The default action for I-Forms is to allow modified forms to be saved as replacements for prior versions. If you wish, you may select the option labeled Always Save as New Record in order to force every version of a filled and saved I-Form to be preserved in the database. If your I-Form is to be used for data presentation only, click the option Open Read Only. Note: You may wish to have two working versions of your I-Form, the first for filling and the second for displaying data. Use these Open/Save options to generate the scripts for each of these versions from a single design file. Server Pathing The default paths for the CGI Interpreter and Database Login file are shown at the bottom of the Generate Scripts panel. Change these paths as desired for your particular web site. If you are not sure of these paths, ask for assistance from your webmaster. Generate Scripts Click [Generate Scripts] to create CGI scripts for the listed functions. You may now go to Step 12. Figure 14-17: Generate Scripts Tab 19

21 Step 13: FTP Files to the Server Step 12: Generate the I-Form HTML At this point, the actual I-Form is ready to be generated again. Go to the Options menu, E-Form Options and Generate E-Form. Choose Generate Code for Internet Form - HTML. Check the Run Form option and [Okay]. The form will generate the JavaScript and open the form as an.html page in your browser. Test the iformname.html locally one last time. You will still not be able to test the database or Save button. These functions can be tested after the scripts have been moved to the server. Once local testing is complete, it is time to move the files to their appropriate directory on the web server and test from there. Step 13: FTP Files to the Server The files are ready to be moved to the server. FTP all the files as ASCII to the appropriate directories as directed by your Webmaster. Figure 14-18: FTP Files to Server Document Root File Folder Naming Convention /sharedgifs Place any shared.gifs or.jpgs in this directory. For example, the company logo is the same on every I-Form and can be downloaded from this location. /project Place all.html and.cgi files generated in this directory; FTP all of these as ASCII. Also copy over any images specific to this project; FTP the.gif and.jpg files as Binary. 20 OneForm Designer Plus Ver

22 Step 16: Run and Test the I-Form Step 14: Make CGI Scripts Executable All CGI script files must have executable permissions on the server. You may need assistance from your Webmaster to do this. Step 15: Create Database Table To create the database tables, open the admin_project.html file through your browser. Select the Create Database Table link. A message will appear stating that the database has been created. Your Webmaster can assist you in having database resources. Figure 14-19: Create Database Table You can also remove a database table and start over if you find it needs to be replaced during testing. Step 16: Run and Test the I-Form Test the I-Form through the admin_project.html file. With it you can open the new I-Form and submit data, and then examine the contents of the database. Be sure to test the Open, Save button, database, search, and list functions because you were unable to test those functions locally. If corrections need to be made, make the changes within OneForm Designer Plus and then FTP the updated files back to the server. 21