How to Create iOS Widget (Today Extension)

Tri Rejeki
Jun 12 · 3 min read
Photo by Hal Gatewood on Unsplash

Overview

Widget is an extension that displays a small amount of real time useful information or app-specific functionality.

Widgets appear above the quick action list when you apply pressure to an app icon on the Home screen using 3D Touch. People also add the widgets they care about to the Search screen, which is accessed by swiping to the right on the Home screen and the Lock screen. Your goal should be to design a widget that people want to add to the Search screen.


Today Extension

Today Extension is an extension that help you to share your app’s functionality. These allow you to present information in the Notification Center and Lock Screen. These are a great way to provide immediate and up-to-date information that the user is interested in.

Today Extension can only exist if you already have main application. If you have not have the main application, please make it first. ^_^

How to Add Today Extension

In your existing project choose File > New > Target.

New Target Option Dialog

After that, you will need to fill the product name of Today Extension and click Finish button. It will generate the basic file of Today Extension.

Generated File for Today Extension

As you can see, after creating Today Extension, you will have TodayExt folder (TodayExt is the product name). The files that are contained in Today Extension are:

TodayViewController.swift — Contains the source code for the View Controller representing the widget in the Today view

MainInterface.storyboard — The storyboard file containing the user interface of the widget as it will appear within the Today view

Info.plist — The information property list for the extension.

How to Run the Widget

Now, shall we run the widget?

First, run your application Command (⌘)-R, then after your application is running, move your application into widget pages.

Screenshot of Simulator How to Run/Add Widget (Today Extension)
  1. On Widget/Search pages, click the Edit button. It will display Widgets in your device.
  2. As you can see, there is TodayExt from widget list. Click at green + button on the left.
  3. Press Done button.

That’s it! Congratulation on your first widget!

Now, you can modify your Today Extension.


Debug a Today Extension

How to debug your widget when it crashes and shows “Unable to Load” error message?

With the application running in your device/simulator, open the widget. Then, when you have your widget open, go to Xcode > Debug > Attach to Process and find your widget name.

Note this will only work if you have your widget opened. You can set breakpoints and debug step by step to find out why the “Unable to Load” message appears.

Have a nice day and have fun with Today Extension. :)



Tri Rejeki is an iOS Developer at GITS Indonesia who has been known as the mother for iOS team member at GITS. She has almost 10 years experience in the IT field on various roles such as Java Programmer and Android Developer.

GITS Apps Insight

Journal about apps development for business and eCommerce from GITS Indonesia, a Google Certified Agency.

Tri Rejeki

Written by

iOS Developer & Technical Leader @ GITS Indonesia

GITS Apps Insight

Journal about apps development for business and eCommerce from GITS Indonesia, a Google Certified Agency.