Web Parts in EPiServer

thomas.leela@epinova.no

1

Introduction

• Web Parts was launched with ASP.NET 2.0 in 2005.• Well established standard.• EPiCode.WebParts.Core was originally developed for

regjeringen.no by Steve Celius back in 2006.• Has over the years evolved and matured into a rich supplement

for EPiServer.• Web editors applaud the flexibility it offers as is dramatically

reduce number of templates and the number of properties on each template.

• This presentation is actually based on three modules; EPiCode.WebParts.Core, Epinova.WebParts.Providers and Epinova.SpecializedProperties.Flexigrid althought it might have been one big module.

• Uses none of EPiServers WebPart implementation.• Together with DynamicContent the sky is the limit.

2

Dictionary

Web Part Controls for creating Web sites that enable end users(editors) to modify the content, appearance, and behavior of Web pages directly in a browser.

Zone Container for Web Parts.

Dynamic Web Part A Web Part dynamically added by editor. Not to be mistaken with EPiServers dynamic properties nor DynamicContent.

Static Web Part A static WebPart or UserControl inside a zone. Much like a UserControl inside a Page.

Shared Scope The most commonly used scope in EPiServer context. Editors edit Web Parts which are visible to all users, thus shared.

User Scope Fully supported, but rarely used. Provides user personalization capabilities much like igoogle and bbc.co.uk.

Web Part Provider Data layer between Web Application and WebPart repository.

Flexigrid Free EPiCode module allowing editors to create dynamic Web Part Zones.

Demo – Web Part concepts

4

5

Getting started1. Include Libraries

WebPartsCoreEpinova.WebParts.ProvidersFlexigrid

2. Add language files (optional)

3. Add entry to pages section in Web.config<add tagPrefix="epicode" tagName="ManagementConsole" src="~/Templates/Public/WebParts/Util/ManagementConsole.ascx"/><add tagPrefix="epicode" namespace="EPiCode.WebParts.EPiChrome" assembly="EPiCode.WebParts.Core"/>

4. Add ManagementConsole.ascx from WebPartsCore to your project5. Modify webPart section in Web.config

<webParts> <personalization defaultProvider="EpinovaPageVersionedProvider"> <providers> <clear/> <add name="EpinovaPageVersionedProvider" type="Epinova.WebParts.Providers.PageDataPersonalizationProvider" connectionStringName="EPiServerDB" fallbackProviderName="" /> </providers> <authorization> <allow verbs="enterSharedScope" roles="WebAdmins, WebEditors, Administrators" /> </authorization> </personalization></webParts>

6

6. Add a ScriptManager, WebPartManager and ManagementConsole directly under <form> in MasterPage<form runat="server"> <asp:ScriptManager runat="server" EnablePartialRendering="true" /> <epicode:EpiWebPartManager runat="server" Personalization-Enabled="true" Personalization-InitialScope="Shared" /> <epicode:ManagementConsole runat="server" />

7. Add Web Part Zones to aspx or ascx<epicode:ZoneLowUiImpact runat="server" ID="MainZone" CatalogZoneId="ThemeCatalogZone" />

8. Add your Web Parts to ManagementConsole.ascx<epicode:WebPartManagementConsole Runat="server" /><asp:CatalogZone runat="server" ID="ThemeCatalogZone"> <ZoneTemplate> <asp:DeclarativeCatalogPart runat="server" ID="ThemeDeclarativeCatalog"> <WebPartsTemplate> <wp:HorizontalRulerPart runat="server" ID="HorizontalRulerPart1" /> <wp:BannerPart runat="server" ID="BannerPart1" /> </WebPartsTemplate> </asp:DeclarativeCatalogPart> </ZoneTemplate></asp:CatalogZone>

• Inheritance from EPiCode.WebParts.TemplatePageWebPartBase is Obsolete

• Looks complicated at first glance, but it is quite straightforward!

• Installer package with examples available at:https://www.coderesort.com/p/epicode/wiki/EPiWebParts

7

Demo –New ZoneLowUiImpact properties

• ZoneHeaderTemplate and ZoneFooterTemplate defines how the header and footer section of the ZoneLowUiImpact control is displayed. Just like HeaderTemplate and FooterTemplate does so for Repeater control.

• WebPartHeaderTemplate and WebPartFooterTemplate enables wrapping of Web Parts similar to ItemHeaderTemplate and ItemFooterTemplate in EPiServer.Web.WebControls.PageTree

• Note the lack of WebPartItemTemplate.

<epicode:ZoneLowUiImpact runat="server" ID="RightZone" CatalogZoneId="ThemeCatalogZone" CreateWrapperDiv="true" > <ZoneHeaderTemplate> <h2>Zone header</h2> <hr /> </ZoneHeaderTemplate> <ZoneFooterTemplate> <i>End of Zone</i> </ZoneFooterTemplate> <WebPartHeaderTemplate> <div class="box"> <div class="inner"> </WebPartHeaderTemplate> <WebPartFooterTemplate> </div> </div> <hr /> </WebPartFooterTemplate></epicode:ZoneLowUiImpact>

8

Demo – Think presentation out of the Zone

Web Parts appear in different zones with uneven widths and appearance

• Keep your WebPart markup as simple as possible, hand over styling to container zone.

• Use <WebPartHeaderTemplate> and <WebPartFooterTemplate> when "boxing" in web parts.

<style type="text/css"> #MainBody .webpart.horizontal { margin-left:5px; } #MainBody .webpart.horizontal.first, #MainBody .webpart.horizontal.single { margin-left:0; } #SecondaryBody .webpart { margin-top:10px; } #SecondaryBody .webpart.first, #SecondaryBody .webpart.single { margin-top:0; } #SecondaryBody .webpart .box { border-top: solid 6px #ccc; border-left: solid 6px #ccc; } #SecondaryBody .webpart .box img { width:100%; text-align:center; } #SecondaryBody .webpart .box .inner { border-right: solid 6px #444; border-bottom: solid 6px #444; padding:3px; }</style>

9

Demo -Creating a Web Part

• Remeber to add your WebPart to ManagementConsole.ascx• Try to Add DynamicContent into Editorusing System;

using System.Web.UI;

using System.Web.UI.WebControls.WebParts;

using EPiCode.WebParts;

using EPiServer.Editor;

namespace EPiServer.Templates.Public.WebParts

{

public partial class EditorPart : PropertyDataWebPartBase

{

[Personalizable, IsRequired, Searchable(true)]

public SerializablePropertyXhtmlString Editor{ get; set; }

public EditorPart()

{

Editor = new SerializablePropertyXhtmlString { EditorToolOptions = EditorToolOption.All ^ EditorToolOption.Font };

}

protected override void OnPreRender(EventArgs e)

{

var propertyControl = Editor.CreatePropertyControl();

propertyControl.PropertyData = new EPiServer.SpecializedProperties.PropertyXhtmlString(Editor.Value as string);

Controls.Add(propertyControl as Control);

}

}

}

10

Demo –Static Web Parts

• Web Parts / UserControls that should occur on most instances of a Page type.

• Delete is disabled, but Minimize is supported.• Great for "template" functionality.

<epicode:ZoneLowUiImpact runat="server" ID="MainZone" CatalogZoneId="ThemeCatalogZone" > <ZoneTemplate> <public:MainBody ID="MainBody1" runat="server" /> <asp:Calendar runat="server" ID="Calendar1" /> </ZoneTemplate> </epicode:ZoneLowUiImpact>

11

Demo -Flexigrid

• http://www.screencast-o-matic.com/embed?sc=cQ6OQFfSV&w=800&np=0&v=2

12

How to translate Web Part Name• Translated in the following order with fallback to class name.• Never "Missing translation for…."

1. Automatic and equivalent to page types<webparts> <webpart name="BannerPart"> <caption>Image banner</caption> <description>Clickable image banner</description> </webpart></webparts>

2. WebPartDataLanguageAttribute[WebPartDataLanguage("/root/mypath/title", "/root/mypath/description")]public partial class BannerPart : UserControlWebPartBase

3. Class namepublic partial class BannerPart : UserControlWebPartBase

Translate Web Part Property NamesTranslated in the following order with fallback to property name. Never "Missing translation for…."

1. Atomatic and equivalent to page types<webparts> <common> <property name="Image"> <caption>Select Image</caption> <help>Select an image from file archive</help> </property> </common></webparts>

2. Exsiting PageType Property translation<pagetypes> <common> <property name="Image"> <caption>Image</caption> <help> Specify an image that will be shown on the startpage (900*341 pixels) </help> </property> </common></pagetypes>

3. PropertyDataLanguageAttribute[PropertyDataLanguageAttribute("/mypath/image/name", "/mypath/image/hoover")]public PropertyImageUrl Image { get; set; }

4. Property attribute WebDisplayName[WebDisplayName("Select Image"), WebDescription("Select image for the banner property")]public PropertyImageUrl Image { get; set; }

5. Property Name

public PropertyImageUrl Image { get; set; }

Web Part and Dynamic Content comparison

15

• Very Similar concepts.• Complimentary functionality.• WebParts with editor can contain DynamicContent

16

Web Parts Dynamic Content

Exposes on EPiServer property types X X

Preview view X -

Soft links (warning on deleting referenced content) X

Drag & drop support X -

Indexed values (searchable content) X

Multilanguage support X X

Follow page on copy & paste, export & import X X

Editable from View mode (dope) X

Can host corresponding Web Part / Dynamic Content X

Support IsRequired properties X

Resides in WebPartZone PropertyXhtmlString

Tips & Tricks

• Use Web Parts to expose properties from Controls, do not implement logic or presentation.• UserControls without parameters can be used directly as web parts eg. asp:Calendar• Web Parts might appear in zones with uneven widths and appearance so;

Keep your web part markup as simple as possible, hand over styling to containing zoneUse <WebPartHeaderTemplate> and <WebPartFooterTemplate> for when "boxing in" web parts

• Don’t force editors construct repeated web parts on each instance of a page type. -Use static web parts when appropriate.

• Set default values in constructor when appropriate and Translate both name and Description• Use attributes, Searchable and IsRequired (as you do with properties on page types)• Handle all Exceptions in a base class for your WebParts. A crashed web part page might be

cumbersome to repair.• Remember that minimized web parts are not visible.• Set "unique per language" as usual in admin.• Avoid redundant code. Use your existing Controls directly as WebParts or inside WebParts. Don’t

copy! • Do your stuff in PreRender as OnLoad is too early when working with Web Parts.• Crossbrowser support by using asp.net 4.0 or PreviewVersion

17

A look ahead

• CMS 6 releases just around the corner.• Copy & paste support for web parts.• Support for Web Parts stored as Dynamic properties with merge

capabilities.• More sophisticated access rights

18

References

• http://labs.episerver.com/en/Blogs/Stein-Viggo-Grenersen/Dates/112262/2/EPiServer-on-steroids/

• https://www.coderesort.com/p/epicode/wiki/EPiWebParts

• http://epinova.no/no/Blog/episerver_blog/?BlogBeginDate=2009-10-13

• http://epinova.no/no/Blog/episerver_blog/?BlogBeginDate=2009-04-14

19