EmailComposer

API Reference: UI.EmailComposer

Basic EmailComposer

It is possible to send emails without leaving the app. EmailComposer comes for help for this case.

TypeScript code blocks includes example of how to implement, override & add components with theme. Create page with UI-Editor to make your page themeable and then able to implement themeable components programmatically. Once page created with UI-Editor, it generates class under scripts/generated/pages. Extend that class with below typescript classes.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require("sf-core/device/system");
import File = require('sf-core/io/file');
import FileStream = require('sf-core/io/filestream');
import EmailComposer = require('sf-core/ui/emailcomposer');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
emailcomposer: EmailComposer;
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = System.OS === "Android" ? this : this.parentController;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
//@ts-ignore
if (EmailComposer.canSendMail()) {
this.emailcomposer = new EmailComposer();
this.emailcomposer.setBCC(["bcc@smartface.io", "bcc2@smartface.io"]);
this.emailcomposer.setCC(["cc@smartface.io", "cc2@smartface.io"]);
this.emailcomposer.setTO(["to@smartface.io", "to2@smartface.io"]);
this.emailcomposer.setMessage("message");
this.emailcomposer.setSubject("subject");
this.emailcomposer.onClose = (): void {
console.log("onClose");
};
var imageFile = new File({
path: 'images://smartface.png'
});
this.emailcomposer.android.addAttachmentForAndroid(imageFile);
if (System.OS == "iOS") {
var imageFileStream = imageFile.openStream(FileStream.StreamType.READ, FileStream.ContentMode.BINARY);
var fileBlob = imageFileStream.readToEnd();
imageFileStream.close();
this.emailcomposer.ios.addAttachmentForiOS(fileBlob, "image/png", "smartface.png");
}
this.emailcomposer.show(this);
}
}
JavaScript
const File = require('sf-core/io/file');
const FileStream = require('sf-core/io/filestream');
const EmailComposer = require('sf-core/ui/emailcomposer');
const System = require('sf-core/device/system');
if (EmailComposer.canSendMail()) {
var emailcomposer = new EmailComposer();
emailcomposer.setBCC(["bcc@smartface.io", "bcc2@smartface.io"]);
emailcomposer.setCC(["cc@smartface.io", "cc2@smartface.io"]);
emailcomposer.setTO(["to@smartface.io", "to2@smartface.io"]);
emailcomposer.setMessage("message");
emailcomposer.setSubject("subject");
emailcomposer.onClose = function() {
console.log("onClose");
};
var imageFile = new File({
path: 'images://smartface.png'
});
emailcomposer.android.addAttachmentForAndroid(imageFile);
if (System.OS == "iOS") {
var imageFileStream = imageFile.openStream(FileStream.StreamType.READ, FileStream.ContentMode.BINARY);
var fileBlob = imageFileStream.readToEnd();
imageFileStream.close();
emailcomposer.ios.addAttachmentForiOS(fileBlob, "image/png", "smartface.png");
}
emailcomposer.show(page);
}

Sending Email with Inter-app Communication

Sending e-mail with leaving the app is also possible with inter-app communication. Check down below for sample code.

JavaScript
JavaScript
Application.call("mailto:info@smartface.io");