• How to send an email from a WEBDEV site.

	Estimated time: 20 mn

• sender, recipients,
• outgoing date, subject, message,
• attachments...

• Via Lotus Notes, Outloook or MS Exchange:
  • Lotus Notes or Outlook: these programs allow you to send and receive emails.
  • "Simple Mail API" (also called SMAPI or Simple MAPI): this email management mode is used by most Microsoft applications, especially by Microsoft Exchange.
• Via the POP3, IMAP and SMTP protocols:
  • POP3 protocol: this protocol for receiving emails is supported by all service providers. It is used to communicate with the server directly, available at your ISP. This protocol is used to list and read incoming messages.
  • IMAP protocol: this protocol for receiving emails allows you to leave the emails on the server so that they can be viewed from different messaging clients or webmail.
  • SMTP protocol: this protocol for sending emails is recognized by all service providers.

In this lesson, we will create a Popup page allowing users to send suggestions by email to the website developer. This popup is as follows:

• Open the project you worked on in the previous lesson.
  1. Go to the WEBDEV home page (Ctrl + <).
  2. On the home page, click "Tutorial", then in "Parts 3 to 6", double-click "Full WEBDEV Site (Exercise)".
  3. A dialogue box prompts you to open the project you worked on in the previous lesson. You can open the local copy or the original project. Select "Open the local copy".

	Answers	A completed project is available. This project contains the different elements created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Parts 3 to 6", double-click "Full WEBDEV Site (Answers)".

	Examples	For more details on emails, see the "Sending emails" example (unit example), provided with WEBDEV. This example is accessible from the WEBDEV home window.

Creating the popup page

• To create the popup page:
  1. Open the "Full_WEBDEV_Site" project if necessary.
  2. Open the "PAGE_List_of_products" page.
  3. In the page bar, click "Popup pages".
     
  4. In the menu appears, click "New popup".
     
  5. The popup page appears in the editor.
  6. Enlarge the Popup page vertically and horizontally with the sizing handles.
  7. Save the page ( or Ctrl + S).

Creating the controls to enter the email characteristics

• A control to enter the sender address.
• A control to enter the email subject.
• A control to enter the email text.

• To create the Edit control that corresponds to the sender address:
  1. On the "Creation" tab, in the "Usual controls" group, expand "Edit".
  2. Select the preset "eMail" edit control.
  3. Click in the page: the Edit control is automatically created.
  4. Change the control text: "Sender".

• To create the Edit control that corresponds to the email subject:
  1. On the "Creation" tab, in the "Usual controls" group, click .
  2. Click below the "Sender" control: the Edit control is automatically created.
  3. Change the control text: "Subject".

• For the message body, we will use an HTML Edit control: the user will have the ability to format the email text via a specific toolbar.
  1. On the "Creation" tab, in the "Usual controls" group, expand "Edit".
  2. Select "HTML edit".
  3. The control shape appears under the cursor.
  4. Click below the "Subject" control: the Edit control is automatically created.
  5. Enlarge the control to display several lines.
  6. Open the control description window (double-click the control).
     • On the "General" tab, change the HTML toolbar display mode ("HTML toolbar" option). This toolbar must always be visible.
     • Validate the control description window.
  7. Reposition the control if necessary.

• Align the different controls in the page.
  

Sending emails

• To create the Button control to send emails:
  1. On the "Creation" tab, in the "Usual controls" group, click .
  2. Click the location where you want to create the Button control (for example, at the bottom of the page).
  3. Select the control and change its text (press Enter for example). Enter "Send".
  4. Edit the code of the control (F2).
  5. Enter the following codes in the "Click" server event:
     • the code for establishing the connection and starting the SMTP session:
       
       MySession is emailSMTPSession
       MySession.ServerAddress = "smtpserver"
       // Type the address of SMTP server
       MySession.Name = "user_name"
       // Type the username (if necessary)
       MySession.Password = ""
       // Type the password (if necessary)
        
       // Starts the SMTP session
       IF MySession.StartSession() = False THEN
       ToastDisplay("Unable to connect to the SMTP server.", ErrorInfo())
       RETURN
       END
       
       This code uses an advanced emailSMTPSession variable. The different properties of this variable define the characteristics of the SMTP session. Then, the <Session>.StartSession function is used to start the session.
     • the code for preparing the email:
       
       Suggestion is Email
       Suggestion.Sender = EDT_Sender
       Suggestion.Subject = EDT_Subject
       Suggestion.HTML = EDT_HTML
       Suggestion.Message = HTMLToText(EDT_HTML)
       Suggestion.Recipient = "developer@mysite"
       
       This code uses a variable of type Email. The different properties of this variable define the characteristics of the email to be sent. This code associates the content of different page controls with the properties of the Email variable.
     • the code for sending the email:
       
       // Send the email
       IF MySession.SendMessage(Suggestion) = False THEN
       ToastDisplay("Sending error", ErrorInfo())
       ELSE
       ToastDisplay("Thank you for your suggestion.")
       END
       
       The email is sent by <Session>.SendMessage, which is used with the variable containing the characteristics of the SMTP session. A variable with the characteristics of the email to be sent is passed as parameter to this function.
       If the email is sent, a Toast message is displayed, indicating that the email was sent. A Toast message is a small message that appears for a few seconds.
     • the code for closing the SMTP session:
       
       // Close the SMTP session
       MySession.CloseSession()
       
       This code closes the session with <Session>.CloseSession. Close the code editor.

• Save the page and its code ( or Ctrl + S).

	Note	The process for sending emails is given for information purposes only. In a real site, it is recommended to check the parameters entered, process errors, save a log file, etc.

• Add a Button control to close this popup page.
• Open the popup page from the "PAGE_List_of_products" page.

Closing the popup page

• To add a Button control to close the popup page:
  1. On the "Creation" tab, in the "Usual controls" group, click "Button".
  2. Click the page at the desired location to create the Button control (for example at the bottom, to the right of the "SEND" Button control).
     
  3. Select the control and press Enter. The text becomes editable. Type "Cancel" and validate.
  4. Open the events associated with the control (F2).
  5. Enter the following code in the browser click code:
     
     PopupClose()
     
     PopupClose closes the popup.

• PopupClose is a Browser function and is run on the browser only: no return to the server is required. We will modify the type of the "Cancel" button:
  1. Open the description window of the "Cancel" Button control (double-click the control).
  2. In the "General" tab, in the "Button action" section:
     • for "type", select "Run browser click code only".
     • for "During the action", select "Don't send anything to the server".
       
  3. Validate the control description window.

Opening the popup page

• Open "PAGE_List_of_products": in the open document tabs of the editor, click "PAGE_List_of_products".
  

• We will now create a Link control to send a suggestion:
  1. On the "Creation" tab, in the "Usual controls" group, click "Link".
  2. Then, click the top section of the page (below the "Notifications" control): the Link control is created.
  3. Change its caption: "Send a suggestion" and validate.
  4. Open the control description window (double-click the control).
  5. In the "Link action" section:
     • The type must be set to "Run browser click code only".
     • "During the action" must be set to "Don't send anything to the server".
       
  6. Validate the control description window.
  7. Open the events associated with the Link control (F2).
  8. Enter the following code in the browser click code:
     
     POPUP_NoName1.Display()
     
     <Popup>.Display displays the popup.

	Note	Why didn't we open the popup from the menu in the page template? The popup page is linked to "PAGE_List_of_products". It can only be used from this page. To use a popup from a page template, it must be created from the page template.

• Save the page and its code ( or Ctrl + S).

• Test the page (click in the quick access buttons) and open the popup for sending a suggestion.
  

• Close the browser.

	Note	Why does the link not appear in the browser at the specified location? In the page editor, the Link control is positioned above the search control, but at runtime it appears above the option "ADD A PRODUCT". This difference is due to the anchoring of the Link control. In the page editor, several red arrows appear in the page header. These arrows indicate that the controls are anchored. We will see anchors in detail in the Advanced concepts. The Link control we created is not anchored and it follows the movement of the controls around it. To anchor the Link control to the right (and keep it from moving): Select the Link control. Right-click the control and select "Anchor" in the context menu. In the window that appears, select and validate.