episerver3

Creating EPiServer CMS applications 


by Andrei Toader

EPiServer is a platform that bring CMS editable content and e-commerce functionalities in one place. In this article, I will present the basic steps for creating a CMS editable web site. In the paragraphs below, I will explain all which is needed to configure EPiServer CMS on a local environment, creating a presentation site and editing content using CMS screen.

As an example, I will create a simple personal site which contains two pages. One is called "About me" and contains a description and a photo of me, and the another one is called "My hobbies" and contains a list of hobbies (a hobby has also description and a photo). Of course, talking about words like "a photo of me" is a little bit weird because the final purpose is to create a CMS editable site so anybody could do his own site changing only the content without calling a developer for any change.

Below I will describe the main steps for doing these.  


Installing EPiServer CMS 
Using any version of Visual Studio, you can go to Tools -> Extensions and updates and then searching after EPiServer. The screen below should be shown.
So, the final step will be just to press Install and that's it.  
So, the final step will be just to press Install and that's it.
Creating an EPiServer project  
If EPiServer is configured correctly, when creating a new project in Visual Studio, under Visual C# tab in the left side should be an EPiServer entry. So, we create a new EPiServer Web site as is shown in the below picture:
Pressing Ok we have to choose the type of project we want to create.
Pressing Ok we have to choose the type of project we want to create. 
Pressing Ok we have to choose the type of project we want to create.
The Alloy (MVC) or Alloy (Web Forms) will create projects based on MVC framework or Web forms but containing also a basic template for building pages. It includes basic page types and block types (I will talk about these in next paragraphs) needed for building CMS editable content. Creating an empty project allow you to customize your own architecture and structure of Page/Block types.
Defining Page/Block types
As we want to build pages which has customizable content we must declare page types which contains the templates for our pages. If we take as an example the "About me" page which I mentioned before, we have a page type with two properties (one for name and one for description). If we consider the "My hobbies" page, sometimes we could want to add dynamically hobbies. So, in this case we will declare a block type with two properties (description and photo) and then a page type which will allow as to dynamically add blocks to create new hobbies.   

 Below is the definition for the Hobby Block: 
As we can see a block inherits from Block Type which is the base class for every block. So, this template can be added dynamically in pages content.
As we can see a block inherits from Block Type which is the base class for every block. So, this template can be added dynamically in pages content.  As we can see in the image below, the "My hobbies" page we will define a single property of type Content Area which means that we can add any content there but using the annotation for the property we can restrict the content to be just of Hobby Block. That would mean that we can add as many blocks as we want in the page, but any other type (like strings or images) will not be allowed. 
In a similar way, we define the template for "About me" page. 
The next step will be to define the view for the "My Hobbies" page. From similarity purposes, I will also choose to give only this as example, without putting also the "About me" page.
As we can see we have the model of type Hobbies page which we have already defined. Using @Html.PropertyFor for every property from the page template, allows us to add content for that property from CMS interface (I will explain this step in next paragraph).   

To create a menu for our site we would need to get all instances for our pages (in our example "About me" page and "My hobbies" page. 

This can be accomplished using the following code. The first method, get the root for all pages so, using the second method we can get the children for that and in this way, we have all the pages (in our case we will have two pages if we have one instance per type, but we can have more than one instance for any type if no restriction is specified).  The _contentRepository variable used is an object of type IContentRepository, which is the interface provided by EPiServer for accessing and manipulating content programmatically.  
public StartPage GetStartPageData() 
              { 
                StartPage startPage; 
                return _contentRepository.TryGet(ContentReference.StartPage, out startPage)? startPage: null 
} 
public List<SitePage> GetPageChildren(PageReference pageReference) 
              { 
              var pageChildren = _contentRepository.GetChildren<SitePage>(pageReference); 
              return pageChildren == null ||! pageChildren.Any()? new List<SitePage> (): pageChildren.ToList(); 
} 
Adding/Editing pages content 
For creating pages instances based on template we already defined we go to our url/EPiServer path. There we must login with an admin account (by default username is admin and password is store) and then under CMS tab we have the admin part. In the left side of the screen we can see all instances for our pages and we can delete/add new ones, editing the existing content or setting properties for pages (like if it is visible for visitors or not). 

Conclusion 

I would recommend EPiServer not only for the easy way to configure and develop CMS editable websites but also for the user-friendly interface it provides for editors which in most cases are not technical people. Also, using the benefits of Commerce module, EPiServer is the place where you can unify the content management and e-commerce functionalities in one place.  

Leave a Reply

Your email address will not be published. Required fields are marked *