Tutorial1: Building a Data
Entry Form
Part
1: Building a simple form
Part
2: Introducing validation
See also: All Tutorials, Controls,
Layouts, Form Editor
This document will lead you step by step through the process
of building and testing a form with Ebase Xi, and will familiarize you with
working with the Ebase Xi Designer.
In this tutorial, 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.
Note, if you have a problem at any time, enter Ctrl
Z to undo the most recent change.
Create a form and place fields on the page.
Drag a Group Panel Control from the
Palette onto the page and drop it on the bottom of the form header text – a
black line is displayed to show the drop location.
Hint: when dragging/dropping
controls, you can drop them in either the WYSIWYG View Panel or the Outline
View Panel.
Add the following fields (use the
keyboard down arrow or click the Add Field icon to add more fields):
Field
Name |
Field
Type |
Display Type |
Nominee |
Character |
Text |
Award |
Character |
Dropdown |
Reasons |
Character |
Textarea |
Let the Field data length and label text columns take default values. Click OK to add the new fields.
Note that for each field added, both
a Field and a Field Control have been created. A Field is a form-level element that is available for display on any
page - Fields are shown in the Fields View. A Field Control represents the display of a field on a specific page,
and each Field Control is linked to an underlying Field - Field Controls are shown in both the Outline View and the
WYSIWYG View on the pages where they appear. Ebase Xi is a little unusual in
that many presentation properties are configured on the Field, not on the Field
Control where you might expect to find them; this includes Display Type: Text, Dropdown, Textarea, Checkbox etc, Display
Length, plus other presentational properties.
9.
We
will now add the second Group Panel Control after the first
one. To do this, drag another Group Panel Control from the Palette and drop it
onto the first Group Panel Control in the Outline
View; the black line showing the drop location should be underneath the control icon – to
indicate drop after as opposed to
drop inside.
Hint: we could alternatively have used the WYSIWYG
View to do this: drag the new control over the group header text of the
first Group Panel Control; a small blue box is displayed at the top left of the
control – with the left mouse still held down, move the mouse pointer over this
box which then pops up a control tree panel showing all parent controls. Drop
the new control after the first Group Panel Control as described above.
Field
Name |
Field
Type |
Display Type |
Name |
Character |
Text |
Address |
Character |
Textarea |
Postcode |
Character |
Text |
|
Character |
Text |
As before, let the Field data length and label text columns in the wizard take default values.
At this point, the Designer view should look like this:
Try running the form to see how it looks in a browser – click the run icon on the main form toolbar. You will notice a few differences; this is because the WYSIWYG View adds a number of things
e.g. indicators for empty texts, to make page design easier. You can see how a page will truly appear at anytime by clicking the Toggle designer view icon on the WYSIWYG View toolbar.
This is a toggle switch so clicking it again returns to the assisted display.
Note: in the browser, there is no data
entry field opposite the 'Award'
label. 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.
We’ll fix this in a moment.
We will now
make some of the fields mandatory.
Hint: clicking the help icon at the top of the Properties View displays the help page for the properties currently being displayed.
You can also press the F1 key from any point in the Form Editor to get local help on the element currently in focus.
Hint: You can do this in a
single operation by holding down the Ctrl key to select multiple Field
Controls and then right clicking and selecting Set Mandatory.
Now we have the basic form, we can set about enhancing it.
In the Presentation section,
change the Display Length property to 50,
and the Number of Rows property to 8.
17. Create
a dropdown list of awards by first creating a Static List of award values and
then associating the list with the Award
field:
·
Right click on the Tutorial1 folder in the tree and select New > Static List and name the
new list OscarAwards
·
Enter values in the list - use the keyboard down
arrow or click the icon to add new values:
Display Text |
Return Value |
Best Actor |
A |
Best Director |
B |
Best Supporting Actor |
C |
Best Music Score |
D |
·
Click the Save
icon at the top of the editor
·
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)
·
Click on the Award field in the Fields
View – its properties are then displayed in the Properties View. Click on
the … button to the right of the Static
List property in the Lists section and select the OscarAwards list
we just created.
Add some
texts:
Cut
and paste the following text into the popup:
Welcome to the new
democratic
Supplying your email
enters you in our fabulous holiday for two at the
Hint: If you use
the Outline View as the target for the drop, hover the mouse over the icon of the Email Field Control –
this indicates add after the control as opposed to add to.
Add some
styling:
Click the … button opposite
the Text
property and in the displayed dialog box set the Bold property dropdown to Bold, the Size property to 18px and the Color property to Green.
Click OK twice to see your
styling changes in the WYSIWYG view.
These styling properties can either be local values or linked from a Property Set in the form’s Presentation Template.
Tweak the presentation.
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 make a nomination.
Add a new field IndustryWorker after the Name field:
·
Display Type (Section Presentation) to
Checkbox
·
Field Type
(Section General) to Boolean
·
Label Text
(Section Texts) to "Do you work
in the film industry?"
Add a validation check to run against this field:
Click on the Oscars
form in the open items panel at the top of the screen to return to the form
editor. Then run the form and verify that it works as expected:
In this example, we have used the script builder wizard to generate a simple script. In practice, you are more likely to create a new script to add whatever programming logic you require and then add this to an event. See Server-side Programming for details of available scripting languages.
That completes this tutorial. There are still quite a few
things we need to do to make this into a working application – perhaps the most
obvious is to add some programming logic to the Submit Application button to
collect the details entered and then do something with this information –
typically this would be one or more of: writing to a database, calling a web
service, sending an email. These subjects are explored further in other tutorials.