Building Inline UI for Siri Shortcuts Using Custom Intents
- Part 1 — Building Siri Shortcuts Using NSUserActivity in iOS 12
- Part 2 — Getting Started with Siri Shortcuts in iOS 12 Using Intents
In the last post, I explained how to get started with building Siri Shortcuts using Intents. We made good progress but still we had to open our app to create a new order. In this post I will explain how you can create custom UI which is displayed inline allowing you to place an order without even opening the app.
[If you have been enjoying my posts and want to learn more about Siri Shortcuts then perhaps you might be interested in my Udemy course “Mastering Siri Shortcuts for iOS”]
Implementation
The first step in unleashing the power of custom intents is to add a new target as “Intents Extension”. We will call this target “HotCoffeeIntents”. This is shown in the screenshot below:
Go through the steps and make sure that the checkbox for “Include UI Extension” is checked. This will add a new target which will be responsible for the inline user interface of of the shortcut.
HotCoffeeIntents target will need to know about our OrderCoffeeIntent class. This means you need to add “Intents.intentdefinition” file to HotCoffeeIntents and HotCoffeeIntentsUI targets as shown below:
Handling Intents
Now, it is time to handle our intents. This will be implemented in IntentHandler.swift file which is part of the HotCoffeeIntents target. First make sure that IntentHandler conforms to the OrderCoffeeIntentHandling protocol.
OrderCoffeeIntentHandling protocol is automatically generated when you add the Intents definition file
OrderCoffeeIntentHandling protocol requires the implementation of the handle function. Handle function is triggered when the order has been placed. Apart from the handle function we will also provide the implementation of the confirm function which is fired before the order is placed. This is to confirm that we are ready to handle an order. The implementation is shown below:
Go ahead and run your application, you will notice that now it displays a default inline user interface when you use the shortcut.
Great! In the next section we will learn how to customize the inline Siri Shortcut user interface.
Creating Inline User Interface
The HotCoffeeIntentsUI project is responsible for the inline interface of the shortcut. Open up MainInterface.storyboard and add two UIViews.
You may want to drop the new UIViews in the document outline window. We found this approach to be much easier.
Our first view will be responsible for showing the invoice to the user. The second view will be responsible for showing a confirm message about their order.
Design your view anyway you like. Here is the screenshot of our invoice and confirm views.
Each view is controlled by a custom class. Go ahead and add two new Swift files and name them InvoiceView.swift and ConfirmView.swift respectivily.
Make sure the custom class property in Storyboard is also pointing correctly to the InvoiceView and ConfirmView as shown below:
Next, jump into the IntentViewController.swift where we will inject the correct view into your root view.
Check out the implementation of configureView function as shown below:
We start by getting the instance of OrderCoffeeIntent. This is because OrderCoffeeIntent consists of coffeeName and deliveryLocation properties which we would like to display on our custom view.
Based on the intentHandlingStatus we either inject the InvoiceView or ConfirmView. The implementation of displayInvoice is shown below:
There is one more thing you need to do to make your custom UI appear. Open the info.plist file in HotCoffeeIntentsUI project and add a reference to the OrderCoffeeIntent class as shown below:
That’s it! Let’s run our application and place an order for a hot coffee :)
If you have enjoyed this post and want to learn more about Siri Shortcuts then check out my 3+ hour Udemy course “Mastering Siri Shortcuts in iOS”. The course goes into much more detail in how to create Siri Shortcuts using NSUserActivity, Intents, Custom Responses, Custom User Interface and much more.
