{"id":6126,"date":"2017-09-13T13:02:55","date_gmt":"2017-09-13T13:02:55","guid":{"rendered":"https:\/\/9series-blog.staging9.com\/?p=6126"},"modified":"2026-03-03T10:45:42","modified_gmt":"2026-03-03T10:45:42","slug":"build-share-extension-ios-using-swift","status":"publish","type":"post","link":"https:\/\/www.9series.com\/blog\/build-share-extension-ios-using-swift\/","title":{"rendered":"Build a Share Extension in iOS Using Swift"},"content":{"rendered":"<p>Hello everyone, as we all know that Share Extension is appeared from iOS 8, then the capability to share content with other entities, such as social sharing websites or upload services can be done in an easy and convenient way.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/Build-a-Share-Extension-in-iOS-Using-Swift.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2708\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/Build-a-Share-Extension-in-iOS-Using-Swift.jpg\" alt=\"Build-a-Share-Extension-in-iOS-Using-Swift\" width=\"800\" height=\"500\" \/><\/a><\/p>\n<p>We, 9series, an <a href=\"https:\/\/www.9series.com\/services\/ios-application-development.html\" target=\"_blank\">iOS application development company<\/a> has started doing all the development using Advanced Programming Language Swift.<\/p>\n<p>So today, we are going to build a Shared Extension app in iOS10 with <a href=\"https:\/\/9series.com\/blog\/swift-4-a-step-to-ahead-advanced-programming-language\/\" target=\"_blank\">Swift 3.0<\/a>, an ability to show an icon on the common share-sheet that associates with our main app, which handles the sharing of the content that the user has requested. So the user can easily switch from one app to another, for example, we are sharing a photo from the album with some content that switches our app where we want to upload data to the server.<\/p>\n<p>This is mainly a programming article, so you are required to have Xcode 8 on Mac.<br \/>\nLet\u2019s get started !!!<\/p>\n<p style=\"margin-bottom: 0px\"><span style=\"font-weight: bold\">1. Make a new Xcode Project<\/span><\/p>\n<p>First Create a cocoa touch Single View Application in <a href=\"https:\/\/9series.com\/blog\/want-to-create-your-own-ios-app-with-xcode8-development-company-india\/\" target=\"_blank\">Xcode 8<\/a> with some basic UI. Like it is shown below<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/ios-dev.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2729\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/ios-dev.png\" alt=\"ios dev\" width=\"800\" height=\"512\" \/><\/a><\/p>\n<p>Design the screen with UILabel, UIImageView, UITextView and with UIButton.<br \/>\nWhen user comes with some sharable content from parent app, we can upload or we can use anywhere in our app.<\/p>\n<p>For Eg, let\u2019s create the Share Extension.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-01-21-at-3.35.36-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2710\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-01-21-at-3.35.36-PM.png\" alt=\"Screen Shot 2017-01-21 at 3.35.36 PM\" width=\"830\" height=\"561\" \/><\/a><\/p>\n<p>Give some proper name of that extension and it will show you popup view for activating your extension scheme. Choose Activate to use this scheme for building and debugging.<\/p>\n<p>Note: Schemes can be chosen from the toolbar or Product menu.<\/p>\n<p style=\"margin-bottom: 0px\"><span style=\"font-weight: bold\">3. Make an App Group<\/span><\/p>\n<p>We want to communicate two app for sharing some content, but Apple doesn&#8217;t want a complete free flow of data between the two. Apple recommends a shared NSUserDefaults as a meeting ground where the two app can exchange their data.<\/p>\n<p>Now, we need to make an app group.<\/p>\n<p>Click on your project in the Navigator Pane of Xcode, click on capabilities and your app under the target list turns on App Groups. Give it a name like \u201cgroup.BUNDLE IDENTIFIER\u201d.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-01-21-at-3.53.56-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2711\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-01-21-at-3.53.56-PM.png\" alt=\"Screen Shot 2017-01-21 at 3.53.56 PM\" width=\"752\" height=\"600\" \/><\/a><\/p>\n<p>Now click on your extension and do the same.<\/p>\n<p style=\"margin-bottom: 0px\"><span style=\"font-weight: bold\">4. Implementing Share Extensions in Swift<\/span><\/p>\n<p>First open your viewController, we won\u2019t go into much detail, because it&#8217;s a destination viewController. So we can read content data from User Defaults which is shared by user from Share ViewController.<\/p>\n<p>We have also created an IBAction of Upload button, so that content and photo which is shared by user can be used anywhere in our app.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2712\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/1.png\" alt=\"1\" width=\"800\" height=\"525\" \/><\/a><\/p>\n<p>Here, \u201csharedIdentifier\u201d is the UserDefaults suiteName that we have used for the app group name. An extensionContext where we get a list of NSExtensionItems. This is a fixed array of data sent to our extension from a parent app. We are getting photo and content from our photos app that are already set to our main app.<\/p>\n<p>Let&#8217;s look at the \u201cShareViewController\u201d from our Shared Extension Folder which is subclass of SLComposeServiceViewController. SLComposeServiceViewController has some methods and properties associated with the lifecycle of a share-sheet composition view.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2713\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/2.png\" alt=\"2\" width=\"800\" height=\"262\" \/><\/a><\/p>\n<p><span style=\"font-weight: bold\">isContentValid() :-<\/span> It is called every time when the content in the compose view changes. Here, we can check the input data is valid or not. It is called first, and will disable the post button when it evaluates to false.<\/p>\n<p><span style=\"font-weight: bold\">didSelectPost() :-<\/span> As the name suggests, it is called when the user presses the post button. Here we can do something with the user input. Once the upload is scheduled, you must call completeRequestReturningItems([], completionHandler:) so that the host app can un-block its UI. When the upload request is done, it calls the completion handler that was passed into the previous mentioned function call.<\/p>\n<p><span style=\"font-weight: bold\">configurationItems() :-<\/span> Here, we can add more things for the user to select when they are sharing. In our case we are sharing a photo with contentText. You can also make it more dynamic with some other controls.<\/p>\n<p><span style=\"font-weight: bold\">contentText :-<\/span> A string which represents what the user has typed into the composer.<\/p>\n<p><span style=\"font-weight: bold\">charactersRemaining :-<\/span> Is a number which appears on the compose sheet. When negative number shows, its appearance becomes red.<\/p>\n<p>Here is the code of \u201cShareViewController\u201d<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2714\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/3.png\" alt=\"3\" width=\"800\" height=\"352\" \/><\/a><\/p>\n<p>Here, we are selecting one image from photo album and then clicking on share button, it will open share sheet with our Share Extension app Icon.<\/p>\n<p>Select that app and it will open composition view.<\/p>\n<p>We have mentioned maximum characters of contentText as 100, so if you enter more than 100 characters, than it will generate alert message and post button will be disabled. You can also check number of characters at the end of compose sheet.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2715\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/4.png\" alt=\"4\" width=\"800\" height=\"185\" \/><\/a><\/p>\n<p>Configuration! items is where we can add more things for the user selection, when they are sharing. Like, Open UITableViewController as subview Controller and selecting User Input it will display as item value at the bottom of compose sheet.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2716\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/5.png\" alt=\"5\" width=\"800\" height=\"490\" \/><\/a><\/p>\n<p>Configuration! items has title, value, and a tapHandler. So you can add extra functionality for selection from User.<\/p>\n<p>ExtensionContext has list of attachment as NSExtensionItem. We\u2019ll loop through the attachments, and look for one typed as an image. It will have the type identifier kUTTypeImage. NSItemProvider items are lazily loaded images, videos, URLs and so on. We\u2019ll load it using \u201cloadItemForTypeIdentifier\u201d. This has a completion handler, where we\u2019ll read the image from the URL, and then we\u2019ll save it to defaults.<\/p>\n<p>After pressing Post Button, It will save Image in UserDefaults with \u201cImage\u201d key, and contentText with \u201cName\u201d key.<\/p>\n<p>We have created two utility methods for saving data to user defaults and for alert message.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2717\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/6.png\" alt=\"6\" width=\"800\" height=\"244\" \/><\/a><\/p>\n<p>Till now, Apple wouldn\u2019t accept this in their <a href=\"https:\/\/itunes.apple.com\/in\/genre\/ios\/id36?mt=8\" target=\"_blank\">app store<\/a>. We need to tell iOS when to show our share extension, and what can be selected. Otherwise when we compile we\u2019ll get a warning.<\/p>\n<p>\u201cWarning: Embedded binary\u2019s NSExtensionActivationRule is TRUE PREDICATE\u201d<\/p>\n<p>So for that, open the \u201cinfo.plist\u201d as source code by right clicking on it. We\u2019re going to change the NSExtensionAttributes section. This means our extension is activated only for images, and only when it\u2019s a single image. If you select more than one image, the extension app automatically hides from share-sheet.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2718\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/7.png\" alt=\"7\" width=\"800\" height=\"218\" \/><\/a><\/p>\n<p>You can change your display name of your app in share sheet by replacing the code in the \u201cinfo.plist\u201d of your Extension.<\/p>\n<p style=\"margin-bottom: 0px\"><span style=\"font-weight: bold\">5. Test Your Share Extension<\/span><\/p>\n<p style=\"margin-bottom: 0px\">1. First you have to simply run your app.<\/p>\n<p style=\"margin-bottom: 0px\">2. Then run your Share Extension.<\/p>\n<p style=\"margin-bottom: 0px\">3. When suggested to choose an app to run, choose Photos.<\/p>\n<p style=\"margin-bottom: 0px\">4. Once the extension starts running, select a photo and tap on the Share button.<\/p>\n<p style=\"margin-bottom: 0px\">5. On the first run, you will need to add your extension to the share sheet.<\/p>\n<p style=\"margin-bottom: 0px\">6. Click on the More button to the right of the other share icons and turn on the switch for your extension &amp; then select Done.<\/p>\n<p style=\"margin-bottom: 0px\">7. Now you will be able to see your extension icon in share &#8211; sheet.<\/p>\n<p>8. Select an individual photo and click on share. By selecting your app, add some content and press post button.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/iso-development1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2720\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/iso-development1.png\" alt=\"iso development\" width=\"800\" height=\"500\" \/><\/a><\/p>\n<p>The image will be saved to your main app. To confirm this, redirect to your app. You can check the content you entered in the textview and the image above the content.<\/p>\n<p><a href=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/ios-dev-apple1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2734\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/ios-dev-apple1.png\" alt=\"ios dev apple\" width=\"800\" height=\"512\" \/><\/a><\/p>\n<p>In this article, our <a href=\"https:\/\/www.9series.com\/services\/ios-application-development.html\" target=\"_blank\">best iOS application developers in USA<\/a>, have only covered some basic UI. You can also make it more dynamic with other controls.<\/p>\n<p>Hopefully, all of this will help you share data with your parent app.<\/p>\n<p><a href=\"https:\/\/www.9series.com\/services\/mobile-app-development.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/9series-blog.staging9.com\/wp-content\/uploads\/2017\/09\/iPhone-Application-Development-Service.png\" alt=\"iPhone Application Development Service\" width=\"688\" height=\"280\" border=\"0\" \/><\/a><\/p>\n<p style=\"text-align: left\">Happy Coding! and feel free to share your own experience on \u201cinfo@9series.com\u201d.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello everyone, as we all know that Share Extension is appeared from iOS 8, then the capability to share content with other entities, such as social sharing websites or upload&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"dsgo_overlay_header":false,"dsgo_overlay_header_text_color":"","dsgo_overlay_skip_top_bar":false,"_designsetgo_exclude_llms":false,"footnotes":""},"categories":[1428,1439,6],"tags":[2111,1840,2112,2113,2114,2115,1713,2116,1815],"class_list":["post-6126","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apple-2","category-ios","category-mobile-app-development","tag-app-store","tag-best-ios-application-developers-in-india","tag-extension-in-ios-using-swift","tag-ios-application-development-company","tag-ios-extension","tag-ios10","tag-mobile-app-development","tag-swift-3-0","tag-xcode-8"],"_links":{"self":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/6126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/comments?post=6126"}],"version-history":[{"count":1,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/6126\/revisions"}],"predecessor-version":[{"id":6141,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/posts\/6126\/revisions\/6141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/media\/6127"}],"wp:attachment":[{"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/media?parent=6126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/categories?post=6126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.9series.com\/blog\/wp-json\/wp\/v2\/tags?post=6126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}