EmailComposer plugin question

Shams · February 9, 2015, 1:41pm

Hi all,
I have question
here in the Description of “isHTML” parameter they say “Boolean determining if the email body will be plain text or HTML”

I put this code in my js file

var TableF='<html>';
TableF += '<table style="border: solid">';
TableF += '<tr>';
TableF += '<td>IP Addresses</td>';
TableF += '<td>Hop Number</td>';
TableF += '<td>Average MS</td>';
TableF += '</tr>';
TableF += '<tr>';
for(var i = 0; i <10 ; i++){
    TableF +=  '<td>'+ 'IP'+i+'</td><td>' + 'Hop'+ i +'</td><td>' +'MS'+ i+'</td>';
    TableF += '</tr>';
}
TableF += '</table>';
TableF += '</html>';

and in controller

if (window.plugins && window.plugins.emailComposer) {
window.plugins.emailComposer.showEmailComposerWithCallback(function(result){
                console.log("Email Success");
            },
                "Test ",
                TableF,
                ["example@gmail.com"],
                null,
                null,
                true,
                null,
                null
            );

but when I want to send email , The table is not displayed as a html table, it is displayed as text as follows :

IP AddressesHop NumberAverage MSIP0Hop0MS0…IP9Hop9MS9

do you know how to display it as a table please ??

saimon · February 9, 2015, 3:04pm

Don’t you have one null too much at the end of the function call?

I am not sure about this plugin, I can only say I tried ngCordova Email Composer and it works like you can see in this tutorial I created.

If you still rely on this plugin, maybe try to remove the <html> tags, the plugin I used don’t require them so maybe in your plugin they destroy your context or something as well. Let me know if anything fixes your problem!

Shams · February 9, 2015, 3:26pm

@saimon Thank you for your reply :)) I’m very sorry ^^! I put another link of plugin :$$

I have used this plugin https://github.com/jcjee/email-composer

thank you for your tutorial, I’m going to test your method and tell you the result

Shams · February 10, 2015, 9:12am

@saimon I tried your tutorial, and it didn’t work for me

when I press on send mail Nothing happens

saimon · February 10, 2015, 12:04pm

Ok I just tested it (iphone 5) and it works fine with your table.

You should test on a device, it won’t work on the simulator
Have you added the cordova plugin?
If you have deleted the images part from my tutorial, you might be having a } too much, so check/post your code.

Here the working one:

$scope.sendEmail = function() {
  var TableF = "<h2>Look at my HTML!</h2>";
  TableF += '';
  TableF += '<table style="border:1px solid #000000;">';
  TableF += '<tr>';
  TableF += '<td>IP Addresses</td>';
  TableF += '<td>Hop Number</td>';
  TableF += '<td>Average MS</td>';
  TableF += '</tr>';
  TableF += '<tr>';
  for(var i = 0; i <10 ; i++){
    TableF +=  '<td>'+ 'IP'+i+'</td><td>' + 'Hop'+ i +'</td><td>' +'MS'+ i+'</td>';
    TableF += '</tr>';
  }
  window.plugin.email.open({
    to:          ["your@mail.com"], // email addresses for TO field
    cc:          Array, // email addresses for CC field
    bcc:         Array, // email addresses for BCC field
    attachments: null, // file paths or base64 data streams
    subject:    "Just some images", // subject of the email
    body:       TableF, // email body (for HTML, set isHtml to true)
    isHtml:    true, // indicats if the body is HTML or plain text
  }, function () {
    console.log('email view dismissed');
  },
  this);
};

Shams · February 10, 2015, 12:34pm

1- yep, I tested it on android.
2- yes, I added cordova plugin, and there is “de.appplant.cordova.plugin.email-composer” folder in plugins folder
3- I test your code, but nothing happens when press "send mail " button

saimon · February 10, 2015, 1:02pm

If nothing happens then the plugin is not correctly installed/not loaded. This is currently no problem of the HTML body but with the plugin itself.

Try to put some logs in there or check if the plugin is available. Those functions are also documented on the Github project.

Shams · February 10, 2015, 1:10pm

when I test it on the browser and press the button
this error occurred :
TypeError: window.plugin is undefined
I see it with firebug Console

I tried to open the link that you just added, but I could not… Page not found

Shams · February 10, 2015, 1:45pm

when I search about this error , I try to fix it with addition of

<script src="cordova.js"></script>

to the index …

but the error is still and new error appears ::
Error: Module org.apache.cordova.statusbar.statusbar does not exist.
throw new Error(‘Module ’ + moduleName + ’ does not exist.’);

saimon · February 10, 2015, 1:56pm

I often get this error when adding plugins and not rebuilding the platform… Try to delete your android folder and add/prepare/build it again. If that still doesn’t help, I guess you must give some code to find the problem.

Shams · February 10, 2015, 2:09pm

I delete my android folder and add/prepare/build it again. But unfortunately that still doesn’t help :((

all my code is as following:

app.js

var exampleApp= angular.module('starter', ['ionic','ngCordova'])    
exampleApp.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});

exampleApp.controller("ExampleController",function($scope){
    $scope.sendEmail = function() {
        var TableF = "<h2>Look at my HTML!</h2>";
        TableF += '';
        TableF += '<table style="border:1px solid #000000;">';
        TableF += '<tr>';
        TableF += '<td>IP Addresses</td>';
        TableF += '<td>Hop Number</td>';
        TableF += '<td>Average MS</td>';
        TableF += '</tr>';
        TableF += '<tr>';
        for(var i = 0; i <10 ; i++){
            TableF +=  '<td>'+ 'IP'+i+'</td><td>' + 'Hop'+ i +'</td><td>' +'MS'+ i+'</td>';
            TableF += '</tr>';
        }
        window.plugin.email.open({
                to:          ["your@mail.com"], // email addresses for TO field
                cc:          Array, // email addresses for CC field
                bcc:         Array, // email addresses for BCC field
                attachments: null, // file paths or base64 data streams
                subject:    "Just some images", // subject of the email
                body:       TableF, // email body (for HTML, set isHtml to true)
                isHtml:    true // indicats if the body is HTML or plain text
            }, function () {
                console.log('email view dismissed');
            },
            this);
    };
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ng-cordova-master/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">    
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content ng-controller="ExampleController">
      <h1>Send mail</h1>
          <button ng-click="sendEmail()" class="button button-icon icon ion-email">
              Send mail
          </button>
      </ion-content>
    </ion-pane>
  </body>
</html>

I apologize very much I am taking some of your time

Many thanks to you

saimon · February 10, 2015, 2:44pm

Ok so I just made a blank app, took your code but removed ngCordova from index and angular module as we don’t need it for the plugin, added the android platform and builded it to a device via USB and everything works.

I click send mail and a chooser for an email application appears. So the code works just as expected…Maybe there is something wrong with your ionic/cordova CLI? In that case try updating:

sudo npm uninstall -g ionic && sudo npm install ionic

Are you definitely running the app native on android? You mentioned firebug, not sure about that…It still looks to mike like you have no cordova available at runtime which happens in the normal browser…

Shams · February 11, 2015, 8:47am

I give up

I did exactly as you did… made a blank app, took my code, and removed ngCordova from index, added android platform and builded it to a device via USB and nothing happens …

of course I tried updating ionic too.

gsoulie · April 30, 2018, 9:00am

Hi everyone,

I have a question about EmailComposer plugin. It works perfectly but on Android when you call EmailComposer.open(…) it opens a popup displaying all social sharing app like (skype, twitter etc…).

In my case i must hide all social sharing app, i juste need to choose between mail client app.

So it it possible to hide social sharing options ?

Thx