hub.eb?material_id=633&track_id=632
Login
Back

My First App - Part 1

We will start off by creating a Page where a user can enter email information.

We will create Fields that represent and store the following information:

  • Sender's email address.
  • Recipient's email address.
  • The subject of the email.
  • A message to be sent as part of the email.

The web page will look like this:

Steps

1

Create a new Project called myFirstApp:

  1. Click New .
  2. Select Project.
  3. Select the Create Project tab.
  4. Choose Empty Project.
  5. Name your Project myFirstApp.

  6. Click Next >>.
  7. Select the Download tab and select the Bootstrap 5 > Corporate > 2-Colour > Verj.io Light Theme.

  8. Click Finish.
2

Create a Form in the Project called myFirstApp:

  1. Right click on the MyFirstApp Project and select New > Form.
  2. Name the Form myFirstApp.
  3. Change the Page name to details.
  4. Click OK.
3

Create a header for the page:

  1. Add a  Header Panel by dragging it from the Palette into the Outline view as a child of the details Page Control.
  2. Add a  Bootstrap Container as a child of the Header Panel.
  3. Add a  Heading as a child of the Bootstrap Container, set the Level to H1 in the Create New Control dialog and write My First App.
  4. Click OK.

At this point, your Outline view should look like this:

4

Create the main section of the page:

  1. Add a  Main by dragging it from the Palette into the Outline view as a child of the details Page Control, underneath the  Header Panel.
  2. Add a  Bootstrap Container as a child of the Main.

At this point, your Outline view should look like this:

5

Create 4 Fields and set appropriate display types:

  1. In the Fields view, click New .
  2. Name the new Field email_from.
  3. Repeat steps a and b for Fields email_to, email_subject and email_message.
  4. Select the email_to Field and change its Display type property to Email in the Properties view.
  5. Select the email_from Field and change its Display type property to Email in the Properties view.
  6. Select the email_message Field and change its Display type property to Text Area in the Properties view.
6

Add the Fields to the page:

  1. Add the email_from Field to the page by dragging it from the Fields View into the Outline view as a child of the Main Bootstrap Container.
  2. Add the email_to Field underneath  email_from in the  Outline view.
  3. Add the email_subject Field underneath  email_to.
  4. Add the email_message Field underneath  email_subject.

At this point, your Outline view should look like this:

7

Require users to fill in these Fields:

  1. Select the  email_from Field Control in the  Outline view and tick its Field Control Required property in the  Properties view.

  2. Repeat for the email_to, email_subject and email_message Field Controls.
8

Add a Submit button to the page:

  1. Add a  Button by dragging it from the Palette into the Outline view as a child of the Main Bootstrap Container, underneath the Field Controls.
  2. Write Send in the Create New Control dialog.

At this point, your Outline view should look like this:

9

Centre the Page:

  1. Click on details Page Control in the Outline view.
  2. Select Centered for the Root Container Type property in the Properties view. 

10

Test the Form in your browser:

  1. Click the Test  button in the main toolbar and press Submit in the resulting dialog.
  2. Fill in the fields and press Send.

Notice that if you don't fill in any of the required fields, the browser provides a validation message.

Note that the send button doesn't appear to do anything yet, that is the subject of the next part of this tutorial.

Back to TutorialNext Tutorial

Current Tutorial

My First App
view
My First App - Part 1
My First App - Part 2
view
My First App - Part 3
view
My First App - Part 4
view

Related

My First App - Part 3
view
Dynamic Theme Images
view
Verj.io Studio Tour
view
My First App
view
My First App - Part 2
view
Back to TutorialNext Tutorial