Token Manager AutoToken

While using Token Manager for some simple dynamic property tokens i realized that as it was the process is a little too complicated.  There are several steps needed to create a token, it involves creating a template that inherits a token base template, implementing the class, registering it with the config.  Quite a lot of effort and runaround, and this is all well and good for tokens that are created by content authors.  However, most of the tokens I’ve created are dynamic tokens generated by the backend without the need of a consistent content author managed source.

AutoTokens fix all that.  With AutoTokens there is one single step to create a token.  Implement the interface AutoToken in an assembly that’s loaded in the app pool.

	public class DemoToken : AutoToken
	{
		public override TokenButton TokenButton()
		{
			return new TokenButton()
			{
				Name = "Insert a spiffy date token",
				Icon = "Office/32x32/explosion.png"
			};
		}

		public DemoToken() : base("Demo Token", "Office/32x32/explosion.png", "Date Token")
		{
		}

		public override string Value(NameValueCollection extraData)
		{
			int month;
			int.TryParse(extraData["month"], out month);
			return CultureInfo.CurrentCulture.DateTimeFormat.GetAbbreviatedMonthName(month) + extraData["day"];
		}

		public override IEnumerable<ITokenData> ExtraData()
		{
			yield return new MonthData();
			yield return new DayData();
		}
	}

That’s it!  One Step!  Token Manager will generate a token collection and add a token to it

Notice the use of MonthData and DayData. These are custom Token Manager fields, which can easily be implemented with some light knowledge of angularjs. Ultimately an angularjs snippet just needs to assign a value to the javascript variable token.data[field.Name]. For example this is the MonthData class

	public class MonthData : ITokenData
	{
		private string options;

		public MonthData()
		{
			StringBuilder sb = new StringBuilder();
			for (int i = 0; i < 12; i++)
			{
				sb.Append($"
<option value={i+1}>{CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i+1)}</option>");
			}
			options = sb.ToString();
		}
		public object GetValue(string value)
		{
			return value;
		}

		public string Name { get; set; } = "month";
		public string Label { get; set; } = "Select the month";
		public bool Required { get; set; } = true;
		public string AngularMarkup
		{
			get
			{
				return
					$@"
<div class=""field-row {{{{field.class}}}}"">
        <span class=""field-label"">{{{{field.Label}}}} </span>
<div class=""field-data"">
            <select ng-model=""token.data[field.Name]"" >{options}</div>
</div>
";
			}
		}
		public dynamic Data { get; }
	}

Out of the box Token Manager comes with TokenData fields for

  1. IdTokenData – Opens a Sitecore tree at a specified root to select a Sitecore item
  2. StringTokenData – Enter any string value
  3. BooleanTokenData – Checkbox
  4. IntegerTokenData – Enter number

This is what we end up with.

autotoken