EPiServer Web Parts


Published on

Web Parts by Thomas Leela, Epinova AS.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

EPiServer Web Parts

  1. 1. Web Parts in EPiServer [email_address]
  2. 2. Introduction <ul><li>Web Parts was launched with ASP.NET 2.0 in 2005. </li></ul><ul><li>Well established standard. </li></ul><ul><li>EPiCode.WebParts.Core was originally developed for regjeringen.no by Steve Celius back in 2006. </li></ul><ul><li>Has over the years evolved and matured into a rich supplement for EPiServer. </li></ul><ul><li>Web editors applaud the flexibility it offers as is dramatically reduce number of templates and the number of properties on each template. </li></ul><ul><li>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. </li></ul><ul><li>Uses none of EPiServers WebPart implementation. </li></ul><ul><li>Together with DynamicContent the sky is the limit. </li></ul>
  3. 3. 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.
  4. 4. Demo – Web Part concepts
  5. 5.
  6. 6. Getting started <ul><li>Include Libraries WebPartsCore Epinova.WebParts.Providers Flexigrid </li></ul><ul><li>Add language files (optional) </li></ul><ul><li>Add entry to pages section in Web.config < add tagPrefix =&quot;epicode&quot; tagName =&quot;ManagementConsole&quot; src =&quot;~/Templates/Public/WebParts/Util/ ManagementConsole.ascx &quot;/> < add tagPrefix =&quot;epicode&quot; namespace =&quot;EPiCode.WebParts.EPiChrome&quot; assembly =&quot;EPiCode.WebParts.Core&quot;/> </li></ul><ul><li>Add ManagementConsole.ascx from WebPartsCore to your project </li></ul><ul><li>Modify webPart section in Web.config < webParts > < personalization defaultProvider =&quot;EpinovaPageVersionedProvider&quot;> < providers > < clear /> < add name =&quot;EpinovaPageVersionedProvider&quot; type =&quot;Epinova.WebParts.Providers.PageDataPersonalizationProvider&quot; connectionStringName =&quot;EPiServerDB&quot; fallbackProviderName=&quot;&quot; /> </ providers > < authorization > < allow verbs =&quot;enterSharedScope&quot; roles =&quot;WebAdmins, WebEditors, Administrators&quot; /> </ authorization > </ personalization > </ webParts > </li></ul>
  7. 7. <ul><li>Add a ScriptManager, WebPartManager and ManagementConsole directly under <form> in MasterPage < form runat =&quot;server&quot;> < asp : ScriptManager runat =&quot;server&quot; EnablePartialRendering =&quot;true&quot; /> < epicode : EpiWebPartManager runat =&quot;server&quot; Personalization-Enabled =&quot;true&quot; Personalization-InitialScope =&quot;Shared&quot; /> < epicode : ManagementConsole runat =&quot;server&quot; /> </li></ul><ul><li>Add Web Part Zones to aspx or ascx < epicode : ZoneLowUiImpact runat =&quot;server&quot; ID =&quot;MainZone&quot; CatalogZoneId =&quot;ThemeCatalogZone&quot; /> </li></ul><ul><li>Add your Web Parts to ManagementConsole.ascx < epicode : WebPartManagementConsole Runat =&quot;server&quot; /> < asp : CatalogZone runat =&quot;server&quot; ID =&quot;ThemeCatalogZone&quot;> < ZoneTemplate > < asp : DeclarativeCatalogPart runat =&quot;server&quot; ID =&quot;ThemeDeclarativeCatalog&quot;> < WebPartsTemplate > < wp : HorizontalRulerPart runat =&quot;server&quot; ID =&quot;HorizontalRulerPart1&quot; /> < wp : BannerPart runat =&quot;server&quot; ID =&quot;BannerPart1&quot; /> </ WebPartsTemplate > </ asp : DeclarativeCatalogPart > </ ZoneTemplate > </ asp : CatalogZone > </li></ul><ul><li>Inheritance from EPiCode.WebParts.TemplatePageWebPartBase is Obsolete </li></ul><ul><li>Looks complicated at first glance, but it is quite straightforward! </li></ul><ul><li>Installer package with examples available at: https://www.coderesort.com/p/epicode/wiki/EPiWebParts </li></ul>
  8. 8. Demo –New ZoneLowUiImpact properties <ul><li>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. </li></ul><ul><li>WebPartHeaderTemplate and WebPartFooterTemplate enables wrapping of Web Parts similar to ItemHeaderTemplate and ItemFooterTemplate in EPiServer.Web.WebControls.PageTree </li></ul><ul><li>Note the lack of WebPartItemTemplate. </li></ul><ul><li>< epicode : ZoneLowUiImpact runat =&quot;server&quot; ID =&quot;RightZone&quot; CatalogZoneId =&quot;ThemeCatalogZone&quot; CreateWrapperDiv =&quot;true&quot; > < ZoneHeaderTemplate > < h2 >Zone header</ h2 > < hr /> </ ZoneHeaderTemplate > < ZoneFooterTemplate > < i >End of Zone</ i > </ ZoneFooterTemplate > < WebPartHeaderTemplate > < div class =&quot;box&quot;> < div class =&quot;inner&quot;> </ WebPartHeaderTemplate > < WebPartFooterTemplate > </ div > </ div > < hr /> </ WebPartFooterTemplate > </ epicode : ZoneLowUiImpact > </li></ul>
  9. 9. Demo – Think presentation out of the Zone <ul><li>Web Parts appear in different zones with uneven widths and appearance </li></ul><ul><li>Keep your WebPart markup as simple as possible, hand over styling to container zone. </li></ul><ul><li>Use <WebPartHeaderTemplate> and <WebPartFooterTemplate> when &quot;boxing&quot; in web parts. </li></ul><ul><li>< style type =&quot;text/css&quot;> </li></ul><ul><li>#MainBody .webpart.horizontal { margin-left: 5px; } </li></ul><ul><li>#MainBody .webpart.horizontal.first, #MainBody .webpart.horizontal.single { margin-left: 0; } </li></ul><ul><li>#SecondaryBody .webpart { margin-top: 10px; } </li></ul><ul><li>#SecondaryBody .webpart.first, #SecondaryBody .webpart.single { margin-top: 0; } </li></ul><ul><li>#SecondaryBody .webpart .box { border-top: solid 6px #ccc; border-left: solid 6px #ccc; } </li></ul><ul><li>#SecondaryBody .webpart .box img { width: 100%; text-align: center; } </li></ul><ul><li>#SecondaryBody .webpart .box .inner { border-right: solid 6px #444; border-bottom: solid 6px #444; padding: 3px; } </li></ul><ul><li></ style > </li></ul>
  10. 10. Demo -Creating a Web Part <ul><li>Remeber to add your WebPart to ManagementConsole.ascx </li></ul><ul><li>Try to Add DynamicContent into Editor </li></ul><ul><li>using System; </li></ul><ul><li>using System.Web.UI; </li></ul><ul><li>using System.Web.UI.WebControls.WebParts; </li></ul><ul><li>using EPiCode.WebParts; </li></ul><ul><li>using EPiServer.Editor; </li></ul><ul><li>namespace EPiServer.Templates.Public.WebParts </li></ul><ul><li>{ </li></ul><ul><li>public partial class EditorPart : PropertyDataWebPartBase </li></ul><ul><li>{ </li></ul><ul><li>[Personalizable, IsRequired, Searchable( true)] </li></ul><ul><li>public SerializablePropertyXhtmlString Editor{ get; set; } </li></ul><ul><li>public EditorPart() </li></ul><ul><li>{ </li></ul><ul><li>Editor = new SerializablePropertyXhtmlString { EditorToolOptions = EditorToolOption.All ^ EditorToolOption.Font }; </li></ul><ul><li>} </li></ul><ul><li>protected override void OnPreRender( EventArgs e) </li></ul><ul><li>{ </li></ul><ul><li>var propertyControl = Editor.CreatePropertyControl(); </li></ul><ul><li>propertyControl.PropertyData = new EPiServer.SpecializedProperties. PropertyXhtmlString(Editor.Value as string); </li></ul><ul><li>Controls.Add(propertyControl as Control); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  11. 11. Demo –Static Web Parts <ul><li>Web Parts / UserControls that should occur on most instances of a Page type. </li></ul><ul><li>Delete is disabled, but Minimize is supported. </li></ul><ul><li>Great for &quot;template&quot; functionality. < epicode : ZoneLowUiImpact runat =&quot;server&quot; ID =&quot;MainZone&quot; CatalogZoneId =&quot;ThemeCatalogZone&quot; > </li></ul><ul><li>< ZoneTemplate > </li></ul><ul><li>< public : MainBody ID =&quot;MainBody1&quot; runat =&quot;server&quot; /> </li></ul><ul><li>< asp : Calendar runat =&quot;server&quot; ID =&quot;Calendar1&quot; /> </li></ul><ul><li></ ZoneTemplate > </li></ul><ul><li></ epicode : ZoneLowUiImpact > </li></ul>
  12. 12. Demo -Flexigrid <ul><li>http://www.screencast-o-matic.com/embed?sc=cQ6OQFfSV&w=800&np=0&v=2 </li></ul>
  13. 13. How to translate Web Part Name <ul><li>Translated in the following order with fallback to class name. </li></ul><ul><li>Never &quot;Missing translation for….&quot; </li></ul><ul><li>Automatic and equivalent to page types < webparts > < webpart name =&quot;BannerPart&quot;> < caption >Image banner</ caption > < description >Clickable image banner</ description > </ webpart > </ webparts > </li></ul><ul><li>WebPartDataLanguageAttribute [ WebPartDataLanguage( &quot;/root/mypath/title&quot;, &quot;/root/mypath/description&quot;)] public partial class BannerPart : UserControlWebPartBase </li></ul><ul><li>Class name public partial class BannerPart : UserControlWebPartBase </li></ul>
  14. 14. Translate Web Part Property Names <ul><li>Translated in the following order with fallback to property name. Never &quot;Missing translation for….&quot; </li></ul><ul><li>Atomatic and equivalent to page types < webparts > < common > < property name =&quot;Image&quot;> < caption >Select Image</ caption > < help >Select an image from file archive</ help > </ property > </ common > </ webparts > </li></ul><ul><li>Exsiting PageType Property translation < pagetypes > < common > < property name =&quot;Image&quot;> < caption >Image</ caption > < help > Specify an image that will be shown on the startpage (900*341 pixels) </ help > </ property > </ common > </ pagetypes > </li></ul><ul><li>PropertyDataLanguageAttribute [ PropertyDataLanguageAttribute( &quot;/mypath/image/name&quot;, &quot;/mypath/image/hoover&quot;)] public PropertyImageUrl Image { get; set; } </li></ul><ul><li>Property attribute WebDisplayName [ WebDisplayName( &quot;Select Image&quot;), WebDescription( &quot;Select image for the banner property&quot;)] public PropertyImageUrl Image { get; set; } </li></ul><ul><li>Property Name public PropertyImageUrl Image { get; set; } </li></ul>
  15. 15. Web Part and Dynamic Content comparison <ul><li>Very Similar concepts. </li></ul><ul><li>Complimentary functionality. </li></ul><ul><li>WebParts with editor can contain DynamicContent </li></ul>
  16. 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
  17. 17. Tips & Tricks <ul><li>Use Web Parts to expose properties from Controls, do not implement logic or presentation. </li></ul><ul><li>UserControls without parameters can be used directly as web parts eg. asp:Calendar </li></ul><ul><li>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 zone Use <WebPartHeaderTemplate> and <WebPartFooterTemplate> for when &quot;boxing in&quot; web parts </li></ul><ul><li>Don’t force editors construct repeated web parts on each instance of a page type. -Use static web parts when appropriate. </li></ul><ul><li>Set default values in constructor when appropriate and Translate both name and Description </li></ul><ul><li>Use attributes, Searchable and IsRequired (as you do with properties on page types) </li></ul><ul><li>Handle all Exceptions in a base class for your WebParts. A crashed web part page might be cumbersome to repair. </li></ul><ul><li>Remember that minimized web parts are not visible. </li></ul><ul><li>Set &quot;unique per language&quot; as usual in admin. </li></ul><ul><li>Avoid redundant code. Use your existing Controls directly as WebParts or inside WebParts. Don’t copy! </li></ul><ul><li>Do your stuff in PreRender as OnLoad is too early when working with Web Parts. </li></ul><ul><li>Crossbrowser support by using asp.net 4.0 or PreviewVersion </li></ul>
  18. 18. A look ahead <ul><li>CMS 6 releases just around the corner. </li></ul><ul><li>Copy & paste support for web parts. </li></ul><ul><li>Support for Web Parts stored as Dynamic properties with merge capabilities. </li></ul><ul><li>More sophisticated access rights </li></ul>
  19. 19. References <ul><li>http://labs.episerver.com/en/Blogs/Stein-Viggo-Grenersen/Dates/112262/2/EPiServer-on-steroids/ </li></ul><ul><li>https://www.coderesort.com/p/epicode/wiki/EPiWebParts </li></ul><ul><li>http://epinova.no/no/Blog/episerver_blog/?BlogBeginDate=2009-10-13 </li></ul><ul><li>http://epinova.no/no/Blog/episerver_blog/?BlogBeginDate=2009-04-14 </li></ul>