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(["[email protected]", "[email protected]"]);
        this.emailcomposer.setCC(["[email protected]", "[email protected]"]);
        this.emailcomposer.setTO(["[email protected]", "[email protected]"]);
        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(["[email protected]", "[email protected]"]);
    emailcomposer.setCC(["[email protected]", "[email protected]"]);
    emailcomposer.setTO(["[email protected]", "[email protected]"]);
    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:[email protected]");
​​​
Dialog
FloatingMenu
Last updated 7 months ago