Building your First Form

 

Part 1: Building a simple form.. 1

Part 2: Introducing validation. 9

 

This document will lead you step by step through the process of building and testing a form with Ebase, and will familiarize you with working with the Ebase Designer.

 

Part 1: Building a simple form

 

In this exercise, we will create a simple one-page form. We will pretend this is to be used by the film industry to collect nominations for the annual Oscars event. We will be using project USER.

 

Create a form and place fields on the page.

 

  1. Start the Ebase Designer.
  2. Create a new project: right click on Business Projects in the tree panel, select Create new then Business project.  Name the project USER, click OK. (Note: most element names in Ebase are stored in uppercase, so it doesn’t make any difference whether you enter user or USER.)
  3. Create a new form in the USER project: right click on the USER project, select Create new then Form.  Name the form OSCARS, click OK. The system will now open the graphical form editor and display page PAGE_1 which is currently empty.
  4. Click on the Fields Wizard icon  on the page toolbar located immediately above <No form header set>.  
  5. Click the Create new field button
  6. Double click on the blank Field Name box and enter the field name NOMINEE (leave Display Type and Field Type with their default values).
  7. Click the Add new field button and create the following six additional fields:

 

Name
Display Type

Field Type

AWARD

Dropdown

Character

REASONS

Textarea

Character

NAME

Text

Character

ADDRESS

Textarea

Character

POSTCODE

Text

Character

EMAIL

Text

Character

 

Hint: To change the display type or field type, just click in the table cell and a dropdown list will be displayed.

 

8.      Click OK when you have finished and you will see a summary of the fields.

9.      Click OK, and the fields will be added to the page as shown below:

 

 

 

 

 

 

 

 

 

We will now make some of the fields mandatory.

 

  1. Right-click on the 'Nominee' text or on the field itself and select (Control Properties -> Mandatory).
  2. Repeat the process for fields AWARD, REASONS and NAME. 

 

Hint: You can do this in one operation by holding down the CTRL key to select multiple fields and then right clicking on any selected field label text.

 

In general, we work with Ebase fields using the field's label text.  For example to move a field, drag its label text and drop it onto the label text of the field you would like it to appear after. Dropping on the field itself will place the dragged field to the right of the drop target field. If a field text is empty, <no label set> is displayed as a place-holder. This technique is also used for all other texts on the form; for example <No page header set> appears at the top of the page. These place-holder texts can be hidden or displayed by clicking on the Toggle Designer View icon  on the page toolbar.

 

Now we need to add some texts.

 

  1. Click the Maintain Texts icon  on the form toolbar
  2. Click OK on the language selection pop-up window to create texts in the default language.  A tabbed window will appear with the PAGE_1 tab selected.
  3. Click the Form tab, then enter Oscar nomination form against Form header and Submit application against the Finish button text. If you would like to change any of the other texts, click the PAGE_1 tab and enter any label or information texts. The label texts will appear on the left-hand side of the displayed page and the information texts on the right hand side or in pop-up windows.
  4. When you have finished entering texts, click OK.

 

Hint:  We could also have changed these texts by double-clicking on the texts in the graphical form editor.

 

We can now test the form for the first time by clicking the Run button  from the form toolbar. This will save the form, start your default browser and run the form. Click OK at the language dialog box to run the form in the default language. It should look like this:

 

 

 

 

 

 

 

Note: there is no data entry field opposite the 'Award' text. This is because we have declared the AWARD field as a dropdown list but have not yet told the system which values to display in the list.

 

Now we have the basic form, we can set about enhancing it. Return to the Ebase Designer window.

 

Make the REASONS field larger:

 

  1. Right-click over the 'Reasons' text and select Edit field properties
  2. Select the Presentation tab from the properties window: change Number of rows to 8; under Display Length, click on use value and enter a value of 50. This changes the appearance of the textarea box.
  3. Select the General tab, change the value for the Max length validator to 400. This changes the maximum number of characters that can be entered in the textarea box.
  4. Click OK

 

You can click the Run icon at any time to see the effect of these changes.

 

Create a dropdown list of awards by first creating a static list of award values and associating the list with the AWARD field:

 

  1. From the file menu select (File -> New -> List -> Static List) to open the static list editor
  2. Enter oscar_awards as the name of the list.
  3. Enter values in the list by clicking the Add new line button and enter the following details:

 

Language

Display Seq

Text

Return Value

English

1

Best Actor

A

English

2

Best Director

B

English

3

Best Supporting Actor

C

English

4

Best Music Score

D

 

  1. Click Save (this static list can now be used by any form)
  2. Click on the OSCARS form in the open items panel at the top of the screen to return to the form editor (or double click on the OSCARS form icon  in the tree)
  3. Right click over the 'Award' text and select Static List
  4. Select OSCAR_AWARDS from the dropdown list
  5. Click OK

 

Divide the fields into two groups for better presentation:

 

  1. Hold down the SHIFT key, click once over text 'Nominee' then click once over text 'Reasons' (three fields should be selected)
  2. Right-click somewhere in the selected area and select Group
  3. In the pop-up window, click create new group
  4. Enter the field group name as award
  5. In the group header text, enter "About the award"
  6. Click OK twice

 

 

Repeat the same process for the remaining fields Name thru Email and add them to a new group called about_you:

 

  1. In the group header text, enter "About you"
  2. In the group information text, enter "* indicates a required field"
  3. In the group trailer text, enter "Entering your email enters you in our fabulous holiday for two at the Hollywood Oscars competition"

 

Hint:  Once a group has been created, you can maintain it by right-clicking on the group header text and selecting Edit group properties

 

Add some more texts:

 

  1. Double-click on <No page info set> at the top of the page
  2. Change the text to: "Welcome to the new democratic Hollywood Oscars nomination process. You can make as many nominations as you like, and we will select our shortlist of candidates based on the most popular choices."
  3. Run the form.

 

 

 

 

 

 

We need some space before and after the page info text.

 

  1. Double-click on the text and enter <BR> at the beginning of the text and again twice at the end of the text. This is the HTML new line tag and HTML tags can be added to Ebase texts as required to achieve extra formatting effects.
  2. Re-run the form to observe the result.

 

Let's try using a different look and feel:

 

  1. Click the Form Properties icon  on the form toolbar (just below the form title bar)
  2. Change the presentation template to UFS_AZURE. A warning appears saying "Changing the template or template sheet may cause the fields to display incorrectly."  You can click 'Yes' to continue to accept the template changes.
  3. Configure the final page using the Final Page tab of Form Properties  or the Final Page tab of Maintain Texts. Enter some text in the final page information text, to confirm the submission of the form.
  4. Re-run the form to observe the result. Complete the form and then press the 'Submit application' button and note what is on the final page.

 

 

Part 2: Introducing validation

 

None of the fields in the OSCARS form have any obvious need for validation, so we will introduce a new field. We will ask our users whether they work in the film industry, and if they do, we will issue an error message saying they can't vote.

 

Add a new field WORK_IN_INDUSTRY after the NAME field:

 

  1. Highlight the NAME field by clicking once on the label text
  2. Click the Add Boolean Field icon  at the top of the graphical editor, then enter field name WORK_IN_INDUSTRY
  3. Click OK  (The new field will automatically get added to the ABOUT_YOU group)
  4. Double click on the field label and set the label text for the field to "Do you work in the film industry?"

 

Add a validation check to run against this field:

 

  1. Right click on the new field's text and select Edit Actions.
  1. The Validation tab is already selected. Click on the script builder wizard icon . 
  2. Select Add a validation check and click OK
  3. From the dialog box, select the equals condition (=) from the centre dropdown and enter Y in the right-hand box, then click the Add Condition button
  4. Enter "Sorry, you cannot submit a nomination" in the error message field.
  5. Click OK twice

 

 

 

 

 

Test the form and verify that it works as expected:

 

  1. Run the form again, click the checkbox for the new field and click Submit application
  2. An error message should appear above the field
  3. Uncheck the new field and try again. It should work OK.

 

Note: We can change the colours, font etc. of the error message and all other form elements by editing the presentation template associated with the form.  Click the Form Properties icon  on the form toolbar, then double click on the presentation template dropdown (it should show UFS_AZURE). This will open the template editor. Try changing some of the options, save the changes and run the form to see the effect of your changes.