Using FeatureToggle In Your Windows 8 WinRT App

17 February 2013 (0)

I just released an update to my open source feature toggling library FeatureToggle.

Version 1.2.0 add support for using feature toggles in your Windows 8 WinRT .Net (C#) app. For this initial release, the NuGet package for Windows8 app installs the source code, rather than a binary reference. This is so it will always build to whatever architecture you are compiling against (Any CPU, x86, x64, ARM).

This release also provides a XAML value converter (FeatureToggleToVisibilityConverter) to make binding the visibility of UI element to a feature toggle easier.

What To Use Feature Toggles For

Typically feature toggles (sometimes called feature flags, flippers, etc.) enable you to keep one branch of source code and deploy code to production with “half done” stuff. This half done stuff is (typically) toggled at the UI level so it is not available to users.

With Windows 8 in-app-purchases (IAPs), you could also use the FeatureToggle library as a unified way of enabling those extra IAP features that a user has paid for.

Getting Started with FeatureToggle in a Windows 8 App

Install FeatureToggle NuGet Package

Create a new Visual C# Windows Store project (Blank App XAML is fine for this demo).

Install the FeatureToggle NuGet package by either:

  • Right0click project, Manage NuGet Packages, search for FeatureToggle, click the Install button; or
  • In the Package Manager Console window, type “Install-Package FeatureToggle” and hit enter.

You will notice two folders added to the project: “FeatureToggleCode” (which you don’t need to change) and “FeatureToggleSample” which contains an example toggle.

Create a Feature Toggle

Create a new class called “AwesomeFeature” that looks like this:

internal class AwesomeFeature : JasonRoberts.FeatureToggle.AlwaysOffFeatureToggle
{
}

This defines a feature toggle for the feature we want to toggle because (for example) it’s still in development.

Change the UI Based on the Toggle

We can use the FeatureToggleToVisibilityConverter to hide things in the UI when the feature is turned off.

In the MainPage.xaml, add the following button:

<Button Content="My Awesome Feature" 
Visibility="{Binding AwesomeButtonFeature, Converter={StaticResource FeatureToggleToVisibilityConverter}}" />

Notice that the visibility binding, that uses a convertor that we need to declare, in the XAML:

<Page.Resources>
    <winRt:FeatureToggleToVisibilityConverter x:Name="FeatureToggleToVisibilityConverter"></winRt:FeatureToggleToVisibilityConverter>
</Page.Resources>

This requires the following attribute to be added to the root level Page element:

xmlns:winRt="using:FeatureToggle.WinRT"

The next step is to provide a DataContext for the page that contains an AwesomeButtonFeature property. If you were using an MVVM framework, this property would probably go in the view model, for this simple example it’s in the code-behind and we don’t implement INotifyPropertyChanged, etc.

Add the following in MainPage.xaml.cs:

public JasonRoberts.FeatureToggle.IFeatureToggle AwesomeButtonFeature { get; set; }

Then change the constructor so it looks like this:

public MainPage()
{
    InitializeComponent();

    AwesomeButtonFeature = new AwesomeFeature();

    DataContext = this;
}

We now have a (quick and dirty) feature toggle that the UI can bind to.

Run the app. You should see a blank screen with no button. This is because our AwesomeFeature derives from AlwaysOffFeatureToggle.

Change AwesomeFeature to now look like this:

internal class AwesomeFeature : JasonRoberts.FeatureToggle.AlwaysOnFeatureToggle
{
}

Note the AlwaysOnFeatureToggle.

Run the app. You should now see the button.

Change Backend Code Based on a Toggle

You may want want to do something conditionally based on whether a feature is enabled, this is as simple as:

var toggle = new AwesomeFeature();

if (toggle.FeatureEnabled)
{
    //do stuff
}

 

Creating and Using a Feature Toggle That Gets Its Value From Config

The simplest toggles are the always on and always off ones.

You can also use the “SimpleFeatureToggle”.

Change AwesomeFeature to look like this:

internal class AwesomeFeature : JasonRoberts.FeatureToggle.SimpleFeatureToggle
{
}

The SimpleFeatureToggle gets its value from the apps local settings. Before making use of the toggle, you need to set a value it config for it to read. You can do this anywhere in your code, in this example we are going to put it in the page constructor:

public MainPage()
{
    InitializeComponent();

    Windows.Storage.ApplicationData.Current.LocalSettings.Values["AwesomeFeature"] = true;

    AwesomeButtonFeature = new AwesomeFeature();

    DataContext = this;
}

Run the app and the button will be visible.

Change the value in the setting to false, run the app and the button is now hidden.

Future versions of FeatureToggle for Windows 8 app may include other toggles that automatically get their value from the app store IAP values.

 

(If you’re developing a Windows 8 app and you’d like to learn more about how to choose features for version one of your app, etc check out my Designing Windows 8 Apps Pluralsight course.)

SHARE:

Add comment

Loading