Adding email functionality to an Ionic application

Categories

Email might be, in one form or another, over 50 years old but its continued popularity as a means of communication is a reliable indicator that, at some point, we might need to integrate such functionality into our Ionic applications.

There's a couple of ways we could accomplish this:

Build an angular form and submit the data to a remote script (using PHP for example) which would then mail that to the designated recipient

This will allow us to create an e-mail message, attach an image (using the Ionic Native Camera plugin) and then open that within the device's default e-mail application (in the example shown in this tutorial that will be iOS's Apple Mail software) where it can then be mailed to the intended recipient.

Here's what we'll be building:

Laying the foundations

With the Ionic CLI (and this tutorial assumes you are using the latest version of Ionic and that your system is fully and properly configured for application development with the Ionic Framework) create the project for this tutorial with the following command:

After these commands have been executed open the project's root module: ionic-mail/src/app/app.module.ts and ensure that the configuration matches the following example (I.e. that the necessary providers and plugins are imported and declared where necessary):

Handling attachments

As we will offer the ability to add attachments to our e-mails we need to be able to retrieve the media that will be used for this purpose.

In the context of this tutorial I have decided to only be able to add attachments in the form of images (for other media types you would need to look into using the Ionic Native File plugin).

To retrieve images for use as attachments we'll add the necessary logic to the recently created ImageProvider service to utilise the Ionic Native Camera plugin methods to access our device photolibrary and select images from there as and where required.

Open the ionic-mail/src/providers/image/image.ts service and add the following code (remove ALL references to the default Http service that is automatically added when a service is generated using the Ionic CLI):

As you can see this is a very simple service and allows us to access the device photolibrary, select our image of choice and return that as a native File URI (which allows us to avoid common memory problems associated with returning the data as a base64 encoded data URI).

Given that this is all we need for the ImageProvider service let's now turn our attention to adding the necessary logic for composing e-mails to the EmailProvider service...

Composing e-mails

Within the ionic-mail/src/providers/email/email.ts service add the following code (once again remove ALL references to the default Http service that is automatically added when a service is generated using the Ionic CLI):

This should be fairly straightforward to understand from the code and accompanying comments.

We simply supply our message data to the solitary sendEmail method, create a message object and make use of the following Email Composer plugin methods:

isAvailable

hasPermission

open

If the plugin returns no errors (permission related or otherwise) then we simply call the open method to - surprise, surprise - open the device default e-mail client and create a new message with fields pre-populated with data from the sendEmail method.

There is one HUGE gotcha though.

We cannot detect whether the user has sent or cancelled the e-mail once the default mail client opens on the user's device.

Bear this in mind when using the plugin as you'll probably want to add some extra logic/functionality to 'handle' that scenario.

Putting it together

Now that we have our services configured we need to 'plug' these into the application's HomePage component so that we can start creating draft e-mail messages which can then be opened within the device's default mail application.

Let's start with crafting the logic for the component class.

Open the ionic-mail/src/pages/home/home.ts file and add the following code:

This should be fairly self-explanatory but I'll quickly break it down.

We add a form to the page which consists of the following fields:

To

Cc

Bcc

Subject

Message

And a <span> element with a retrieveAttachment() method assigned to its click event handler function

The form can only be submitted once the FormGroup validation has been successfully passed (as determined by the formControlName attributes on each field) and, that being the case, the sendMessage() method then handles the submitted data.

Nothing to it right?

Okay, with the logic and templating in place all that remains is to now build and run the application.

This assumes you will be using iOS (substitute with Android if building for that particular platform) and have a developer account configured (with the necessary certificates/profiles assigned to the application - my book Mastering Ionic : The Definitive Guide covers everything you need to know about configuring your application for device testing and submission to the Apple App Store and Google Play Store).

Connect your handheld device to your machine and execute the following commands within the Ionic CLI:

ionic build ios --prod
ionic run ios

All things being well you should be able to build the application, deploy that to your device, run the code and subsequently test like so:

In closing

The Ionic Native Email Composer plugin allows developers to create new e-mail messages and pre-populate these with data in the user's default e-mail software on their device.

As stated it does have one MAJOR limitation: there is no way (at least none that I have been able to discern from the documentation) to detect whether the e-mail has been sent or cancelled - it simply opens the default mail software.

This is something you will need to 'handle' should you choose to use this plugin in your Ionic applications but have fun experimenting with this and be sure to read the docs for further information.

Please feel free to share your thoughts and feedback with regards to this article using the commenting system below.

If you enjoyed what you've read here then please sign up to my mailing list and, if you haven't done so already, take a look at my e-book: Mastering Ionic for information about working with forms and components in Ionic (doesn't cover Firebase).

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

In the following tutorial I'm going to guide you through using Angular FormBuilder, FormGroup and FormArray modules to dynamically add and remove input fields in forms for your Ionic framework applications...

Error!

You might also like...

In the following tutorial I'm going to take you through using the Ionic Native Social Sharing plugin to allow content in your Ionic applications to be shared across different social media platforms including Facebook, Instagram and Twitter....

I've yet to meet a developer who enjoys being greeted with broken code and cryptic error messages, particularly when those error messages aren't very helpful in providing clues as to why things aren't working...

In the following tutorial I'm going to take you through a very simple application that uses the Ionic Native Geocoder plugin to transform a latitude/longitude into a physical address and allows a physical address to be transformed into a latitude/longitude...

Getting App Store ratings/reviews is not easy (unless your application strongly motivates customers to write a review - whether positive or negative is another matter) but thanks to Ionic Native's App Rate plugin you can encourage the user to provide a review from within the application.