By now, most of you know how to send emails using the Message UI framework without quitting the app. In this tutorial, we will briefly discuss the techniques for sending a HTML formatted email with user generated content. Though sending a HTML formatted email is as easy as setting the option to HTML

[picker setMessageBody:emailBody isHTML:YES];

There are some cases that this method that this method doesn’t take care of. In short, this method works great for sending “Tell a friend about this app” email. But if your app needs much more sophistication, especially, if it needs to email data created by the user, you can follow the approach I suggest. Using this method, you can also adapt your code for International support and send the same email in multiple languages without any “hard-coding”

Though the method promises some great features, it is ridiculously simple.

Step 1:

Create a HTML File with the contents of your email and add it to your project. You should NOT create any css or link it to any external CSS files. All your styles whether embedded withing the <STYLE> tag or kept as a separate CSS file will mostly be stripped by email clients. The reason could be because email clients don’t want your CSS to mess around with their client CSS. Read this article for more details. A sample is given below.

Step 2:

Insert placeholder markers within your HTML file. Your HTML file should look something like this.

<font size = '1' color= "#222222" style = "font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial;"><i>//TEXT_PLACEHOLDER//</i></font>
<font size = '2' color= "#000000" style = "font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial;"> Have a great day! <br/>//FRIENDNAME_PLACEHOLDER// <br/></font>

The bold markers are the placeholders. You can assume them to be variables in the email. We will be replacing them later.

Step 3:

Do exactly the same steps for sending an in app email explained in one of my previous tutorial, but rather than hardcoding the email body like this,

NSString *emailBody =
[NSString stringWithFormat:@"%@\n\n
Sent from MyGreatApp on iPhone. Download yours from AppStore now!
", content, pageLink, iTunesLink];
Read it from your HTML File you created in Step 2.

NSString *langString = [[userDefaults dictionaryRepresentation] objectForKey:@"NSLocaleCode"];
NSString *emailFileName = [NSString stringWithFormat:@"email_%@.html", langString];
NSString *emailFilePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent: emailFileName];
NSString *body = [NSString stringWithContentsOfFile:emailFilePath encoding:NSUTF8StringEncoding error:nil];


Note that, I’m appending the locale code with the email filename. That means you should create your email file by name email_en_US.html and similarly for other language files.

Step 4:

Replace placeholder texts with your contents generated within the app.

body = [body stringByReplacingOccurrencesOfString:@"//TEXT_PLACEHOLDER//" withString:myText];
body = [body stringByReplacingOccurrencesOfString:@"//FRIENDNAME_PLACEHOLDER//" withString:myFriendName];


The values myText and myFriendName should be passed to this email function.

With this architecture in place, you can format your email, change language and do a lot more without much changes to your code. After all, writing cleaner code is more important in the long run.

–
Mugunth