PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WEBDEV 24 feature!
  • This lesson will teach you the following concepts
  • Overview
  • A popup page to send emails
  • Creating the popup page
  • Creating the controls used to type the email characteristics
  • Sending the email
  • Page improvements
  • Closing the popup page
  • Opening the popup page
Lesson 5.3. Sending an email
This lesson will teach you the following concepts
  • How to send an email from a WEBDEV site.

Estimated time: 20 mn
Previous LessonTable of contentsNext Lesson
Overview
Several WLanguage functions allow you to manage the incoming and outgoing emails. You also have the ability to access the email characteristics:
  • sender, recipients,
  • outgoing date, subject, message,
  • attachments...
WEBDEV proposes several methods for managing emails:
  • Management via Lotus Notes, Outloook or MS Exchange:
    • The Lotus Notes or Outlook messaging software: these programs allow you to send and receive emails.
    • The "Simple Mail API" (also called SMAPI or Simple MAPI): this management mode of emails is used by most of the Microsoft applications, especially by Microsoft Exchange.
  • Management via the POP3, IMAP and SMTP protocols:
    • The POP3 protocol: this protocol for receiving emails is recognized by all service providers. It is used to communicate with the server directly, available at your ISP. This protocol is used to list the incoming messages and to read them.
    • The 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.
    • The SMTP protocol: this protocol for sending emails is recognized by all service providers.
In this lesson, we are going to create a Popup page allowing the user to email a suggestion to the site developer. This popup is as follows:
To do so, we will be using the SMTP protocol. Indeed, this mode is commonly used all over the world.
See Communicating by emails for more details about the different methods.

Answer

If you have not created the pages from the previous lessons, you can follow this lesson by opening a corrected project: in the WEBDEV home page (Ctrl + <), click "Tutorial" and select "Full WEBDEV Site (With pages)".
A full corrected application project is also available: in the WEBDEV home page, on the "Home" pane, click "Tutorial" and select "Full WEBDEV Site (Answer)".

Examples

The "Sending emails" example (unit example), supplied with WEBDEV, gives more details about the email management. This example is accessible from the WEBDEV home window.
A popup page to send emails
The popup page that we want to create will contain all controls allowing the user to type the different email elements. A "Send" button will group all processes used to send the email.

Creating the popup page

  • To create the popup page:
    1. Open the "Full_WEBDEV_Site" project if necessary.
    2. Display the "PAGE_List_of_products" page.
    3. On the "Creation" pane, in the "Containers" group, click "Popup".
    4. The Popup page is displayed in the editor.
    5. Increase the width and height of Popup page via the handles.
    6. Save the page ( or Ctrl + S).

Creating the controls used to type the email characteristics

To write an email, the user must have:
  • A control used to type the sender address.
  • A control used to type the email subject.
  • A control used to type the email text.
We are now going to add these controls into our page.
Note: the recipient being the site developer, the corresponding address will be found in the send code of email. Similarly, the parameters of SMTP server will be typed in the code directly.
  • To create the edit control corresponding to the sender address:
    1. On the "Creation" pane, 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. Modify the control caption: "Sender".
  • To create the edit control corresponding to the email subject:
    1. On the "Creation" pane, in the "Usual controls" group, click .
    2. Click below the "Sender" control: the edit control is automatically created.
    3. Modify the control caption: "Subject".
  • For the message body, we will be using an HTML edit control: the user will have the ability to format the email text via a specific toolbar.
    1. On the "Creation" pane, in the "Usual controls" group, expand "Edit".
    2. Select a preset "HTML text" edit control.
    3. The control shape appears under the mouse cursor.
    4. Click below the "Subject" control: the edit control is automatically created.
    5. Enlarge the control in order for several lines to be visible.
    6. Display the description window of control (double-click the control).
      • On the "General" tab, modify the HTML toolbar display mode ("HTML toolbar" option). This toolbar must always be visible.
      • Validate the description window of control.
    7. Reposition the control if necessary.
  • Align the different controls found in the page.
We are now going to create the button used to send the emails.

Sending the email

  • To create the send button:
    1. On the "Creation" pane, in the "Usual controls" group, click .
    2. Click the location where the button will be created (at the bottom of the page for example).
    3. Select the button and modify its caption (press the Enter key for example). The new caption is "Send".
    4. Edit the code of this button (F2 key).
    5. Type the following codes in the "Click" server event:
      • the code for opening the connection and for starting the SMTP session:
        MySession is emailSMTPSession
        MySession.ServerAddress = "smtpserver"
        // Type the address of SMTP server
        MySession.Name = "user_name"
        // Type the user name (if necessary)
        MySession.Password = ""
        // Type the password (if necessary)
         
        // Starts the SMTP session
        IF EmailStartSession(MySession) = False THEN
        ToastDisplay("Unable to connect to the SMTP server.", ...
        ErrorInfo())
        RETURN
        END
        This code is using an advanced emailSMTPSession variable. The different properties of this variable are used to define the characteristics of SMTP session. Then, EmailStartSession associated with this variable 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_Text
        Suggestion.Message = HTMLToText(EDT_HTML_Text)
        Suggestion.Recipient = "developer@mysite"
        // Type the recipient address for the suggestions
        This code is using an Email variable. The different properties of this variable are used to define the characteristics of email to send. This code associates the content of different page controls to the properties of Email variable.
      • the code for sending the email:
        // Send the email
        IF EmailSendMessage(MySession,Suggestion) = False THEN
        ToastDisplay("Sending error",ErrorInfo())
        ELSE
        ToastDisplay("Thank you for your suggestion.")
        END
        The email is sent by EmailSendMessage. All you have to do is pass in parameter the variable containing the characteristics of SMTP session and the variable containing the characteristics of email to send.
        If the email is sent, a Toast message is displayed, indicating that the email was sent. A Toast message corresponds to a furtive message.
      • the code for closing the SMTP session:
        // Close the SMTP session
        EmailCloseSession(MySession)
        This code closes the session with EmailCloseSession. Close the code editor.
  • Save the page and its code ( or Ctrl + S).

Note

The process for sending emails is given for information only. In a real site, we would have to check the parameters typed, process the errors, save a log file, ...
Page improvements
We are going to improve our popup page:
  • Add a closing button.
  • Start the popup page from the "PAGE_List_of_products" page.

Closing the popup page

  • To add a button used to close the popup page:
    1. On the "Creation" pane, in the "Usual controls" group, click "Button".
    2. Click the position where the control will be created in the page (bottom right of "Send" button for example).
    3. Select the control and press Enter on the keyboard. The caption becomes editable. Type "Cancel" and validate.
    4. Display the events associated with the button (F2).
    5. Type the following code in the browser click code:
      PopupClose()
      PopupClose is used to close the popup.
  • This function is a Browser function, run on the browser only: no return to the server is required. Therefore, we are going to modify the type of "Cancel" button consequently:
    1. Display the description window of "Cancel" button (double-click the control for example).
    2. In the "General" tab, in the "Button action" area, for the "During the action" option, select "Do not send anything to the server".
    3. Validate the description window of control.
Let's now see how the popup page can be opened.

Opening the popup page

The popup page for sending an email will be opened from the menu of "PAGE_List_of_products" page.
  • Display the "PAGE_List_of_products" page:
    1. In the editor, in the page bar, expand "Popup pages".
    2. In the list that is displayed, click "PAGE_List_of_products".
  • We are now going to create a link for sending a suggestion:
    1. On the "Creation" pane, in the "Usual controls" group, click "Link".
    2. Then, click in the top section of the page (above the search control): the Link control is created.
    3. Modify its caption: "Send a suggestion" and validate.
    4. Display the description window of control (double-click the control).
    5. In the "Link action" area:
      • The type must correspond to "Run the browser click code only".
      • The "During the action" option must correspond to "Do not send anything to the server".
    6. Validate the description window of control.
    7. Display the events associated with the button (F2).
    8. Type the following code in the browser click code:
      PopupDisplay(POPUP_NoName1)
      PopupDisplay is used to display the popup.

Note

Why didn't we open the popup from the menu found in the page template?
The popup page that was created is linked to the "PAGE_List_of_products" page. It can only be used from this page.
To use a popup from a page template, the popup must be created from the page template.
  • Save the page and its code ( or Ctrl + S).
  • Run the page test ( among the quick access buttons) and open the popup for sending a suggestion.
  • Close the browser.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment