EPiServer Blocks A Quick Reference Guide

Last time I discussed what a page type is, in this article EPiServer Page Types A Quick Reference Guide, today I’ll talk about blocks.   A website is made up from a number of different types of pages.  Each of those pages are made up of a number of different components… those components are called Blocks.  In some of my previous projects, these are the type of blocks I’ve created:

  • Call To Action
  • Carousel
  • Contact Form
  • Text Block
  • Image Block
  • Accordion
  • Banner
  • Tab
  • Promo

If you came from a WinForms background, a block can be thought of as something similar to a user control, i.e. a set of related properties that define reusable components within your website.  The benefit of using a block is that it reduce the amount of duplicate code in your project.  Say you have a homepage and a listing page.  At the top of each page you have an advertising banner.  Instead of having to write the banner code twice in two different areas, you can create one banner block and two ‘Content Areas’ on each page and drop the same banner block in both, or, create two different ones.  To create a banner block for example, you would define a class called Banner, define some properties like an image, a link and some alt text, create a view for it and off you go.

Being able to define grouped functionality into a single file makes content editors jobs a lot easier and gives them a lot more creative control as it allows them to create their own page layouts..  well, if the business decides this is what they want.

Content Areas

To allow content editors to add blocks to a page, a content area needs to be defined on that page.  This can be done using the following code snippet:

[CultureSpecific]
[Display(
GroupName = GlobalResourceDefinitions.TabNames.PageSettings,
Order = 300)]
public virtual ContentArea MainContentArea { get; set; }

Shared Block

Blocks are no pages, blocks are reusable components across your website and when you create a block you can use it in multiple locations if you want.  From my experience, I tend to favour creating a new block when I need it but every project is different.  If you don’t want a block to be re-used, you can set AvailableInEditMode attribute on the class definition to false.

 

The Code

Below defines all the code you need for a block:

[ContentType(DisplayName = "Rich Text Block",
GUID = "8ba1b100-fdfa-4757-b25a-755bc5b98200",
Description = "Rich text")]
[ImageUrl("/resources/preview/richtextblock.png")]
public class RichTextBlock : SiteBlockData
{
[Required]
[CultureSpecific]
[Display(
Name = "Text",
Description = "The text content",
GroupName = SystemTabNames.Content,
Order = 100)]
public virtual XhtmlString Text { get; set; }
[CultureSpecific]
[Display(
Name = "Apply Inner Padding",
Description = "Apply Inner Padding",
GroupName = SystemTabNames.Content,
Order = 100)]
public virtual bool ApplyInnerPadding { get; set; }
}

If you read my page type introduction (link at top of page) you may already see that the attributes available to a block are the same for a page type, so I will not go over them again.

Using a block type as a page type property

As well as using a ContentArea you can also use a block directly on a page type.  Think of it this way, a content area allows you to drag and drop any number of blocks in any order you want.  If you define a block explicitly, you are forcing the page to add it.

[Display(
Name = "Rich Text",
Description = "Rich Text",
GroupName = SystemTabNames.Content,
Order = 100)]
public virtual RichTextBlock RichTextBlock { get; set; }

Constructor or Constructorless

After you have defined your block type, you will need to decide if you want to display your block as a partial, or if you will give the block its own responsibility of rending itself by creating a view model, controller and view.  If you look in the alloy samples site you should be able to both type of example.

Conclusion

Well, that wraps up everything you need to know to get you started creating your own blocks. How do you feel about blocks, good or a bad thing ? Leave your opinions in the comment section below.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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