hub.eb?material_id=639&track_id=632

My First App - Part 2


Now we will create a new Page with a message to say the email was successfully sent.

We will navigate to this Page when a user pushes the Send button on the Page we created in Part 1.

This success Page will look like this:

Steps


1

Add a page to myFirstApp:

  1. In the Pages view, click New .
  2. Name the new page success.

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

2

Create the main section of the success page:

  1. Add a  Main by dragging it from the  Palette into the  Outline view as a child of the  success Page Control.
  2. Add a  Bootstrap Container as a child of the  Main.

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

3

Add a success message to the page:

  1. Add a  Heading as a child of the Bootstrap Container, set the Level to H1 in the Create New Control dialog and write Message Sent.
  2. Add a  Text underneath the  Heading and write Message was sent to &&email_to in the Create New Control dialog.

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

4

Centre the success Page:

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

5

Add an event to navigate to the success page when the Send button is clicked:

  1. Select the details page from the Pages view.
  2. Right-click on the Send Button Control and select  Events.
  3. In the Events dialog, click Create New Script and name it sendEmail.
  4. In the new script paste the following code:
    form.gotoPage(pages.success);
  5. Save the script.
6

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.

When all the information is filled in, clicking the Send button takes you to the success page.

Notice that the email_to has been substituted into the text.

Current Tutorial

Related