AppSettings and AppSettingsMultiple properties for Optimizely CMS 12

So here we are at a fresh start of the brand new CMS 12 for the former known brand Episerver in favour of Optimizely 🎉And finally I had some time to dig deep into setting up this new installation in the modern web era of the .NET 5 and tryout the new experience of the Optimizely brand and what it has to offer.

After digging into some setup tutorials at Jondjones as well as Hacksbyme I wanted to find out if there were some kind of new properties to foul around with for the CMS 12 design pattern. And there were in some kind of regard some new ones to be unveiled 🙋‍♂️

AppSettings property ⚙️

If you have been around with the former Episerver platform for a while you may have noticed that there used to be a property type of "web.config" settings to be reflected directly into the editor experience with custom values. That property is well hidden in the form of the PropertyAppSettings and was mentioned a few years ago 👀

Nowadays the built in SelectionFactories of custom properties you may build as a developer and use as a collection for various editor properties has been prior to the AppSettings but what you essentially may get are predefined values stored in your application's appSettings (the appSettings.json file for .NET 5) 🤗

If you define your property and make it inherit read it's value from the BackingType of PropertyAppSettings you may assign the value to a property of choice, as shown below with string for mainting the value of ratings between the scale of 1-5.

using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using EPiServer.SpecializedProperties;

namespace Cms12.Models
{
    [ContentType(
        DisplayName = "Article Page", 
        GUID = "b8fe8485-587d-4880-b485-a52430ea55de", 
        Description = "Basic content page for CMS 12")]
    public class ArticlePage : PageData
    {
        [BackingType(typeof(PropertyAppSettings))]
        public virtual string Ratings { get; set; }
    }
}

To reflect the options the editor should have in hand for this property, you simple just need to edit either appSettings.json file stored at the root level of the application (appSettings.Development.json or other predefined stages would work as well).

The json structure path to provided for implementing the different options should be EPiServer > CmsUi > SelectionFactories > Ratings (your property at your desired contenttype) - as briefed below:

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning",
      "Microsoft": "Warning",
      "EPiServer": "Warning",
      "Microsoft.Hosting.Lifetime": "Warning"
    }
  },
  "urls": "http://*:8000/;https://*:8001/;",
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "EPiServerDB": "connectionstringhere"
  },
  "EPiServer": {
    "CmsUI": {
      "SelectionFactories": {
        "Ratings": {
          "⭐": "1",
          "⭐⭐": "2",
          "⭐⭐⭐": "3",
          "⭐⭐⭐⭐": "4",
          "⭐⭐⭐⭐⭐": "5"
        }
      }
    }
  }
}

Then what you get in the editor view is a custom dropdown list (selection factory as in hinted in the json path earlier) as your editor is free to choose one selection of these custom values 😄:

AppSettingsMultiple property ⚙️

If you are considering of multiple choices for your editors to select from, Optimizely has another built in property based for those needs. The AppSettingsMultiple property takes care of just that need.

Make sure to back up the type to the AppSettingsMultiple property instead:

using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using EPiServer.SpecializedProperties;

namespace Cms12.Models
{
    [ContentType(
        DisplayName = "Article Page", 
        GUID = "b8fe8485-587d-4880-b485-a52430ea55de", 
        Description = "Basic content page for CMS 12")]
    public class ArticlePage : PageData
    {
        [BackingType(typeof(PropertyAppSettingsMultiple))]
        public virtual string Animals { get; set; }
    }
}

You declare it in the same manor as the AppSettings property above:

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning",
      "Microsoft": "Warning",
      "EPiServer": "Warning",
      "Microsoft.Hosting.Lifetime": "Warning"
    }
  },
  "urls": "http://*:8000/;https://*:8001/;",
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "EPiServerDB": "connectionstringhere;MultipleActiveResultSets=True"
  },
  "EPiServer": {
    "CmsUI": {
      "SelectionFactories": {
        "Animals": {
          "🐕 Dog": "Dog",
          "🐈 Cat": "Cat",
          "🐄 Cow": "Cow",
          "🐖 Pig": "Pig",
          "🐍 Snake": "Snake",
          "🐅 Tiger": "Tiger",
          "🐘 Elephant": "Elephant",
          "🦙 Llama": "Llama",
          "🦏 Rhinoceros": "Rhinoceros"
        }
      }
    }
  }
}

And voíla! You should now have a check box combo list to choose from the editor point of view:

Hopefully you are not as scared as me for different animals on this planet... 😂

What about language support? 🇸🇪

As of know there doesn't seem to be any support regarding multiple language values in the appSettings file support. Perhaps a future update of this will soon enough be available by Optimizely for this manor.

One would simply like to extend the culture specific options with the help of language names such as "en" and "sv" in the appsettings.json file.

I hope that you found today's quick look at the PropertyAppSettings and PropertyAppSettingsMultiple to be handy for your future usage of the Optimizely CMS 12 and to define some hardcoded values if needed for your customer's business solution.

Drop a comment or follow this blog by subscribing to the newsletter registration below to see further enhancements you may achive with Optimizely!