Windows 11 Widgets

Intro

I'm Peter and this is the RoguePlanetoid Podcast where you will find insights about Microsoft or related platforms and technology, along with so much more whether you are beginner or an experienced professional or just interested in technology. Keep Current, Keep Coding!

Welcome

Welcome to episode twenty of the RoguePlanetoid Podcast about Windows 11 Widgets. Windows 11 Widgets are a convenient and glanceable way to keep you informed and productive without interrupting your workflow. Windows 11 Widgets are customisable interactive panels that provide quick and easy access to information or tasks directly from your Windows desktop, showing the latest news, weather and calendar events all in one convenient place by selecting the Widgets icon on the taskbar or using the keyboard shortcut Win + W.

Windows 11

Windows 11 is Microsoft's latest operating system launched back in October 2021 that is transforming the way we interact with PCs and brings a fresh modern look-and-feel, including the redesigned Start menu that can be centred that is more visually appealing and easier to navigate. Application windows in Windows 11 are easier to manage thanks to Snap Layouts and Snap Groups where you can organise Windows into different layouts that help you stay organised and efficient.

Windows 11 includes many enhancements to security including hardware-based isolation, encryption and malware protection that work together to safeguard user data and ensure a secure computing environment. Windows 11 is also designed to be supported on a wide range of modern hardware and devices, with an experience that is continuously innovating with new features, regular updates, enhancements, fixes and security patches to ensure that Windows 11 evolves as needed.

Windows 11 also has enhanced features that help boost productivity including virtual desktops that allow you to create separate desktops for different tasks or projects that help you stay focused or organised. Windows 11 is also enhanced with innovations such as Copilot that allows you to achieve anything with your own AI companion on any Windows 11 device or enjoy enhanced AI experiences with Copilot+PCs that are specialised for AI and ready for upcoming features such as Windows Recall.

Windows 11 of course features Widgets that provide quick access to relevant information or tasks at glance directly on your desktop. Widgets help you stay updated with a variety of information without interrupting your workflow that you can access from the Widgets Board to see all your Widgets by selecting the Widgets icon on the taskbar or using the Win + W keyboard shortcut. Widgets can be resized or even customised in many cases to display the information you need with many built-in Widgets including Weather, Traffic, Photos and Calendar which help you stay informed and organised that reduce the need to open an app or web browser. You can find out more about Windows 11 including the latest information, updates, hardware and more at windows.com or check out the link in the show notes.

Designing Widgets

Windows 11 Widgets are designed using Adaptive Cards which are platform-agnostic user interface snippets authored in JSON that are designed to be a lightweight data-interchange format that is flexible, allowing developers to create rich and interactive content that interacts with a host application. Adaptive Cards provide a consistent and efficient way to display information and actions regardless of the platform or device being used. Adaptive Cards when they are delivered to a host application are rendered into native user interface components to match the look-and-feel of the host environment by parsing the JSON to ensure it blends seamlessly with the surrounding user interface.

Adaptive Cards are not only used to render Windows 11 Widgets but are also used in Microsoft Teams to create rich and interactive messages within Teams chats or channels that can include images, input fields and buttons for actions ideal for surveys, approvals or displaying notifications. Adaptive Cards are also used in Microsoft Outlook with Outlook Actionable Messages to enable actions to be taken directly from email such as approving requests or filling out forms without leaving the inbox. Adaptive Cards are also used in Microsoft Viva to create engaging dashboards and personalised content for employees with Viva Connections. Adaptive Cards can be used to render content on other platforms including JavaScript, Windows Presentation Foundation, WinUI with Windows App SDK and even Android and iOS. Developers can always implement a custom rendering solution for Adaptive Cards on other platforms by implementing the Adaptive Cards Schema.

Adaptive Cards Schema supports Card Elements such as TextBlock, Image and Media with a MediaSource and CaptionSource for video along with RichTextBlock and TextRun for displaying text. Adaptive Cards support Containers such as Container, ColumnSet with Column and FactSet with Fact for displaying key / value pairs. Adaptive Card Containers also include ImageSet for images and Table with TableCell for displaying information in tabular form. Adaptive Cards Containers also support ActionSet for Actions including OpenUrl, Submit, ShowCard, ToggleVisiblity with TargetElement and Execute which can be used to gather input fields and send an event to the client. Adaptive Card Inputs include Text, Number, Date, Time, Toggle and Choice with ChoiceSet for groups of checkboxes or radio buttons along with Data Query for fetching dynamic choices. Adaptive Cards also have Types such as BackgroundImage and Refresh along with Authentication, TokenExchangeResource and AuthCardButton that are used for prompting and handling authentication. Finally Adaptive Cards support Metadata including a browser fallback that is used by some hosts.

Adaptive Cards can be created using a Designer that supports Containers, Elements, Inputs and Actions. You can drag-and-drop Elements onto the Designer to create the Card Structure for the Template of an Adaptive Card along with changing any Element Properties as needed, or you can use the Card Payload Editor to edit the JSON directly. Adaptive Cards also support binding JSON Data which can be set or edited using the Sample Data Editor in the Designer, which all comes together in a live preview of the Adaptive Card, which can be displayed as needed from a Select Host App including Microsoft Teams, Viva Connections and Widgets Board. The Widgets Board preview allows the Theme to be selected from Light or Dark along with the Container Size to be selected from Small, Medium and Large. Adaptive Cards can be easily created with the Designer where you can create a New Card from scratch or Explore examples or get Samples, then refer to the Schema to create the perfect experience, along with Documentation available to design Adaptive Cards, all of which can be found at adaptivecards.io or check out the link in the show notes.

Developing Widgets

Windows 11 Widgets can be developed in three key stages, the first stage is to create the user interface for the Widget using Adaptive Cards, which could be done using the Designer, to create the Template for the Widget. Adaptive Cards also enable dynamic binding of JSON data to populate the Widget user interface as needed. To create and update a Widget from your application you'll need to implement a Widget Provider, which will respond to requests from the Widget host and return a JSON structure of the Widget Template using an Adaptive Card along with the associated JSON data for the Widget.

The second stage to develop Windows 11 Widgets is to implement the Widget Provider using Windows App SDK. This can be done in a Progressive Web Application where you can create PWA-driven Widgets, or you can create a Widget Provider in a Win32 app using C# or C++ with WinRT. You will need to implement the Widget Provider Interface with the six methods used to communicate with the Widgets Board. The six methods for the Widget Provider are CreateWidget when the Widget has been added to the Widgets Board, DeleteWidget when the Widget has been removed from the Widgets Board, OnActionInvoked when an Action for a Widget has been invoked, OnWidgetContextChanged when the size of the Widget has been changed, Activate when the Widgets Board is interested in receiving updated content from the Widget Provider, and Deactivate when the Widgets Board is no longer interested in requesting updated content from the Widget Provider.

The final stage to develop Windows 11 Widgets using Windows App SDK is to register your Widget so it will be available in the Widgets Board. This is done in the Package.appxmanifest file to include the unique Class Id or GUID for the Widget Provider along with the Display Name and Description of the Widget. You can also configure supported sizes for a Windows 11 Widget including small, medium or large along with defining a Screenshot which can have a Light Mode or Dark Mode version, and screenshots can use language-specific or language-neutral assets along with an Icon to be used when adding a Widget in the Widgets Board.

Windows 11 Widgets allow developers to deliver multiple widgets from an application or allow a single widget to be added multiple times from an application. Developers can enable customisation of a Widget from a Customise Widget option that when enabled is displayed for those Widgets in the Widgets Board. Developers can create Widgets that are completely self-contained hosted by a Windows Application without any other user interface, where everything is done in the Widget itself in the Widgets Board, or developers can create a companion Widget that can display information from or interact with the user interface of a Windows App SDK application.

Windows 11 Widgets can be developed with Windows App SDK by using an updated version of my easy-to-use Comentsys.Toolkit.WindowsAppSdk NuGet package that takes care of all of the hard work. This package makes it easier to create a Widget Provider with a WidgetProviderBase class that can be inherited with a lightweight class providing the unique ClassId or GUID. There is also a WidgetBase class that can be inherited to implement the Widget itself where you provide the Template and Data for the Widget and then configure the Package.appxmanifest. To make it even easier you can find full-source code for a sample Counting Widget along with source code for Comentsys.Toolkit.WindowsAppSdk on GitHub and the NuGet package at comentsys.com/packages/toolkits and to find documentation on developing Windows 11 Widgets visit aka.ms/widgetdevdocs or check out the links in the show notes.

Conclusion

Windows 11 Widgets aren't just for Microsoft but for every developer where you can design them using Adaptive Cards where you can also get examples and samples to get started, which can then be customised including different sizes to form the basis of a Template for a Windows 11 Widget. Then you can develop your Windows 11 Widget by implementing a Widget Provider which is made easier thanks to my Comentsys.Toolkit.WindowsAppSdk package that I developed. This package implements and integrates the main functionality for creating a Widget Provider from Microsoft and forms the basis of a Widget allowing you to focus on implementing the Widget itself, which can be a self-contained Widget or act as a companion alongside your application. Windows 11 Widgets use an Adaptive Card based Template along with JSON Data to display information, perform a function or interact with your application. So why not start today if you've never thought about designing or developing your own Windows 11 Widgets.

Outro

Thanks for listening to the RoguePlanetoid Podcast where each episode you will find insights about Microsoft or related platforms and technology, along with so much more wherever you listen to your podcasts or at rogueplanetoid.com/podcasts for the RoguePlanetoid Podcast whether you are a beginner or an experienced professional or just interested in technology. Keep Current, Keep Coding!