• In this tutorial, I will show you how to create a Vimeo/Youtude Dynamic control.  Had a requirement from our client to allow them to be able to drop an image or Vimeo or YouTube video anywhere on their Episerver 6 R2 site.   In order to achieve this, I created a simple EPi server Dynamic Control.  I had experience adding simple text boxes into dynamic control. I struggled to find a good tutorial about adding more complex types.  In this code example I'm only giving a very simple version of the finished control, so don't judge me!

    Dyncamic Control Screenshot

    Images

    Episerver will display any control that inherits from the EPi Core PropertyData type.  Luckily, out of the box give you a load of stuff for strings, numbers, etc..  so this one was pretty easy to resolve.  All you have to do is add a public property within your user control that is of type 'PropertyImageUrl'.  To get the URL to display in the control you use the Value property :

    Creating The Dropdown

    Getting a drop down is a lot less obvious to figure out than adding an image.  The problem with displaying a drop down is setting the initial values when the form loads.  Most tutorials I came across on the net only explained how to create controls that allow you to dynamically add to the list, which was overkill for my solution; I either needed left or right. 

    I spent ages looking at the PropertyDropDownList but all of the information I found was directed at using it with PageTypeBuilder.  In the end I had to create a custom control.  First, I created the actual control class, this has to extend from PropertyString as we'll use the string.value method later to get the selected value. Also, if the control doesn't inherit from 'PropertyData' (PropertyString does) it wouldn't show in the UI to the user.

    The next step is to create the 'AlignmentControl' to deal with storing and retrieving the actual data.

    The control is pretty basic, in the CreateEditControls I create a new Drop Down List and add the list items I care about.  If you want to make this more dynamic, you could pass in a page reference to a settings class or something similar in the control class and pass it down.  The rest is just basic getter and setter stuff.  I hope this helps save you some time.  

    Download the source code here.

    LEARN MORE

  • We had a requirement for a user to be able to dynamically add different 'things' to a page; think of things such as a contact detail from an address book or business locations.  The tricky part of the problem was that these 'things' had to be able to be dropped, in multiple places, around the site by content editors within page content and that over time could be deleted. 

    If I used a normal picker that stored an Id of an asset on the page, after a few months I would have ended up with a site full of obsolete controls dotted around the site in unknown areas pointing to asset Id's that no longer exist, data that would have been deleted, e.g. Id stored within EPi for assets that no longer exist. Without going into the full requirements, I came up with a solution that involved using a dropped dynamic control that would generate a GUID.  A content editor could then use that GUIDin a separate system in the admin to create a list of 'things' that would be displayed on the page. 

    If an asset was deleted it would automatically be removed from a list rather than having an obsolete reference to it in a load of dynamic controls dotted around the site. In order to do this, I had to create a dynamic control with a custom interface. When I Googled this, I couldn't really find any good tutorials so I thought I would create this.  First, you need to create a dynamic control as normal but with one change :

    In your DynamicContentPlugIn you need to add a Url and Area attribute.  The Url needs to point to a user control that inherits from DynamicContentEditControl.  Next, we need to create the user control that will be used as our custom setting display.  All my control will do is, on creation, automatically create a Guid and display it.

    When inheriting from DynamicContentEditControl you need to implement the PrepareForSave method.  In PrepareForSave you need to save the form data entered in your form so it can be used in the display control.  This is done using Control.Properties[].Value.  

    One thing to note is that 'Content' will be null if you try to use it in the constructor. Everything else should be pretty standard. On page creation, check if a GUID exists for that page, if it does... use it. Otherwise, create it.

    As always, here's the code to download.

    LEARN MORE

  • On a day-to-day basis, I have to create a lot of different page types.  I always forget the names of the properties I need or the syntax, so I've created this quick reference sheet filled with quick code snippets.

    Useful things to note :

    • Class Declarations :
    • AvailablePageTypes: Allows you to define what child pages can be created:
    • Property Declarations :
    • Tab: Tab Allows you to create a new tab
    • Required: The page won't save unless the property has been set
    • Type: Defines the input type displayed in the CMS, can include EPiImageProperty, PropertyString, PageReference, PropertyDropDownList, EPiServer.SpecializedProperties.PropertyXhtmlString

    Property DropDownList Example

    Tab Example

    Custom Properties

    LEARN MORE

  • Learning a new CMS can be daunting at first.  When I started my first EPi server project, like a lot of other projects, I didn't choose the CMS, I was just told what the client had picked and when it had to be done in a month.

    Short time-scale is a common thing and I'm sure every digital person has come across it but it did mean I had to figure everything out on my own from scratch, so I thought I'd share my tips to help any new Epi-server developers starting out. Your first step is to install EPi server.

    Anyone can request a developer license, and install the demo site on their PC.  The installation is pretty simple and, if everything goes according to plan, should take less than 15 minutes. You'll need to create a developer account at Epi Server World and download the latest version (7 as of writing) (http://world.episerver.com/Download/).

    After downloading EPi server, you will need to create a develop license key, otherwise you will constantly see a warning dialog on your website. You can get a license key from https://license.episerver.com/.

    After that you're free to have a play around. In order to learn about EPi server, my first tip would be to try and get the advanced Epi-server certification training. I did this for the second Epi server project I worked on and it was definitely worth the three days BUT a word of caution it is pretty expensive. 

    If you are building an Episerver project, I would advise getting the training after you have created your specification, as this allowed me to ask our instructor to recommend best practices relevant to my project. My second tip would be to add the EPI Nuget feed into your version of Visual Studio and get familiar with all the free plug-ins you can get.  If you are using EPI 6 or below, then PageTypeBuilder should be your first port of call.  If you're making a mobile site then the MobilePack can save you hours.

    You can also check out EPiCode. The development community for Episerver is one of the best I have come across out of the major CMS's I have used and there are a number of great blogs with loads of tips and tricks.  As you're already reading this, I have a number of tutorials on creating various plug-ins, but I would definitely recommend having a look a these blogs in particular :

    LEARN MORE

  • I had a requirement to add a profile image to the EPiServer 6 blog plug-in to enable content editors to have their profile image displayed against any post they submit via the plug-in. I had two options, my first idea was to create a user page-type and then create a mandatory link property on the BlogItemPageType page type.  This idea would work but it would also just be restricted to the blog plug-in.

    Instead, I went with the approach of extending the profile provider, adding in an extra image field and creating an admin plug-in to set the properties.  I think either way would work just as well.  One of my main requirements was that admins should be the only people to update the profile, so I decided to go with the admin plug-in route.

    Create a custom property in the web.config to store the image.

    For this project, I only need to set profile images for a very small subset of content editor.  The first part of the plug-in will return a list of all the users so an administrator can pick whose profile they want to update.  In our situation, only certain content editors will need a profile image, so I restrict my profile list to WebEditors only

    After we have a list of users, we need to add in the image picker. A few months ago I detailed how to do this with sample code here, so I won't go over it again :)

    After we have an image and the profile we want to update, we need to store the update in EPiServer.  In order to do this we will use the EPiServerProfile class. After an editor selects which profile they want to update, the username will be passed into an update method. 

    In order for EPiServer to store the profile information we must use the SetPropertyValue() and then, critically, the Save method needs to be called.  If you do not call save, the information will not persist.  Code example shown below:

    After

    When the profile information is updated, it can be accessed using this code:

    Now customize the page as required.  Its easy to extend the plug-in to add in any other custom profile attributes if needed.  As always you can download the plug-in from my GitHub here.

    LEARN MORE