EPiServer presentation about how you can create your own custom DOJO property.

1. Aanmaken Dojo property
EPISERVER CMS 7
www.patrickvankleef.com

2. Patrick van Kleef
• Werkzaam bij Macaw
• Arlanet
• Content management systems
• EPiServer
• 3+ jaar ervaring
• Find
• Commerce
• Community
• Umbraco
• Blog: www.patrickvankleef.com
www.patrickvankleef.com

3. Inleiding
• EPiServer CMS versies
• Custom property versie 6
• Custom property versie 7
• DOJO
• Scenario custom property
• Oplossingen
• Demo
www.patrickvankleef.com

4. EPiServer CMS
www.patrickvankleef.com
• Versie 4
• Webforms

5. EPiServer CMS
www.patrickvankleef.com
• Versie 5
• Webforms

6. EPiServer CMS
www.patrickvankleef.com
• Versie 6
• Webforms

7. EPiServer CMS
www.patrickvankleef.com
• Versie 7
• Inline Page editing
• DOJO
• Versie 8
• Toekomst?

8. EPiServer CMS (5)6 - property
• Admin mode
• PageTypeBuilder – Joel Abrahamsson
• PropertyData
• Verantwoordelijk voor opslaan en ophalen waardes
• Type
• Default waarde
• PropertyString
• Op basis van een bestaande property
• PropertyDataControl
• UI rendering
• Webforms
www.patrickvankleef.com

9. Page Property
Type = CustomProperty
PropertyData
CreatePropertyControl()
Opslaan & ophalen value
PropertyDataControl
UI Rendering
www.patrickvankleef.com

10. EPiServer CMS 7 - property
• Strongly typed page properties
• Module.config
• Configuratie widget
• Assembly
• Path
• Client resources
• EditorDescriptor
• Instellingen voor DOJO widget
• PropertyData
• Verantwoordelijk voor opslaan en ophalen waardes
• Dojo widget
• UI Rendering property
www.patrickvankleef.com

11. www.patrickvankleef.com
Page Property
Type = IEnumerable<string>
UIHint = “custom”
BackingType = typeof(CustomPropertyData)
EditorDescriptor
UIHint = “custom”
TargetType = IEnumerable<string>
ClientEditingClass = “app.editors.property”
DOJO Widget
Declare “app.editors.property”
DOJO Store
Contentdata
PropertyData
Name = CustomPropertyData
Type = IEnumerable<string>
Opslaan & ophalen value

12. DOJO
• Javascript Library
• Ondersteund door alle browsers en devices
• Modulair - AMD (Asynchronous Module Definition)
www.patrickvankleef.com

13. DOJO
• Classes and Extensibility
• Dojo/declare
www.patrickvankleef.com

14. DOJO
• Dijit UI Framework
• Form widgets
• DojoX
• Extra form widgets
• IO helpers
• WebSocket
• Charting
• Mobile solutions
www.patrickvankleef.com

15. Scenario contactformulier
• Pagina met een contactformulier
• Voornaam
• Achternaam
• Land
• Elk land heeft een apart e-mailadres
• E-mail versturen naar land e-mailadres
www.patrickvankleef.com

16. Scenario contactformulier – Oplossingen
• Oplossing 1
• Container pagina type
• Land dropdown
• E-mailadres tekstveld
• Oplossing 2
• Contact pagina type
• Land # e-mailadres tekstveld
www.patrickvankleef.com

17. Scenario contactformulier – Oplossingen
• Oplossing 3
• Custom DOJO property
• Landen uitlezen
• Dynamisch e-mailadres tekstvelden
• Oplossing 4
• Custom DOJO property
• Container pagina’s selecteren
www.patrickvankleef.com

18. Demo
www.patrickvankleef.com

19. Javascript Debug Files
• > EPiServer 7.6
• EPiServer.CMS.UI.Sources Nuget package
• <clientresources debug=“true” />
• Ben McKernan
• http://world.episerver.com/Blogs/Ben-
McKernan/Dates/2014/8/Uncompressed-JavaScript-for-EPiServer-76/
www.patrickvankleef.com

20. Bedankt
• www.patrickvankleef.com
• www.github.com/patkleef
www.patrickvankleef.com