This tutorial will go over how to create a Share Extension with multiple configuration items. This will allow the user to input multiple different types of fields within a Share Extension’s Post. These fields could be used to select a category or to edit a value!
Creating a Share Extension
Creating a Share Extension is very easy in XCode!
Just navigate to File -> New -> Target and under the iOS tab, click “Share Extension”
Then name your Share Extension. (It is important to note that the name you give your Share Extension in this part is exactly what the user will see when sharing an item)
This will create a new Share Extension target with a ShareExtensionViewController that looks like the following.
It is important to note that the ShareViewController is not of type “UIViewController”. It is a “SLComposeServiceViewController” which is a special View Controller type for Extensions. The default view of the SLComposeServiceViewController looks like the following.
It automatically grabs an image of the web page and fills the text area with the title of the webpage. However we would like to add more fields to post more information than that just an image and a little text!
Adding Configuration Items
The only way to add more fields in a Share Extension is to add configuration items. Configuration items are created in the Share View Controller’s configurationItems() method.
Let’s create a configuration item.
The first block of code…
Creates a configurationItem of type SLComposeSheeConfigurationItem. It is a lazy variable which means it will be initialized as soon as it is needed. The configuration item has a few properties such as “title”, “value”, and “tapHandler”. All of these properties are set when the variable is initialized. The “tapHandler” property needs a function to run when the configuration item is tapped.
The second block of code…
The function that will be called when the configuration item is tapped. We will implement this later, so for now we will print a message.
The third block of code…
The ShareViewController’s configurationItems() method. We return the configuration item we configured in an array. We return the item in an array because it is possible to implement multiple configuration items in a Share Extension!
Testing the Configuration Item
At this point you should be able to run the Share Extension and see if the message is printed to console when you click on the configuration item.
To run the Share Extension click on the play button at the top left of XCode while making sure that the target is set to your Share Extension (not the main app).
Then you will be asked to select which application you would like to run the Share Extension with. I typically run it in Safari and test it with Google’s homepage for simplicity.
Once you’re on a webpage in Safari, click the share icon at the bottom of Safari, then select your share extension. It will show a popup window with the configuration item we added!
If you click on the configuration item you should see the message printed to console!
Editing the Configuration Item’s Value
At the point, our configuration item simply prints a message to the console. However we would like to be able to click on it and edit it’s value.
To edit the configuration item’s value we will be presenting another view controller that will allow the user to edit the configuration item. Once the item is edited, the new value will be sent back to the Share View Controller through a delegate relationship.
If you are unfamiliar with how to use delegates to communicate between View Controllers, check out View Controller Delegate Relationships.
Create a new ViewController under the Share Extension target and name it EditItemViewController.
We need to define an EditItemViewControllerDelegate which contains a method to handle when the user is done editing the item. Add the delegate protocol above the ViewController.
This protocol method will be implemented by our ShareViewController later.
Add the following properties to the EditItemViewController.
We need a reference to the delegate and the current value of the item.
Then we create a lazy variable of a UITextView which creates a textView within a frame using the parent view’s “minX”, “minY”, “width”, and “height”. This will ensure that the TextView fills the entire frame of the View Controller.
Now add the following code in the EditItemViewController.
In the viewDidLoad() method…
- Set the title of the View Controller
- Set the TextView’s text to the current value of the item
- Add the textView as a subview to the EditItemViewController
- Set the textView to be the first responser which will set the user’s cursor on the textView and open the keyboard when the ViewController is displayed
- Create a Bar Button for the user to complete the editing of the item. This button will call the doneButtonClicked() method.
In the doneButtonClicked () method…
- Get the new value from the textView
- Call the delegate method passing in the new value. (The delegate method will be implemented by the Share View Controller in the next step).
Selecting a Category | Editing a Value
In this tutorial we are going over how to edit a configuration item’s value. This is applicable when the user needs to type in information. However if the user needs to select from a list of categories or a dynamic set of values, a Table View Controller can be presented instead of a normal View Controller. It will work in the same way where you create a delegate protocol, but instead of using a “Done Bar Button method” to trigger the delegate’s method, the Table View’s didSelectRowAt() method will be used when the user selects a row.
If you are unfamiliar with creating Table Views in Swift, check out Creating a Simple Table View in Swift
Displaying the EditItemViewController from the ShareViewController
Now we need to set up our ShareViewController to display the EditItemViewController.
Make the ShareViewController conform to our custom EditItemViewControllerDelegate Protocol.
In the editItemConfigurationButtonTapped() method replace the print() line with the following.
This creates an new instance of the EditItemViewController and sets its current value property to be the configuration item’s current value and the delegate to the ShareViewController (“self”). Then we call the pushConfigurationViewController() method which displays the EditItemViewController by putting it on the view stack.
Handling the Item’s new Value
Lastly, implement our custom protocol’s delegate method in the ShareViewController which will be called by the EditItemViewController with the new edited value.
In the itemFinishedEditing() method…
We set the configuration item’s value to the new value then call the popConfigurationViewController() method. This method will un-display theEditViewController by popping it off of the view stack.
At this point you should be able to fully edit the configuration item!
Run the Share Extension and try editing the configuration item!
Click on the configuration item
Change the value
Click “Done” and the new value will be set on the configuration item!
Article Written By,
Thomas Oropeza
