Ascend 2019: Code Mania

Yesterday, I had the honor and pleasure of giving the traditional Code Mania demo at Episerver Ascend 2019 in Miami together with Fredrik Haglund. After popular demand, here is a blog post about some of the components we showed.

In the middle of the Miami heat, Fredrik and was asked to round off the Developer Track with the traditional Code Mania session. Code Mania sessions are notorious for not having any slides and just being live demos with a fun twist - and this year was no different. But after having been approached by quite a few attendees afterwards, I was persuaded to share this little blog post with links to the relevant components we showed - where possible.

The theme this year was about how we as developers can show editors our love - and perhaps make their lifes a bit easier. Cause happy editors produce better content. And good content is what it's all about.

Here's the agenda we started to show (I'm not going to share the code for that, as I'm certain you, dear reader, is perfectly capable of provoking similar exceptions).

Gamifying the editorial experience: Episervers Cat

First off, we thought - why not make the editor life a bit more exciting. What if we could gamify the experience of being an editor in Episerver? And what if we could do it using something as cute as kittens? Now, you may have heard about Schrödinger's cat - but what if we let loose a kitten in Episerver - and our beloved editors would have to find it? That sounded like fun.

This will melt hearts, I tell you!

Now, the code for this was based on a sample addon for a lab about Episervers Marketplace. While it's a bit modified in the CodeMania version, you can check out the lab github here.

The CodeArt specific version (minus the kitten) is also in this gist:

	using CodeMania.Site.Business;
	using EPiServer;
	using EPiServer.Core;
	using EPiServer.Framework.Cache;
	using EPiServer.Framework.Web.Resources;
	using EPiServer.Logging;
	using EPiServer.Security;
	using EPiServer.ServiceLocation;
	using EPiServer.Web.Routing;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;

	namespace CodeMania.Site.EpiKitty
	{
	[ClientResourceRegistrator]
	public class CatFun : IClientResourceRegistrator
	{
	private static readonly ILogger logger = LogManager.GetLogger();

	private IContentRouteHelper _routeHelper;
	private IContentRepository _repo;
	private ISynchronizedObjectInstanceCache _cache;

	public ContentReference HidingPlace
	{
	get
	{
	var cref=_cache.Get<ContentReference>("Kitty", ReadStrategy.Immediate);
	if (cref == null)
	{
	var lst = _repo.GetDescendents(ContentReference.StartPage)
	.Take(200).Where(cr => !cr.CompareToIgnoreWorkID(ContentReference.StartPage))
	.Select(cr=> _repo.Get<PageData>(cr)).FilterForDisplay(true,true).ToList();
	Random R = new Random();
	var page = lst[R.Next(lst.Count)];
	cref = page.ContentLink;
	_cache.Insert("Kitty", cref, new CacheEvictionPolicy(new TimeSpan(2, 0, 0), CacheTimeoutType.Absolute));
	logger.Error($"Kitty is hiding on page '{page.Name}' with ID {page.ContentLink}");
	}
	return cref;
	}
	}

	public CatFun(IContentRouteHelper crh, IContentRepository repo, ISynchronizedObjectInstanceCache cache)
	{
	_routeHelper = crh;
	_repo = repo;
	_cache = cache;
	}

	public void RegisterResources(IRequiredClientResourceList requiredResources)
	{
	if (PrincipalInfo.HasEditAccess)
	{
	var content = _routeHelper.Content;
	if (content!=null && content.ContentLink.CompareToIgnoreWorkID(HidingPlace))
	{
	requiredResources.RequireScript("/EpiKitty/catfun.js");
	}
	}
	}
	}
	}

view raw CatFun.cs hosted with ❤ by GitHub

	function getRandomPosition(element) {
	var vw = Math.max(document.documentElement.clientWidth, window.innerWidth \|\| 0);
	var vh = Math.max(document.documentElement.clientHeight, window.innerHeight \|\| 0);
	var maxY = vh-(element.clientHeight/3);
	var maxX = vw-element.clientWidth;
	var randomX = Math.floor(Math.random()*maxX);
	var randomY = Math.floor(Math.random()*maxY);
	return [randomX,randomY];
	}
	window.onload = function() {
	var img = document.createElement('img');
	img.setAttribute("style", "position:absolute;");
	img.setAttribute("src", "/EpiKitty/kitten.png");
	img.setAttribute("width", 267);
	img.setAttribute("height", 300);
	document.body.appendChild(img);
	img.onclick = function () { alert("Yeah! You found me! Well done. Come back later and see if you can find my new hiding place.");};
	var xy = getRandomPosition(img);
	img.style.left = xy[0] + 'px';
	img.style.top = xy[1] + 'px';
	}

view raw CatFun.js hosted with ❤ by GitHub

Property Lottery

The only thing editors love more than kittens is probably finding things to complain about. So we thought, why not endulge them and provide them a little bug, that is not straightforward to identify - it will kind of help you separate the sheep from the goats.

By adding an attribute to any property on a model, we created a piece of code that will hide it from edit-mode every 10 seconds.

Here it is - use it with care:

	sing EPiServer.Cms.Shell.Extensions;
	using EPiServer.Shell.ObjectEditing;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using System.Web.Mvc;

	namespace CodeMania.Site.Fun
	{
	[AttributeUsage(AttributeTargets.Property, AllowMultiple =false)]
	public class PropertyLotteryAttribute : Attribute, IMetadataAware
	{
	public void OnMetadataCreated(ModelMetadata metadata)
	{
	ExtendedMetadata extendedMetadata = metadata as ExtendedMetadata;
	if (extendedMetadata == null) return;
	extendedMetadata.ShowForEdit = ((DateTime.Now.Second/10)%2==0) ;
	}
	}
	}

view raw PropertyLottery.cs hosted with ❤ by GitHub

Geta's FontAwesome Icons

When creating new content, we showed how Geta's Font Awesome Thumbnail add-on makes it really easy to have nice icons to help your editors pick the right content. It's available in the nuget feed and here on github.

Content Type Suggestions

This is from a blog post of mine. But it's also in the Gist here.

	using EPiServer;
	using EPiServer.Cms.Shell.UI.Rest;
	using EPiServer.Core;
	using EPiServer.DataAbstraction;
	using EPiServer.Personalization;
	using EPiServer.ServiceLocation;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;

	namespace CodeArt.Addons.ContentTypeSuggestions
	{
	[ServiceConfiguration(typeof(IContentTypeAdvisor))]
	public class CustomContentRecommendations : IContentTypeAdvisor
	{
	public IContentRepository repo { get; set; }
	public IContentTypeRepository typerepo { get; set; }

	public CustomContentRecommendations(IContentRepository repo, IContentTypeRepository trepo)
	{
	this.repo = repo;
	typerepo = trepo;
	}
	//Add custom recommendations where needed.
	public IEnumerable<int> GetSuggestions(IContent parent, bool contentFolder, IEnumerable<string> requestedTypes)
	{

	foreach(var s in TypeSuggestion.List(parent.ContentTypeID, parent.ContentLink.ToReferenceWithoutVersion(), EPiServerProfile.Current.UserName))
	{
	if (contentFolder == s.ContentFolder)
	{
	yield return s.TypeToSuggest;
	}
	}


	}
	}

	}

view raw CustomContentTypeSuggestion.cs hosted with ❤ by GitHub

	<%@ Page Language="c#" Codebehind="SuggestedTypesAdmin.aspx.cs" AutoEventWireup="False" EnableViewState="true" Inherits="CodeArt.Addons.ContentTypeSuggestions.SuggestedTypesAdmin" Title="" %>
	<%@ Register TagPrefix="EPiServer" Namespace="EPiServer.Web.PropertyControls" Assembly="EPiServer.Cms.AspNet" %>
	<%@ Register TagPrefix="EPiServerUI" Namespace="EPiServer.UI.WebControls" Assembly="EPiServer.UI" %>
	<asp:Content ContentPlaceHolderID="MainRegion" runat="server">
	<div class="epi-formArea">

	<fieldset>
	<legend>
	<asp:Literal Text="New Custom Type Suggestion" runat="server"/>
	</legend>
	<div class="epi-size10">
	<div>
	<asp:Label runat="server" AssociatedControlID="pageTypeList" Text="Parent Content Type" />
	<asp:DropDownList ID="pageTypeList" runat="server" />
	</div>
	<div>
	<asp:label runat="server" Text="Select specific page" AssociatedControlID="parentRef" />
	<EPiServer:InputPageReference CssClass="epiinlineinputcontrol" ID="parentRef" runat="server" DisableCurrentPageOption="true"/><br />
	</div>
	<div>
	<asp:Label runat="server" AssociatedControlID="justForMe" Text="Only suggest this for me" />
	<asp:CheckBox runat="server" ID="justForMe"/>
	</div>
	<div>
	<asp:Label runat="server" AssociatedControlID="contentFolder" Text="Is this a 'For This Content' folder?" />
	<asp:CheckBox runat="server" ID="contentFolder"/>
	</div>
	<div>
	<asp:Label runat="server" AssociatedControlID="TypesToSuggest" Text="Content Type to Suggest" />
	<asp:DropDownList runat="server" ID="TypesToSuggest" />
	</div>
	</div>
	</fieldset>
	<div class="epitoolbuttonrow">
	<EPiServerUI:ToolButton runat="server" Text="Add" ToolTip="" OnClick="AddBtn_Click" Id="AddBtn" />
	</div>

	</div>
	<div class="epi-formArea" ID="TypeListDiv" runat="server">
	<asp:GridView
	ID="TypeList"
	Runat="server"
	AutoGenerateColumns="false">
	<Columns>
	<asp:TemplateField HeaderText="Parent Content Type">
	<ItemTemplate>
	<%#: GetContentTypeName((int)DataBinder.Eval(Container.DataItem, "ParentType"))%>
	</ItemTemplate>
	</asp:TemplateField>
	<asp:TemplateField HeaderText="Parent">
	<ItemTemplate>
	<%# GetContentName((EPiServer.Core.ContentReference)DataBinder.Eval(Container.DataItem, "ParentReference"))%>
	</ItemTemplate>
	</asp:TemplateField>
	<asp:TemplateField HeaderText="Only for user">
	<ItemTemplate>
	<%# DataBinder.Eval(Container.DataItem, "User")%>
	</ItemTemplate>
	</asp:TemplateField>
	<asp:TemplateField HeaderText="Content Folder">
	<ItemTemplate>
	<%# DataBinder.Eval(Container.DataItem, "ContentFolder")%>
	</ItemTemplate>
	</asp:TemplateField>
	<asp:TemplateField HeaderText="Content Type to Suggest">
	<ItemTemplate>
	<%# GetContentTypeName((int)DataBinder.Eval(Container.DataItem, "TypeToSuggest"))%>
	</ItemTemplate>
	</asp:TemplateField>
	<asp:TemplateField>
	<ItemTemplate>
	<EPiServerUI:ToolButton EnableClientConfirm="true" ID="DeleteToolButton" CommandName="Delete" SkinID="Delete"
	ToolTip="<%$ Resources: EPiServer, button.delete %>" Enabled="true" OnCommand="DeleteToolButton_Command" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"Id") %>' runat="server" ConfirmMessage="Do you really want to delete this type suggestion?" />
	</ItemTemplate>
	</asp:TemplateField>
	</Columns>
	</asp:GridView>
	</div>

	</asp:Content>

view raw SuggestedTypesAdmin.aspx hosted with ❤ by GitHub

	using System;
	using System.Collections.Generic;
	using System.Web.Security;
	using System.Web.UI.WebControls;
	using EPiServer.Personalization;
	using EPiServer.PlugIn;
	using EPiServer.Security;
	using EPiServer.Util.PlugIns;
	using System.Web.UI;
	using EPiServer.UI;
	using EPiServer.ServiceLocation;
	using EPiServer.DataAbstraction;
	using System.Linq;
	using EPiServer.Core;
	using EPiServer;
	using EPiServer.Data;

	namespace CodeArt.Addons.ContentTypeSuggestions
	{
	[GuiPlugIn(DisplayName = "Suggested Types Manager", Description = "", Area = PlugInArea.AdminMenu, UrlFromUi ="../CodeArt.Addons.ContentTypeSuggestions/SuggestedTypesAdmin.aspx")]
	public partial class SuggestedTypesAdmin : EPiServer.Shell.WebForms.WebFormsBase
	{

	protected override void OnLoad(EventArgs e)
	{
	base.OnLoad(e);
	this.EnableViewState = true;
	this.Title = "Suggested Types Manager";
	this.SystemMessageContainer.Heading = "Suggested Types Manager";
	if (!IsPostBack)
	{
	var trepo = ServiceLocator.Current.GetInstance<IContentTypeRepository>();
	this.pageTypeList.DataSource = new ListItem[] { new ListItem("(All types)", "-1") }
	.Union(trepo.List().OrderBy(c => c.FullName).Select(pt => new ListItem(pt.FullName, pt.ID.ToString())));
	this.pageTypeList.DataValueField = "Value";
	this.pageTypeList.DataTextField = "Text";
	this.TypesToSuggest.DataSource = trepo.List().OrderBy(c => c.FullName).Select(pt => new ListItem(pt.FullName, pt.ID.ToString()));
	this.TypesToSuggest.DataValueField = "Value";
	this.TypesToSuggest.DataTextField = "Text";
	//Show existing list
	this.TypeList.DataSource = TypeSuggestion.ListForUser(EPiServerProfile.Current.UserName);
	this.DataBind();
	}
	}


	public string GetContentTypeName(int ID)
	{
	if (ID == -1) return "";
	var trepo = ServiceLocator.Current.GetInstance<IContentTypeRepository>();
	return trepo.Load(ID).FullName;
	}

	public string GetContentName(ContentReference cref)
	{
	if (cref == ContentReference.EmptyReference) return "";
	var repo = ServiceLocator.Current.GetInstance<IContentRepository>();
	return repo.Get<IContent>(cref).Name;
	}

	public void AddBtn_Click(object sender, EventArgs e)
	{
	//Validate and Add to DDS
	TypeSuggestion ts = new TypeSuggestion();
	ts.ParentType = int.Parse(pageTypeList.SelectedValue);
	ts.ParentReference = this.parentRef.PageLink ?? ContentReference.EmptyReference;
	ts.ContentFolder = this.contentFolder.Checked;
	ts.User = (this.justForMe.Checked) ? EPiServerProfile.Current.UserName : null;
	ts.TypeToSuggest = int.Parse(this.TypesToSuggest.SelectedValue);
	TypeSuggestion.Save(ts);
	Response.Redirect(Request.Url.ToString());
	}

	protected void DeleteToolButton_Command(object sender, CommandEventArgs e)
	{
	TypeSuggestion.Delete(Identity.Parse((string) e.CommandArgument));
	Response.Redirect(Request.Url.ToString());
	}
	}
	}

view raw SuggestedTypesAdmin.aspx.cs hosted with ❤ by GitHub

	using EPiServer.Core;
	using EPiServer.Data;
	using EPiServer.Data.Dynamic;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;

	namespace CodeArt.Addons.ContentTypeSuggestions
	{
	[EPiServerDataStore(AutomaticallyCreateStore = true, AutomaticallyRemapStore = true)]
	public class TypeSuggestion : IDynamicData
	{
	public Identity Id { get; set; }

	public int ParentType { get; set; }

	public ContentReference ParentReference { get; set; }

	public int TypeToSuggest { get; set; }

	public string User { get; set; }

	public bool ContentFolder { get; set; }

	public static IEnumerable<TypeSuggestion> ListForUser(string user)
	{
	var store = DynamicDataStoreFactory.Instance.CreateStore(typeof(TypeSuggestion));
	return store.Items<TypeSuggestion>().Where(ts => ts.User==user \|\| ts.User==null);
	}
	public static void Delete(Identity ID)
	{
	var store = DynamicDataStoreFactory.Instance.CreateStore(typeof(TypeSuggestion));
	store.Delete(ID);
	}
	public static IEnumerable<TypeSuggestion> List(int TypeId,ContentReference Parent, string User)
	{
	var store = DynamicDataStoreFactory.Instance.CreateStore(typeof(TypeSuggestion));
	return store.Items<TypeSuggestion>().Where(ts => (ts.User == User \|\| ts.User == null)
	&& (ts.ParentType == TypeId \|\| ts.ParentType == -1)
	&& (ts.ParentReference==Parent.ToReferenceWithoutVersion() \|\| ts.ParentReference==ContentReference.EmptyReference));
	}

	public static void Save(TypeSuggestion suggestion)
	{
	var store = DynamicDataStoreFactory.Instance.CreateStore(typeof(TypeSuggestion));
	store.Save(suggestion);
	}
	}
	}

view raw TypeSuggestion.cs hosted with ❤ by GitHub

Clippy for Episerver

If anybody knows how to make a sweet UI for editors it must be Microsoft. So we invited our old office friend Clippy back - into Episerver notifications.

The code for this is not available at the moment.

Publish Lock

Unfortunately not all editors have strictly managed access rights - and if you are creating content in Episerver and have publish access, you are in the risk of accidentally publishing it - just one wrong click (well, ok 2) and you are in big trouble. So - inspired by the little plastic cap that's on top of the "Nuclear Launch Button" we added a feature to lock content for publishing.

The code is not currently available.

Un-moveable page

Some times you also want to protect a page from accidentally being moved around the tree. We showed this achieved, by adding the IProtectedContent interface to the page model declaration - and it was handled by an event handler on the MovingContent event, that would cancel the move, unless you had the special permission for it. Currently the code is not available.

Show Descriptions

Sometimes, it would be helpful to show the description of each property to the editors right away, instead of providing it as a tooltip. To accomplish that, we used the approach described in Alf's blog post here: https://talk.alfnilsson.se/2014/12/18/display-help-text-in-on-page-editing/

Inline block editing

As it was also shown in the keynote, Episerver Labs has made some great improvements with the much desired feature inline block editing. It's available already now in the nuget feed - and we showed that as well. Here's the original blog post introducing it: https://world.episerver.com/blogs/grzegorz-wiechec/dates/2019/7/episerver-labs---block-enhancements/

Property Inheritance

We showed a slightly modified version of the property inheritance approach I blogged about here:

https://www.codeart.dk/blog/2018/9/good-ol-dynamic-properties/

Here is the gist of the original code:

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;

	namespace AllanTech.Web.PropertyInheritance
	{
	public class InheritAttribute : Attribute
	{
	/// <summary>
	/// Name of Boolean property that indicates if this property should be inherited
	/// </summary>
	public string SwitchPropertyName { get; set; }

	/// <summary>
	/// Inherit this value if it's null
	/// </summary>
	public bool InheritIfNull { get; set; }

	/// <summary>
	/// Inherit this value if it's null or empty
	/// </summary>
	public bool InheritIfNullOrEmpty { get; set; }

	/// <summary>
	/// Name of property on parent content to inherit from. Default is same name.
	/// </summary>
	public string ParentPropertyToInheritFrom { get; set; }

	/// <summary>
	/// Keep searching ancestors until Root
	/// </summary>
	public bool SearchAllAncestors { get; set; }

	}
	}

view raw InheritAttribute.cs hosted with ❤ by GitHub

	using EPiServer.Core;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using AllanTech.Web.Helpers;
	using EPiServer.ServiceLocation;
	using EPiServer;
	using EPiServer.Data.Entity;
	using System.Reflection;

	namespace AllanTech.Web.PropertyInheritance
	{
	public static class PropertyInheritor
	{

	public static T PopulateInheritedProperties<T>(this T Content) where T : PageData
	{
	var rt = (Content as IReadOnly).CreateWritableClone() as PageData;
	var props = Content.GetPropertiesWithAttribute(typeof(InheritAttribute));
	bool modified = false;
	foreach (var prop in props)
	{
	var attr = prop.GetCustomAttribute<InheritAttribute>(true);

	if (
	(!String.IsNullOrEmpty(attr.SwitchPropertyName) && ((bool)Content.GetType().GetProperty(attr.SwitchPropertyName).GetValue(Content))) \|\|
	((attr.InheritIfNull \|\| attr.InheritIfNullOrEmpty) && (prop.GetValue(Content) == null)) \|\|
	(attr.InheritIfNullOrEmpty && ((prop.PropertyType == typeof(ContentArea)) && (prop.GetValue(Content) as ContentArea).Count == 0))
	)
	{
	//Resolve Inherited Properties
	var repo = ServiceLocator.Current.GetInstance<IContentRepository>();
	foreach(var a in repo.GetAncestors(Content.ContentLink).Take((attr.SearchAllAncestors)?1000:1))
	{
	var parentprop = (a as IContentData).Property[attr.ParentPropertyToInheritFrom ?? prop.Name];
	if (parentprop!=null && !parentprop.IsNull)
	{
	prop.SetValue(rt, parentprop.Value);
	modified = true;
	break;
	}
	}
	}
	}
	if (modified)
	{
	rt.MakeReadOnly();
	return rt as T;
	}
	return Content;

	}


	}
	}

view raw PropertyInheritor.cs hosted with ❤ by GitHub

Giphy Images

To provide editors with an easy and efficient way to fetch fun animated gifs for their content, we showcased a very basic prototype widget integration to Giphy. The code is not available.

Developer Tools & Developer Console

For the closing act, we showed the great and classic Developer Tools add-on, available in the nuget feed. However, our version was modified and is not yet publicly available. The new thing was the Developer Console - a command console that developers can use in a browser to run custom commands on Episerver - complete with a parsing engine and pipe support.

The idea is that developers instead of making scheduled jobs, only supposed to run once, can easily create commands that do what they want - and run them from the console. It's a project still in it's infancy, but it will be coming to a nuget feed near you in the future.

We hoped you enjoyed the show! If there's any of the features you particularly liked, feel free to reach out or leave a comment below!