Views

Introduction

This document describes how to create views. A view is composed of a view definition that defines the basic structure and components that plug-in to areas. The view and component definitions are pretty light weight on the server. They only define basic behavior and a client side widget responsible for creating the user interface.

Components in a view

The parts used when assembling a view:

• View definition is responsible for settings up the main structure of a view.
• Component is a widget like a page tree or a gadget.
• Container is a component that may contain child components, for instance a panel or a tab.
• Component definition is responsible for creating a component but also to give information about a component, for instance when a user wants to add a component to a page.

You can find example implementations of the following:

• Creating a view
• Creating a container
• Creating a component

Loading a view

When a view is loaded the following flow is triggered:

1. The HTML and some basic scripts are loaded for the page. This includes the global menu, the module definitions and the Dojo/Dijit-libraries.
2. The modules are started. The shell module is responsible for defining some basic components like the epi.routes and epi.dependency.
3. The definition of the current view is fetched through an aditional request returning the structural composition of the view.
4. The widgets making up the user interface are then created recursively based on the view definition.

Altering a view

There are several ways that you can alter the content of a view. The first, and most obvious, is of course to plug in a component into a container. The component definition describes an array of strings with the plug-in paths, or areas, that the component can plug in to automatically. If any of these paths matches the PlugInPath property of a panel, then the component will be created and added to the container.

Once all the components have been added to the containers a chain of view transformers are applied to the view. The purpose of a view transformer is to alter a view before it is rendered by, for example, adding or removing components. EPiServer provides a few default view transformers, but it is also possible to add your own.

The default view transformers are:

• Personalization view transformer replaces components for personalized areas with the users personalized components.
• Configuration view transformer makes it possible to add or remove components for a view through configuration.
• Deterministic GUID transformer makes sure that a component always gets the same unique identifier each time the view is created.

Examples

System overview of views and components

This example shows how the view is assembled on the server. In this example we will show a view that has four pluggable areas.

Components are plugged into areas

Components that want to plug in to areas automatically are added to one or several of their respective areas.

Changing a view through configuration

Configuration adds and removes components for the different panels. This configuration is done per view but it is also possible to configure that a specific component should replace another component globally through the IOC container.

Changing a panel through personalization

If the view contains personalizable panels and the user has personalized these the contents for the panel will be replaced with the personalized content.