API Reference: Share​
Share allows sending a text, image, file or contacts over other apps on the device. Blacklist works for iOS only.
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.
Multiple Sharing
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 Contacts = require('sf-core/device/contacts');import File = require("sf-core/io/file");import Share = require('sf-core/share');import Image = require('sf-core/ui/image');​​//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {​constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.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;this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;}}​/*** @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 = true;headerBar.visible = true;}​/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();​let image = Image.createFromFile("images://smartface.png");let file = new File({path: 'path to the file'});​let text = "Hello from Smartface";let contact = new Contacts.Contact();contact.firstName = "Smartface";​Share.share({ items: [text, file, image, contact], page: this , blacklist: [Share.ios.Twitter, Share.ios.Facebook] });​}​​
const FlexLayout = require('sf-core/ui/flexlayout');const Share = require('sf-core/share');const Image = require('sf-core/ui/image');const File = require("sf-core/io/file");const Application = require('sf-core/application');const extend = require('js-base/core/extend');const Contacts = require('sf-core/device/contacts');const Page = require('sf-core/ui/page');​var Page1 = extend(Page)(function(_super) {_super(this, {onShow: function(params) {Application.statusBar.visible = false;this.headerBar.visible = false;},onLoad: function(params) {const page = this;let image = Image.createFromFile("path to the image");let file = new File({path: "path to the file"});let text = "Hello from Smartface";let contact = new Contacts.Contact();contact.firstName = "Smartface";Share.share({ items: [text, file, image, contact], page, blacklist: [Share.ios.Twitter, Share.ios.Facebook] });}});this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;});module.exports = Page1;
We have recommend to use shareContacts method while sharing just contacts. Because of there are some application which support only a contact file at a time.
File Sharing
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 Contacts = require('sf-core/device/contacts');import File = require("sf-core/io/file");import Share = require('sf-core/share');import Image = require('sf-core/ui/image');​​//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {​constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.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;this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;}}​/*** @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 = true;headerBar.visible = true;}​/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();​let file = new File({path: 'path to the file'});​Share.shareFile(file, this, []);}​​
const Page = require("sf-core/ui/page");const extend = require("js-base/core/extend");const FlexLayout = require('sf-core/ui/flexlayout');const Share = require('sf-core/share');const File = require('sf-core/io/file');​var Page1 = extend(Page)(function(_super) {_super(this, {onShow: function(params) {Application.statusBar.visible = false;this.headerBar.visible = false;}});this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;​var file = new File({path: 'path to the file'});Share.shareFile(file, this, []);});module.exports = Page1;
Image Sharing
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 Contacts = require('sf-core/device/contacts');import File = require("sf-core/io/file");import Share = require('sf-core/share');import Image = require('sf-core/ui/image');​​//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {​constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.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;this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;}}​/*** @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 = true;headerBar.visible = true;}​/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();​let image = Image.createFromFile('images://smartface.png');Share.share({ items: [image], page: this, blacklist: [] });}​​
const Page = require("sf-core/ui/page");const extend = require("js-base/core/extend");const FlexLayout = require('sf-core/ui/flexlayout');const Share = require('sf-core/share');const Image = require('sf-core/ui/image');​var Page1 = extend(Page)(function(_super) {_super(this, {onShow: function(params) {Application.statusBar.visible = false;this.headerBar.visible = false;}});this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;​var image = Image.createFromFile('path to the image');Share.shareImage(image, this, []);});module.exports = Page1;
Text Sharing
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 Contacts = require('sf-core/device/contacts');import File = require("sf-core/io/file");import Share = require('sf-core/share');import Image = require('sf-core/ui/image');​​//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {​constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.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;this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;}}​/*** @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 = true;headerBar.visible = true;}​/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();Share.share({ items: ["Hello from Smartface",], page: this, blacklist: [] });}​​
const Page = require("sf-core/ui/page");const extend = require("js-base/core/extend");const FlexLayout = require('sf-core/ui/flexlayout');const Share = require('sf-core/share');​var Page1 = extend(Page)(function(_super) {_super(this, {onShow: function(params) {Application.statusBar.visible = false;this.headerBar.visible = false;}});this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;​Share.shareText("Hello from Smartface", this, [Share.ios.Twitter, Share.ios.Facebook]);});module.exports = Page1;
The following example picks a contact then share it through many applications.
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 Contacts = require('sf-core/device/contacts');import Share = require('sf-core/share');import Page = require('sf-core/ui/page');import Button = require("sf-core/ui/button");import PermissionUtil = require("sf-extension-utils/lib/permission");​​//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {myButton: Button;​constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.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;this.layout.flexWrap = FlexLayout.FlexWrap.WRAP;}​shareContact(myContact: Contacts.Contact): void {if (System.OS === "Android") {PermissionUtil.getPermission(Application.Android.Permissions.READ_CONTACTS, 'Please go to the settings and grant permission').then(() => {Share.shareContacts({ items: [myContact], fileName: `${myContact.firstName}${myContact.middleName}${myContact.lastName}`, page: this, blacklist: [Share.ios.Twitter, Share.ios.Facebook] })}).then((reason) => {console.info('Permission rejected');});} else {Share.shareContacts({ items: [myContact], fileName: `${myContact.firstName}${myContact.middleName}${myContact.lastName}`, page: this, blacklist: [Share.ios.Twitter, Share.ios.Facebook] })}}}​/*** @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 = true;headerBar.visible = true;}​/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();​​​this.myButton = new Button({text: "PICK CONTACT",onPress: () => {//@ts-ignoreContacts.pick({page: this,onSuccess: (contact: any) => {this.shareContact(contact);},onFailure: function () {console.log("Something went wrong ");}});}});​this.layout.addChild(this.myButton, "myButton", ".sf-button", {marginTop: 250,marginRight: 50,marginLeft: 50,height: 60,backgroundColor: "#FF0000"});​}​​
const File = require("sf-core/io/file");const Image = require("sf-core/ui/image");const Share = require("sf-core/share");const Page = require("sf-core/ui/page");const Contacts = require("sf-core/device/contacts");const Button = require("sf-core/ui/button");const Application = require("sf-core/application");const Color = require("sf-core/ui/color");const Device = require('sf-core/device');const extend = require("js-base/core/extend");​var Page1 = extend(Page)(function (_super) {var page = this;_super(this, {onShow: function (params) {Application.statusBar.visible = false;this.headerBar.visible = false;}})​var myButton = new Button({marginTop: 250,marginRight: 50,marginLeft: 50,height: 60,text: "PICK CONTACT",backgroundColor: Color.RED,onPress: function () {Contacts.pickContact({page: page,onSuccess: function (contact) {console.log("Successfully picked ", contact);shareContact(contact);},onFailure: function (e) {console.log("Something went wrong ", e);}});}});​this.layout.addChild(myButton);​function shareContact(myContact) {let result = true;if (Device.System.OS === "Android") {result = Application.android.checkPermission(Application.android.Permissions.READ_CONTACTS);if (!result) {let permissionCode = 1001;Application.android.requestPermissions(permissionCode, Application.android.Permissions.READ_CONTACTS);}result = Application.android.checkPermission(Application.android.Permissions.READ_CONTACTS);}if (result) {Share.shareContacts({ items: [myContact], fileName: `${myContact.firstName}${myContact.middleName}${myContact.lastName}`, page: page, blacklist: [Share.ios.Twitter, Share.ios.Facebook] })}}});module.exports = Page1;
Example:​