51. Adding Configuration Options to a WidgetKit Widget

The WidgetDemo app created in the preceding chapters is currently only able to display weather information for a single geographical location. Through the use of configuration intents, it is possible to make aspects of the widget user configurable. In this chapter we will enhance the widget extension so that the user can choose to view the weather for different cities. This will involve some minor changes to the weather data, the modification of the SiriKit intent definition and updates to the widget implementation.

51.1 Modifying the Weather Data

Before adding configuration support to the widget, an additional structure needs to be added to the widget data to provide a way to associate cities with weather timelines. Add this structure by modifying the WeatherData.swift file as follows:

import Foundation

import WidgetKit

 

struct LocationData: Identifiable {

    

    let city: String

    let timeline: [WeatherEntry]

    

    var id: String {

        city

    }

    

    static let london = LocationData(city: "London",

                                 timeline: londonTimeline)

...

51.2 Configuring the Intent Definition

The next step is to configure the intent definition which will be used to present the user with widget configuration choices. When the WeatherWidget extension was added to the project, the “Include Configuration Intent” option was enabled, causing Xcode to generate a definition file named WeatherWidget.intentdefinition located in the WeatherWidget project folder. Select this file to load it into the intent definition editor where it will appear as shown in Figure 51-1:

Figure 51-1

Begin by making sure that the Configuration intent (marked A in Figure 51-1 above) is selected. This is the intent that was created by Xcode and will be referenced as ConfigurationIntent in the WeatherWidget.swift file. Additional intents may be added to the definition by clicking on the ‘+’ button (D) and selecting New Intent from the menu.

The Category menu (B) must be set to View to allow the intent to display a dialog to the...

51.3 Modifying the Widget

With the intent configured, all that remains is to adapt the widget so that it responds to location configuration changes made by the user. When WidgetKit requests a timeline from the provider it will pass to the getTimeline() method a ConfigurationIntent object containing the current configuration settings from the intent. To return the timeline for the currently selected city, the getTimeline() method needs to be modified to extract the location from the intent and use it to return the matching timeline.

Edit the WeatherWidget.swift file, locate the getTimeline() method within the provider declaration and modify it so that it reads as follows:

func getTimeline(for configuration: ConfigurationIntent, in context: Context,

              completion: @escaping (Timeline<Entry>) -> ()) {

    

    var chosenLocation: LocationData...

51.4 Testing Widget Configuration

Run the widget extension on a device or simulator and wait for it to load. Once it is running, perform a long press on the widget to display the menu shown in Figure 51-7 below:

Figure 51-7

Select the Edit Widget menu option to display the configuration intent dialog as shown in Figure 51-8:

Figure 51-8

Select the Miami location before tapping on any screen area outside of the dialog. On returning to the home screen, the widget should now be displaying entries from the Miami timeline.

Note that the intent does all of the work involved in presenting the user with the configuration options, automatically adjusting to reflect the type and quantity of options available. If more cities are included in the enumeration, for example, the intent will provide a Choose button which, when tapped, will display a scrollable list of cities from which to choose:

Figure 51-9

51.5 Customizing the Configuration Intent UI

The final task in this tutorial is to change the accent colors of the intent UI to match those used by the widget. Since we already have the widget background color declared in the widget extension’s Assets.xcassets file from the steps in an earlier chapter, this can be used for the background of the intent UI.

The color settings for the intent UI are located in the build settings screen for the widget extension. To find these settings, select the WidgetDemo entry located at the top of the project navigator panel (marked A in Figure 51-10 below), followed by the WeatherWidgetExtension entry (B) in the Targets list:

Figure 51-10

In the toolbar, select Build Settings (C), then the Basic filter option (D) before scrolling down to the Asset Catalog Compiler – Options section (E).

Click on the WidgetBackground value (F) and change it to weatherBackgroundColor. If required, the foreground color used within the intent...

51.6 Summary

When a widget is constructed using the intent configuration type (as opposed to static configuration), configuration options can be made available to the user by setting up intents and parameters within the SiriKit intent definition file. Each time the provider getTimeline() method is called, WidgetKit passes it a copy of the configuration intent object, the parameters of which can be inspected and used to tailor the resulting timeline to match the user’s preferences.