TMS WEB Core: Example app to send email from the browser without mail app

Sending email messages from a Web client application usually is done using a mailto: HTML reference. This will open the mail application that is installed on the system and you are able to enter your email.

This has significant downsides as it requires certain software to be installed on the client. Furthermore, there are scenarios when multiple users share the same Web interface. Examples for this a trade fairs, libraries, and internet cafes.

A Web application should be able to communicate with an SMTP server and do the job for us. TMS WEB Core can use any JavaScript library. Even without writing wrapper classes in Delphi, you can call JavaScript methods directly.

Browsing the Web, you will find a simple JavaScript library named SmtpJS available on SmtpJS.com.

The first step is to create a “secret string” that contains the login credentials for your SMTP server. As JavaScript applications are downloaded to your browser in clear text, you cannot store them in your source code. For that reason, SmtpJS uses a token that contains the encrypted login information for your SMTP server.

SmtpJS makes the creation of this token very easy as they offer a user interface to create the string:

After entering your credentials, the dialog will display a security token. Copy this security token as you will need it for your source code.

After creating a new TMS WEB Core client application, we add the following section to the header of the project html file (I always rename it to index.html):

<script src="https://smtpjs.com/v3/smtp.js"></script>

This one line will load the SmtpJS library when your application starts and you can use it in your application.

Add a TWebButton to the form and name it btnSend. You may also include Bootstrap in your application and provide the ElementClassName ‘btn btn-success‘.

Double-click the button and provide its implementation. For a demo, we add the implementation directly into the event. When the user clicks the button, an email will be sent to my email address:

procedure TForm1.btnSendClick(Sender: TObject);
begin
  asm
   Email.send({
      SecureToken : "300889c4-xxxxxxxxxxx-1faxxxc63843",
      To : 'hflick@me.com',
      From : "newsletter@app.flixengineering.com",
      Subject : "This is the subject",
      Body : "And this is the body"
   }).then(
   message => alert(message)
  );
  end;
end;

If you look at the documentation of the JavaScript library, I simply copied the example given there. The only thing to remember is to enclose JavaScript code in an asm/end block. You will need to replace SecureToken with the token that you generated for your SMTP server.

This example is just for testing that the library works. A message “OK” will be shown when successful and the email will be delivered.

Let’s extend the client application with some useful form fields:

We add TWebEdit and TWebMemo controls. txtSendTo will contain the email address of the recipient, txtBody contains the actual message.

All variables can be accessed in asm blocks as well and consequently be used in JavaScript:

procedure TForm1.btnSendClick(Sender: TObject);
var
  LRec: String;
  LBody: String;

begin
  LRec := txtSendTo.Text;
  LBody := txtBody.Lines.Text;

  asm
    Email.send({
     SecureToken : "30088xxxxx0fac6xxx3",
     To : LRec,
     From : "newsletter@app.flixengineering.com",
     Subject :  "Newsletter",
     Body : LBody
    }).then(
      message => alert(message)
   );
  end;
end;

That’s it! You can now send any text to any recipient:

Obviously, it is possible to add more form fields for the subject and add attachments as shown in the documentation of the JavaScript library. There are no limits other than restrictions from your SMTP server what you can send using this implementation.