Episerver Instant Templates: A golden nugget to try out


Episerver Instant Templates – A golden nugget worth trying out Author Linus Ekström Date 24 May 2017 Read time 5 Minutes Like 0 Share Subscribe to our newsletter subscribe Since the release of Episerver 7 five years ago, Episerver has been able to work in a modular manner. Using blocks with a few page templates makes it possible to create many variations of pages, by combining blocks in content areas. This reduces the need to have many page types, which is usually the case for systems that are based on page templates which don’t come with the ability to build the unique page using a block-based technique. Modular Web Design Long gone are the days where designers who were coming from the world of print, ruled the web. As a result of the explosion of devices, designing pages and systems using block-based design is something that has become almost mandatory as the need for responsive design increases. To read more, click on this link: https://medium.com/5000-things/learning-from-lego-a-step-forward-in-modular-web-design-d8ff953f45a8. Now, when I talk with customers about building sites in Episerver (or any other modular based system), I usually refer to how Lego works. With a few base templates and a number of different blocks, it is possible to create a plethora of individual pages. Actually, the reason that Episerver chose to call their ‘modules’ blocks was because of the Lego analogy. The Demands of Today Ever since I jumped the fence from an architect at Episerver to the client side, I have worked on a number of multi-site/multi lingual /multi market/multi stakeholder projects. Typically, a big organization with such complex needs puts in place a steering committee to help prioritize the work. However, in large organizations, listening and adapting to every possible need for variation could easily cripple the attempts to create a new web solution for the organization. Creating flexible enough templates with blocks makes it so much easier to adapt the varying needs of an organization and its markets. For example, variants of the concept pages can be made for differing markets, simply by moving around or adding or removing blocks. This gives editors the option to adapt to the market without the need to involve the systems implementer (except in the rare cases where you have to add new block types). Using Instant Templates can also accelerate your web efforts, since new ways to use the blocks can be tested, and then replicated to other markets if successful. Of course, this is a challenge in itself when you have a lot of markets and stakeholders, but at least it moves the limitations from being a technical one to being more about communication and collaboration between the stakeholders. So, with a few base templates and lots of options for placing blocks, this solution should be a win-win for all parties, right? Well, it turns out for one essential group, life becomes more complicated. That group is the editors because creating dynamic pages becomes much more challenging than filling in a few pre-defined form fields. Even though you can give training and perhaps offer some ‘How To’ guides, it is still rather tricky for an editor to build a page from scratch with a set of blocks. In addition, building complex pages from scratch using blocks will not give consistency, and anyone that has built an advanced Lego module with or without a manual knows how time consuming and hard this is. The same thing goes for very flexible templates in Episerver using blocks. What Instant Templates Can Help With There has always been a need to help editors in Episerver. For new editors not used to Episerver, simple templates for news and similar, makes it easy to contribute content. Actually, an early mantra when developing Episerver CMS was that ‘everyone should be able to create and edit content in the CMS’. As pages become more and more complex, the need to have templates for intermediate and even experienced editors grows. When I was working at Episerver, it was actually quite common practice that the internal editors at Episerver actually used copy and paste to create new content. Of course, this has many negative effects, such as people forgetting to add a proper URL slug. A few years back, I was talking to Allan Thraen, Episerver Director of Research, regarding this problem, which it turned out, he was also investigating. As editors were using the copy and paste technique already, I suggested to Allan, an innovative way we could improve upon that method while eliminating as many of the disadvantages as possible. For example; 1. Instead of just finding an existing page, editors can create separate templates that can be organized and easy to find 2. The add-on ensures the content is set to a draft state when creating an item from a template (compared with Episerver pages which you would have to unpublish as a first step after you have copied it) 3. Clear some values, like URL slug, when you start. With this in mind, I created a POC for this that I then handed over to Fredrik Vig at Geta who finalized and released this. Templates are managed as regular content in a separate structure that can be worked with by adding a new gadget to the Episerver editorial interface: Since this is just standard content, you can add any kind of content as a template and you can also manage access rights to the templates in the admin interface. There is also an addition to the “new” button where you can choose to create new content from an instant template which gives you a selection of the right templates. How About Nested Blocks? You can create templates that contain blocks inside of them. For example, if you create a new item from a template, it will replicate all local blocks while links to shared blocks will continue to link to the shared block. How About Multi-Lingual Solutions? I like to compare Instant Templates with copy paste, but on steroids. I do not recommend a client having several languages for the instant templates, since the content for each language will be copied to the new content. In my opinion, the best future solution for Instant Templates would be if only the content for the current language was copied so that you could create multi lingual templates. For now however, I recommend setting up templates for each language where you need to create original content. What About Contributing to Instant Templates? I talked to Fredrik Vig at Geta about making this available on open source and he has agreed. We at Niteco plan to contribute to the improvement of this module even further and I hope that others can join that effort as well. Further Reading: https://github.com/Geta/InstantTemplates https://medium.com/5000-things/learning-from-lego-a-step-forward-in-modular-web-design-d8ff953f45a8 https://world.optimizely.com/articles/Items/EPiServer-7-Ready-for-a-multi-screen-world/ Like 0 Share Subscribe to our newsletter subscribe Episerver Optimizely CMS AUTHOR Linus Ekström Linus is a prominent figure amongst Episerver professionals. He develops strategically sound solutions to business challenges. × Subscribe to our newsletter Get the latest job openings and news delivered directly to your inbox subscribe Looking for a partner to transform your business and drive results? Let's Get In Touch Related Articles Turn Digital Disruption into Opportunity Episerver 29 March 2017 2 Min Read Episerver Heads Towards One-Stop-Shop Solutions Episerver 27 March 2017 4 Min Read Niteco is an Episerver Premium Partner News 14 December 2016 2 Min Read

Since the release of Episerver 7 five years ago, Episerver has been able to work in a modular manner. Using blocks with a few page templates makes it possible to create many variations of pages, by combining blocks in content areas. This reduces the need to have many page types, which is usually the case for systems that are based on page templates which don’t come with the ability to build the unique page using a block-based technique.

Modular Web Design

Long gone are the days where designers who were coming from the world of print, ruled the web. As a result of the explosion of devices, designing pages and systems using block-based design is something that has become almost mandatory as the need for responsive design increases. To read more, click on this link: https://medium.com/5000-things/learning-from-lego-a-step-forward-in-modular-web-design-d8ff953f45a8.

Now, when I talk with customers about building sites in Episerver (or any other modular based system), I usually refer to how Lego works. With a few base templates and a number of different blocks, it is possible to create a plethora of individual pages. Actually, the reason that Episerver chose to call their ‘modules’ blocks was because of the Lego analogy.

The Demands of Today

Ever since I jumped the fence from an architect at Episerver to the client side, I have worked on a number of multi-site/multi lingual /multi market/multi stakeholder projects. Typically, a big organization with such complex needs puts in place a steering committee to help prioritize the work. However, in large organizations, listening and adapting to every possible need for variation could easily cripple the attempts to create a new web solution for the organization. Creating flexible enough templates with blocks makes it so much easier to adapt the varying needs of an organization and its markets.

For example, variants of the concept pages can be made for differing markets, simply by moving around or adding or removing blocks. This gives editors the option to adapt to the market without the need to involve the systems implementer (except in the rare cases where you have to add new block types). Using Instant Templates can also accelerate your web efforts, since new ways to use the blocks can be tested, and then replicated to other markets if successful. Of course, this is a challenge in itself when you have a lot of markets and stakeholders, but at least it moves the limitations from being a technical one to being more about communication and collaboration between the stakeholders.

So, with a few base templates and lots of options for placing blocks, this solution should be a win-win for all parties, right? Well, it turns out for one essential group, life becomes more complicated. That group is the editors because creating dynamic pages becomes much more challenging than filling in a few pre-defined form fields.

Even though you can give training and perhaps offer some ‘How To’ guides, it is still rather tricky for an editor to build a page from scratch with a set of blocks. In addition, building complex pages from scratch using blocks will not give consistency, and anyone that has built an advanced Lego module with or without a manual knows how time consuming and hard this is. The same thing goes for very flexible templates in Episerver using blocks.

What Instant Templates Can Help With

There has always been a need to help editors in Episerver. For new editors not used to Episerver, simple templates for news and similar, makes it easy to contribute content. Actually, an early mantra when developing Episerver CMS was that ‘everyone should be able to create and edit content in the CMS’. As pages become more and more complex, the need to have templates for intermediate and even experienced editors grows. When I was working at Episerver, it was actually quite common practice that the internal editors at Episerver actually used copy and paste to create new content. Of course, this has many negative effects, such as people forgetting to add a proper URL slug.

A few years back, I was talking to Allan Thraen, Episerver Director of Research, regarding this problem, which it turned out, he was also investigating. As editors were using the copy and paste technique already, I suggested to Allan, an innovative way we could improve upon that method while eliminating as many of the disadvantages as possible. For example;

1. Instead of just finding an existing page, editors can create separate templates that can be organized and easy to find

2. The add-on ensures the content is set to a draft state when creating an item from a template (compared with Episerver pages which you would have to unpublish as a first step after you have copied it)

3. Clear some values, like URL slug, when you start.

With this in mind, I created a POC for this that I then handed over to Fredrik Vig at Geta who finalized and released this. Templates are managed as regular content in a separate structure that can be worked with by adding a new gadget to the Episerver editorial interface:

Since this is just standard content, you can add any kind of content as a template and you can also manage access rights to the templates in the admin interface. There is also an addition to the “new” button where you can choose to create new content from an instant template which gives you a selection of the right templates.

How About Nested Blocks?

You can create templates that contain blocks inside of them. For example, if you create a new item from a template, it will replicate all local blocks while links to shared blocks will continue to link to the shared block.

How About Multi-Lingual Solutions?

I like to compare Instant Templates with copy paste, but on steroids. I do not recommend a client having several languages for the instant templates, since the content for each language will be copied to the new content. In my opinion, the best future solution for Instant Templates would be if only the content for the current language was copied so that you could create multi lingual templates. For now however, I recommend setting up templates for each language where you need to create original content.

What About Contributing to Instant Templates?

I talked to Fredrik Vig at Geta about making this available on open source and he has agreed. We at Niteco plan to contribute to the improvement of this module even further and I hope that others can join that effort as well.

Further Reading:

https://github.com/Geta/InstantTemplates

https://medium.com/5000-things/learning-from-lego-a-step-forward-in-modular-web-design-d8ff953f45a8

https://world.optimizely.com/articles/Items/EPiServer-7-Ready-for-a-multi-screen-world/