WikiX: Dynamic Content in Dynamic Content

As announced earlier we released a beta of WikiX - a Wiki for EPiServer last friday. In the next couple of days some posts will follow on the various technical aspects of it.

During the development of WikiX we came across a couple of new ways of doing things. One idea was to make the navigational menu very flexible by basing it on Dynamic Content elements - and even Dynamic Content that contained other Dynamic Content.

One such example is the LinkBox. It is a Dynamic Content Element (DCE) that can be placed anywhere in the left-hand menu. But the contents of the LinkBox should also be flexible - so what's more natural than to add an XHTML property to it and allow editors to add other DCE's to that property?

            PropertyXhtmlString px = new PropertyXhtmlString();
            px.EditorToolOptions = EditorToolOption.DynamicContent;
            px.Name = "Contents";
            
            Properties.Add(px);

To display it using the Property WebControl we simply do this:

        public override void SetProperties(PropertyDataCollection pdc)
        {
            Property p = new Property(pdc["Contents"]);
            contents.Controls.Add(p);
        }

It turns out that it's quite possible - and easy to make a DCE contain other DCE's. However it seems like there is a bug in edit-mode that makes it impossible to edit a DCE once the state string reaches a certain length - that means that in order to change something in a linkbox with a lot of items, you have to delete it and add a new one.

Building your own DCE's for WikiX

WikiX includes a base class that makes it easy to create your own DCE for the left-menu. The base class is called "WikiElement" and it's based on the UserControlBase and at the same time it implements IDynamicContent. See it here.

WikiElement handles several different things for you, like managing state, rendering the user control you have created, and it also adds a Property of the WikiX-specific type PropertyAccessLevel which allows the editor to set a minimum access level requirement for the DCE to be shown at all. That way you can enforce that only "Logged In" users can see a given link, or only users with Edit-rights can upload pictures to a given page.

So this is how you add a DCE:

1) Create a new EPiServer User Control.

2) Change the base class to be WikiElement

3) Implement the method "GetAscxUrl" and have it return a string with a relative url to your ascx file like this:

        protected override string GetAscxUrl()
        {
            return "~/EPiServer.Research.Wiki/Units/CreatedArticle.ascx";
        }

4) If you want to add custom properties to your DCE, override the method "CreateProperties" and in there add them to the "properties" collection.

        protected override void CreateProperties()
        {
            PropertyNumber pal = new PropertyNumber(5);
            pal.Name = "Max links to show";
            properties.Add(pal);

        }

5) When you want to use the properties that has been set make sure to use them from an override of the method "SetProperties":

        public override void SetProperties(PropertyDataCollection pdc)
        {
            ArticleList.DataSource = WikiManager.Instance.RecentlyCreatedArticles(CurrentPage.PageLink);
            ArticleList.MaxCount = Convert.ToInt32(Properties["Max links to show"].Value);
            ArticleList.DataBind();
        }

And you are ready to go!

WikiX: Dynamic Content in Dynamic Content

Recent posts