Web Parts in EPiServer

1. Web Parts in EPiServer thomas.leela@epinova.no

2. 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.Flexigridalthought it might have been one big module. • Uses none of EPiServers WebPart implementation. • Together with DynamicContent the sky is the limit.

3. Dictionary

4. Demo – Web Part concepts

6. Getting started • Include LibrariesWebPartsCoreEpinova.WebParts.ProvidersFlexigrid • Add language files (optional) • Add entry to pages section in Web.config<addtagPrefix="epicode" tagName="ManagementConsole" src="~/Templates/Public/WebParts/Util/ManagementConsole.ascx"/><addtagPrefix="epicode" namespace="EPiCode.WebParts.EPiChrome" assembly="EPiCode.WebParts.Core"/> • Add ManagementConsole.ascx from WebPartsCore to your project • Modify webPart section in Web.config<webParts> <personalizationdefaultProvider="EpinovaPageVersionedProvider"> <providers> <clear/> <addname="EpinovaPageVersionedProvider" type="Epinova.WebParts.Providers.PageDataPersonalizationProvider" connectionStringName="EPiServerDB" fallbackProviderName="" /> </providers> <authorization> <allowverbs="enterSharedScope" roles="WebAdmins, WebEditors, Administrators" /> </authorization> </personalization></webParts>

7. Add a ScriptManager, WebPartManager and ManagementConsoledirectly under <form> in MasterPage<form runat="server"> <asp:ScriptManagerrunat="server" EnablePartialRendering="true" /> <epicode:EpiWebPartManagerrunat="server" Personalization-Enabled="true" Personalization-InitialScope="Shared" /> <epicode:ManagementConsolerunat="server" /> • Add Web Part Zones to aspx or ascx<epicode:ZoneLowUiImpactrunat="server" ID="MainZone" CatalogZoneId="ThemeCatalogZone" /> • Add your Web Parts to ManagementConsole.ascx<epicode:WebPartManagementConsoleRunat="server" /><asp:CatalogZonerunat="server" ID="ThemeCatalogZone"> <ZoneTemplate> <asp:DeclarativeCatalogPartrunat="server" ID="ThemeDeclarativeCatalog"> <WebPartsTemplate> <wp:HorizontalRulerPartrunat="server" ID="HorizontalRulerPart1" /> <wp:BannerPartrunat="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

8. 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:ZoneLowUiImpactrunat="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>

9. Demo – Thinkpresentationoutofthe 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. <styletype="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 .boximg { width:100%; text-align:center; } #SecondaryBody .webpart .box .inner { border-right: solid 6px #444; border-bottom: solid 6px #444; padding:3px; } </style>

10. Demo -Creating a Web Part • Remeber to addyourWebPart to ManagementConsole.ascx • Try to Add DynamicContent into Editor using System; usingSystem.Web.UI; usingSystem.Web.UI.WebControls.WebParts; usingEPiCode.WebParts; usingEPiServer.Editor; namespaceEPiServer.Templates.Public.WebParts { public partial class EditorPart : PropertyDataWebPartBase { [Personalizable, IsRequired, Searchable(true)] publicSerializablePropertyXhtmlString Editor{ get; set; } publicEditorPart() { Editor = newSerializablePropertyXhtmlString { EditorToolOptions = EditorToolOption.All ^ EditorToolOption.Font }; } protected override voidOnPreRender(EventArgs e) { var propertyControl = Editor.CreatePropertyControl(); propertyControl.PropertyData = newEPiServer.SpecializedProperties.PropertyXhtmlString(Editor.Valueas string); Controls.Add(propertyControl as Control); } } }

11. 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:ZoneLowUiImpactrunat="server" ID="MainZone" CatalogZoneId="ThemeCatalogZone" > <ZoneTemplate> <public:MainBodyID="MainBody1" runat="server" /> <asp:Calendarrunat="server" ID="Calendar1" /> </ZoneTemplate> </epicode:ZoneLowUiImpact>

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

13. How to translate Web Part Name Translated in the following order with fallback to class name. Never "Missing translation for…." Automatic and equivalent to page types<webparts> <webpartname="BannerPart"> <caption>Image banner</caption> <description>Clickable image banner</description> </webpart></webparts> WebPartDataLanguageAttribute[WebPartDataLanguage("/root/mypath/title", "/root/mypath/description")]public partial class BannerPart : UserControlWebPartBase Class namepublic partial class BannerPart : UserControlWebPartBase

14. Translate Web Part Property Names Translated in the following order with fallback to property name. Never "Missing translation for…." Atomatic and equivalent to page types<webparts> <common> <propertyname="Image"> <caption>Select Image</caption> <help>Select an image from file archive</help> </property> </common></webparts> Exsiting PageType Property translation<pagetypes> <common> <propertyname="Image"> <caption>Image</caption> <help> Specify an image that will be shown on the startpage (900*341 pixels) </help> </property> </common></pagetypes> PropertyDataLanguageAttribute[PropertyDataLanguageAttribute("/mypath/image/name", "/mypath/image/hoover")]public PropertyImageUrl Image { get; set; } Property attribute WebDisplayName[WebDisplayName("Select Image"), WebDescription("Select image for the banner property")]public PropertyImageUrl Image { get; set; } Property Namepublic PropertyImageUrl Image { get; set; }

15. Web Part and Dynamic Content comparison • Very Similar concepts. • Complimentary functionality. • WebParts with editor can contain DynamicContent

17. 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

18. 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

19. 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