Back

Field Basics

Fields represent some piece of data. They may represent anything from a Boolean or Integer to complex data represented as a JSON-formatted String.

Fields can be created in the Fields View of supporting Entities, including Forms and Integration Services.

When adding more than one Field, it can be quicker to use the Add Multiple Fields dialog. In here common properties of each Field can also be specified.

Selecting a Field switches the Properties View to that Field where its properties can be configured, including its default value.

Any number of Fields can be selected and dragged on to a Page’s WYSIWYG or Outline View from the Fields View. Every time a Field is dragged on to a Page a new Field Control is created linked to that Field. Once created, a Field Control cannot be changed to represent another Field.

The Field Control honours the Display Type property of its owning Field, and the browser will perform appropriate validation for that type. For example, the Browser will display a date picker if the Display Type is set to date.

Field values can be used in texts by using &&<Field name>. Verj.io will the substitute the current value of that Field into the text before it is displayed to the user. For example, a Text Control on a Page could be set to Greetings, &&name!. When this is displayed to the user, &&name will have been substituted for the current value of the name Field.

A Form's Field can be populated from a URL by setting it to be a URL Parameter. For example, a user_name Field set to be a URL Parameter will be automatically initialised with the value adam if the URL includes user_name=adam as a query parameter: www.myDomain.com/ebase/myForm.eb?user_name=adam.

The Verj.io JavaScript API gives a script full access to Fields in scope, for example, a script attached to a Form or Page has access to all the Fields defined in the Form. They are accessible via the fields interface, for example, fields.email.value references the current value of the email Field:

// set a variable to the current value of the email Field
var email = fields.email.value;

// update the value of the email Field
fields.email.value = "me@verj.io";

Fields can be mapped to Verj.io Resources. Resources act as interfaces to external applications or services that may provide or require data, for example, databases and REST services. When a Resource is invoked the mapped Fields’ values are used and updated automatically.

Steps

Step number

If you haven't already, complete the Steps in the Developing with Themes Tutorial before starting these Steps.

Switch to your verjioTutorials Workspace if you haven’t already:

Click File > Switch Workspace.
Select verjioTutorials
Click OK.

Create a new Project called verjioBasics, if it doesn't already exist:

Click New .
Select Project.
Select the Create Project tab.
Choose Empty Project.
Name your project verjioBasics.
Click Finish.

Create a Form called fieldBasics in a fieldBasics Folder in this Project:

Right-click on the verjioBasics Project and select New > Folder.
Name the Folder fieldBasics.
Right click on the fieldBasics Folder and select New > Form.
Name the Form fieldBasics.
Click OK.

Create the email Field:

In the Fields view, click New and name the new Field email.
Add Not Defined to the Default value property in its Properties View.
Check the URL Parameter property in its Properties View.

The email Field's Properties View should look like this:

Create the main section of the page:

Add a Main by dragging it from the Palette into the Outline view as a child of the Page_1 Page Control.
Add a Bootstrap Container as a child of the Main.
Add a Heading as a child of the Main Bootstrap Container and write Email address: &&email in the Create New Control dialog.
Drag the email Field from the Fields View to the Outline View as a child of the Main Bootstrap Container.
Add a Button underneath email and write Submit in the Create New Control dialog.

Your Outline View should look like this:

Test the Form in your browser:

Click the Test button in the main toolbar and press Submit in the resulting dialog.
Notice the header text and the email text input in your browser both display Not Defined as the email address.
Click the Test button in the main toolbar, enter an email address as the value of the email runtime parameter and press Submit in the Runtime Parameters dialog.

Notice the header text and the email text input both display the email address entered in the Runtime Parametes dialog.

Changing the email address in the email text input and pressing the Submit button also updates the header with the new email value.

More samples, tutorials and demos