Displaying Shortcut Information in a Siri Watch Face Card

Display and customize watch-specific shortcut information with a default card template.

Overview

The Siri watch face displays a relevant shortcut in a card that can provide the following information:

App icon and name (supplied by the system)
Title, subtitle, and custom image (supplied by the intent or user activity used to create the shortcut, or by an INDefaultCardTemplate object)

Display Intent-Based Shortcuts

When your app uses an INIntent object to create the shortcut, the system retrieves the intent’s title and subtitle from the intent settings defined in the intent definition file. To include an image, call setImage:forParameterNamed: on the intent and pass in an INImage.

The listing below sets the image for a order soup intent in the Soup Chef sample app.

orderSoupIntent.setImage(INImage(named: menuItem.iconImageName), forParameterNamed: \OrderSoupIntent.soup)

Display User Activity-Based Shortcuts

When your app uses an NSUserActivity object to create the shortcut, the system retrieves the title from the title property of the user activity. To specify a subtitle, create an CSSearchableItemAttributeSet with the content type of kUTTypeItem, and set the contentDescription property. To include an image, set the thumbnailData on the attribute set.

The listing below sets the title, subtitle, and image for the NSUserActivity object.

import CoreSpotlight
import MobileCoreServices

let userActivity = NSUserActivity(activityType: "com.myapp.myactivity")
userActivity.title = "Title"

let attributes = CSSearchableItemAttributeSet(itemContentType: kUTTypeItem as String)
attributes.contentDescription = "Subtitle"
attributes.thumbnailData =  imageLiteral(resourceName: "custom-image").pngData()

userActivity.contentAttributeSet = attributes

Use Card Templates

If you want to show a UI specific to the watch—for example, to display a shortcut’s title that is shorter than the one Siri displays on the user’s iPhone or iPad—provide the relevant shortcut a default card template by setting the watchTemplate property. The template allows your app to customize the title, subtitle, and image. (You cannot change or remove the app icon and name shown in the card.)

The listing below sets the template for an order intent in the Soup Chef sample app.

let order = Order(quantity: 1, menuItem: menuItem, menuItemOptions: [])
let orderIntent = order.intent

guard let shortcut = INShortcut(intent: orderIntent) else { return nil }

let suggestedShortcut = INRelevantShortcut(shortcut: shortcut)

let localizedTitle = NSString.deferredLocalizedIntentsString(with: "ORDER_LUNCH_TITLE") as String
let template = INDefaultCardTemplate(title: localizedTitle)
template.subtitle = NSString.deferredLocalizedIntentsString(with: menuItem.shortcutNameKey + "_SUBTITLE") as String
template.image = INImage(named: menuItem.iconImageName)

suggestedShortcut.watchTemplate = template

The code above creates the Siri watch face card shown in the figure below. To download the complete sample code, see Soup Chef: Accelerating App Interactions with Shortcuts.

[Image]

The system displays the information in one of four layouts based on the information your app provides in the card template. For instance, if you don’t provide an image, the system uses a layout that displays only the title and subtitle fields. And if you provide only the title, the system uses a layout that can wrap the title on two lines.