ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WEBDEV 2024 feature!
This content has been translated automatically.  Click here  to view the French version.
Help / WEBDEV Tutorial / Tutorial - Multi-criteria search and printing
  • Lesson 3 - Sending an email
  • Overview
  • Popup page to send emails
  • Creating the popup page
  • Creating the controls to enter the email characteristics
  • Dispatch from Email
  • Page improvements
  • Closing the popup page
  • Opening the popup page

Tutorial - Multi-criteria search and printing

Lesson 3 - Sending an email
We will cover the following topics:
  • How to send an email from a WEBDEV site.
Durée de la leçon 20 mn
Overview
Multiple WLanguage functions allow you to manage incoming and outgoing emails. You also have the ability to access the email characteristics:
  • sender, recipients,
  • outgoing date, subject, message,
  • attachments...
WEBDEV includes multiple methods to handle emails:
  • 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:
To do so, we will use the SMTP protocol. This is the most common send mode.
For more details on the different methods, see Communicate by email.
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".

Corrigé

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.
Popup page to send emails
The popup page that we are going to create will contain all the controls allowing the user to enter the different elements of the email. A "Send" button will group all the 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. 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 (Save an item or Ctrl + S).

Creating the controls to enter the email characteristics

To write an email, the user needs:
  • A control to enter the sender's address.
  • A control to enter the email subject.
  • A control to enter the email text.
We will add these controls to our page.
Remark: since the recipient is the site developer, the corresponding address will be in the email sending code. Similarly, the SMTP server parameters will be entered directly in the code.

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. Modify the wording of the control: "Sender".
To create the Edit control that corresponds to the email subject:
  1. On the "Creation" tab, in the "Usual controls" group, click Create an edit control.
  2. Click below the "Sender" control: the Edit control is automatically created.
  3. Modify the wording of the control: "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.
We're now going to create the Button control to send emails.

Dispatch from Email

To create the Button control to send emails:
  1. On the "Creation" tab, in the "Usual controls" group, click Create a Button control.
  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:
      Click (server)
      MaSession is emailSMTPSession
      MaSession.ServerAddress = "serveursmtp"
      // Saisissez ici l'adresse du serveur SMTP
      MaSession.Name = "nom_utilisateur"
      // Saisissez ici le nom d'utilisateur (si nécessaire)
      MaSession.Password = ""
      // Saisissez ici le mot de passe (si nécessaire)

      // Ouvre la session SMTP
      IF MaSession.OuvreSession() = False THEN
      ToastDisplay("Connexion au serveur SMTP impossible.", 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:
      Click (server)
      Suggestion is Email
      Suggestion.Sender = SAI_Expéditeur
      Suggestion.Subject = SAI_Sujet
      Suggestion.HTML = SAI_HTML
      Suggestion.Message = HTMLToText(SAI_HTML)
      Suggestion.Recipient[1] = "developpeur@monsite"
      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:
      Click (server)
      // Envoi de l'email
      IF MaSession.EnvoieMessage(Suggestion) = False THEN
      ToastDisplay("Erreur d'envoi", ErrorInfo())
      ELSE
      ToastDisplay("Merci pour votre 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:
      Click (server)
      // Fermeture de la session SMTP
      MaSession.FermeSession()
      This code closes the session with <Session>.CloseSession. Close the code editor.
Save the page and its code (Save an item or Ctrl + S).
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.
Page improvements
We are going to improve our popup page:
  • 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).
    Creating the control to close the page
  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:
    (browser)
    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.
Let's see how to open the popup page.

Opening the popup page

The popup page for sending emails will be opened from the menu of "PAGE_List_of_products" page.

Open "PAGE_List_of_products": in the open document tabs of the editor, click "PAGE_List_of_products".
Displaying popup pages
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".
      Link control description
  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:
    (browser)
    POPUP_SansNom1.Affiche()
    <Popup>.Display displays the popup.
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, the popup must be created from the page template.
Save the page and its code (Save an item or Ctrl + S).
Test the page (click Test a page in the quick access buttons) and open the popup for sending a suggestion.
Popup page test
Close the browser.
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):
  1. Select the Link control.
  2. Right-click the control and select "Anchor" in the context menu.
  3. In the window that appears, select and validate.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 11/16/2023

Send a report | Local help