How to send e-mail in SAPUI5 Hybrid App?

Sending email is one of the common requirement starting from R/2 to this current world of SAPUI5 applications. At times we might have tricky requirement to send email with custom fonts or with some attachments.

In this tutorial, we would learn how to use an API to send emails using mobile client and how to send attachments as well.

A) API to send email in SAPUI5 App using Mobile Client

First step is to create a Cordova App. In command prompt i.e. in the cmd enter:

<code>"cordova create email com.email email" </code>

Add the Android platform using:

<code>"cordova platform add android"</code>

Add the API Plugin

<code>"cordova plugin add cordova-plugin-email-composer@0.8.15"</code>

Note: Remember to use the 0.8.15 for android otherwise this functionality wont work due to a bug in the latest version. If you do not want to crack your head in vain, just use 0.8.15.

Demo: If you want to invoke a gmail app to send an email, use the below function:

<code>cordova.plugins.email.addAlias('gmail', 'com.google.android.gm');</code>
 
<code>cordova.plugins.email.open({
 app: 'gmail',
 to:      'sagarXXXX@gmail.com',
 subject: 'Greetings',
 body:    'How are you? Dummy mail from    …'});</code>

Output:

YOU NOW HAVE A HIGH LEVEL IDEA HOW TO SEND EMAIL. BUT, DO YOU KNOW HOW TO SEND ATTACHMENTS?

B) How to send Attachments in SAPUI5 App

Sending attachment is bit tricky. But do not worry, Sagar is here at your rescue. Just follow the below snippets:

<code><u:Fileuploader  id="fileUploader"/></code>

<code>var oView = this.getView();
var oFileUploader = oView.byId("fileUploader");
var oFile = oFileUploader.oFileUpload.files[0];
var FR = new FileReader();
var base64;
FR.onload = function(e) {
base64 = e.target.result;
//var oMime = base64.split(";")[0].split(":")[1]
var b = base64.split(",")[1];
var a = base64.split(",")[0].split(":")[1].split(";")[1]+":"+oFile.name+"//";
base64 = a+b;
cordova.plugins.email.addAlias('gmail', 'com.google.android.gm');
cordova.plugins.email.open({
app: 'gmail',
to: 'sagarXXXX@gmail.com',
subject: 'Greetings',
body: 'How are you? Dummy mail from …',
attachments: [base64]
});
};
FR.readAsDataURL(oFile);</code>

DID ALL THE ABOVE STEPS AND PROCEDURE GO UP YOUR HEAD?

Do not be disheartened. We know, this is an advanced topic. Therefore, we have tried to elaborate the steps again below:

Step 1: Hit the run “cmd” on windows

Step 2: Enter the cmd “Cordova create email com.email email”

Step 3: Move to directory and add the platform android

<code>cmd "cd email"
cmd "cordova platform add android"</code>

Step 4: Add the plugin using cmd

<code>"cordova plugin add cordova-plugin-email-composer@0.8.15" </code>

Step 5: Place your sample email app in the WWW folder and add below lines in index.html

Step 6: Copy the view and controller from the zip file given

www app download

Step 7: Enter the cmd “Cordova build” and “Cordova run”

Finally, we are done with our development. Now lets browse and upload an attachment file for the Gmail app.

Note: I have added gmail as the alias so I am sending through gmail.

Time to test the App. Hit “Upload” on the SAPUI5 as shown above….

You may download unzip & install Android Email App.