|Number of votes:
EPiServer Composer adds more flexibility to the standard version of EPiServer CMS, making it possible for editors to create and change page types affecting the layout of a Web page. In this article we will explore the concept of EPiServer Composer, and provide best practices and recommendations for developers when working with EPiServer Composer.
EPiServer Composer is a module developed for EPiServer CMS 5 allowing people without programming skills to create and change page types affecting the layout of a Web page. EPiServer Composer lists functions in a library, allowing the editor to drag and drop them directly into the page. Everything is done in the EPiServers CMS user interface which is already familiar to editors.
EPiServer Composer key concepts:
1. Content Function
An example of the usage of these in a Web page is displayed in the image.
In EPiServer CMS, you work with the traditional asp.net way to create a Web page by using a template page (.aspx) and units (user control, .ascx). Programmatically, you normally work with one object only, both from the page and its units.
The CurrentPage object is a PageData and contains all the page properties, such as Heading, MainIntro, MainBody. In EPiServer Composer, the CurrentPage object still remains for the page but each content function on the page has its own equivalent CurrentPage object, ContentFunctionData object and contains the content functions own properties.
A Content Area can contain one or more functions, and a Content Function can contain one or more Content Areas. In the following the various components are listed and described in more detail.
Follow the steps below to create an EPiServer Composer page type.
It is recommended that you always create a base class for Composer pages.
A global function is an EPiServer Composer content function with only one instance on the site but appearing on several pages. If the global function instance is changed, it will affect all instances of this function and in all pages where it is used.
To create or edit a global function you need to be an EPiServer Composer administrator. Create new global function from any content function instance on any EPiServer Composer page by selecting the “Save as global function” option. All available global functions are listed under “Global function” section in the Toolbox.
Note: this will take a copy of the local function and store it as a global function. It can now be edited through the Administration tab in the Toolbox and will be updated for all occurrences.
A global function is unique in the whole system and in the current version, the global function doesn’t support the globalization and it means that one global function is available only in the created language.
If you use a global function in one language and drop into in a page with another language, there will properly be an error if the properties on the global function are set to “Unique per language”. To solve this problem, you can use the “fallback language”.
Follow these steps to do this:
Note: the global function still lacks the UI for designing and organizing multiple levels of a global function.
EPiServer Composer is using dynamic property for auto render a global function in a specific content area and for a specific page type. The property is using a specialized property, ExtensionDyanmicContentProperty and will be found under Dropit.Extension.SpecializedProperties namespace.
This is very useful when you want to render a function in many pages, for instance a logo, contact information, a banner etc. In other words, the EPiServer Composer dynamic properties can be used for creating the dynamic master page for your EPiServer Composer pages.
Follow these steps:
The Composer specialized properties are located under Dropit.Extension.SpecializedProperties namespace. The properties are using four extend standard EPiServer CMS page types to EPiServer Composer specific types:
Note: these properties are handled by the system and should not be used or access directly.
The EPiServer Composer Web controls are located under the Dropit.Extension.UI.WebControls namespace. There are two Web controls that can be used in design mode for an EPiServer Composer page type or function:
An EPiServer Composer template is a page with predefined structure and content. By selecting a template when creating a new page the user can maintain the layout and start editing with the content functions already in place. This reduces the risk of creating incorrect content in the wrong place and saves time.
Administrators can create templates by clicking “Save as template” and give it a name and an icon. The template will then be available as an option in the list of page types. Administrators can update the template from the Administration tab in the Toolbox, but this will ONLY affect new pages created from the template and not existing pages.
EPiServer Composer has a cache handler for caching of the EPiServer Composer objects, i.e. page data, function data, dynamic properties and settings.
The cache manager can be accessed through:
Under the namespace Dropit.Extension.Controllers, you will find the classes for working with page and functions.
Some important classes are:
From version 3.2.5, you can export and import the definitions for an EPiServer Composer page type or a function type, including all information such as categories and access rights. You will find the classes that allow you doing this under the namespace EPiServer.Composer.Install.
EPiServer Composer does not index the content of functions by default for performance reason. To enable the indexing, you need to turn on the setting in the plug-in manager for EPiServer Composer: “Enable indexing content”.
All searchable properties on each function need also to be set to “true”. When saving the page, EPiServer Composer will get all searchable text from all functions on the page and store it in ExtensionPageProperty on the page. This process is to ensure that the search engine can find the content of the functions and refer to the page and not to the function pages.
How to index pages created before enabling the indexing function in EPiServer Composer:
EPiServer Composer does not contain any data tables of its own. Instead, it uses the standard EPiServers PageData to store all data for all kind of information: pages, functions, settings and everything else.
This information is stored directly under the root and is created when installing EPiServer Composer for the first time. This is done by importing a data package included in the installation and creating a page type with the name “[ExtensionSys] Extension Container”, as well as a root container page with name [Extension Data Container]. The page type will be used for creating all kinds of EPiServer Composer containers.
All functions belonging to an EPiServer Composer page are stored in a node under Content Data. This node is calling as “Shadow page” and has a default name with a prefix “S_” and is followed by the page ID of the EPiServer Composer page it refers to.
Classes for working with the container and shadow pages:
EPiServer Composer is using log4net for logging. To enable logging, you need to define the configuration in a log config file with name “dropit.extension.config” and put it under the bin folder.
This is an example of how the dropit.extension.config can be defined:
<?xml version="1.0" encoding="utf-8" ?>
<encoding value="utf-16" />
<remoteAddress value="127.0.0.1" />
<remotePort value="8090" />
<conversionPattern value="%date %level - %message%n%exception" />
<level value="Error" />
<appender-ref ref="udpLogAppender" />
<level value="Error" />
<level value="Error" />