Presentation about a custom solution in EPiServer. In this presentation, I'll show how you can extend EPiServer with Dojo.

1. EPiServer Charts
EPiServer meetup
28-06-2016

2. Patrick van Kleef
EPiServer Most Valued Professional @Geta
• www.patrickvankleef.com
• twitter.com/patkleef
• slideshare.com/patkleef
• github.com/patkleef
• jsfiddle.net/patkleef
• www.geta.no

3. Code available!
Github | JSFiddle
• www.github.com/patkleef/DojoDragAndDrop
• https://jsfiddle.net/patkleef/Ls3hq01v/1/
• https://github.com/patkleef/DojoCharts
• https://jsfiddle.net/patkleef/37yuu79w/
• https://github.com/patkleef/EPiServerStats

4. Contents
- Dojo drag and drop
- Demo
- Dojo charting
- Demo
- EPiServer Charts
- Demo

5. Just to be clear
- Widget = Dojo
- Gadget = EPiServer

6. Drag and Drop
Dojo

8. Drag and Drop
• Types that inherit from IContent can be drag and drop
• ContentArea
• [AllowedTypes(new[ ] { typeof(ImageData)]
• TinyMCE
• Dojo/dnd package
• Source
• Target
• Avatar
• Events
Pages | Blocks | Media

9. Dojo/dnd
How does it work?
Source
Item 1 - Block
Item 2 - Image
Item 3 - Document
Target
Accept: [ ] { Document }
Avatar
Item 3
Events
DndDrop, DraggingOver, DraggingOut, DropExternal, DropInternal, DndCancel, OverEvent, OutEvent,
MouseMove, MouseDown, MouseUp

10. DEMO
- Drag and Drop

11. Charting
Dojo

12. Charting
• Different chart types
• Animation and effects
• Customize
• Dojox/charting package
• Charts
• Plot
• Axis
• Action2d
• Themes
Line | Column | Bar | Pie | Bubbles | more

13. DEMO
- Charting

14. Charts
EPiServer – custom solution

15. What’s the solution about?
• ChartData : IContent
• Chart asset gadget
• Chart dashboard - custom view (preview, all-properties, inline-editor)
• Chart preview – custom view ‘’
• Page source
• Modified by
• Modified at
• Links to page
Display information (charts) of the current page in the CMS

16. ChartData : IContent
• Why IContent? Use the benefits!
• Create, update, delete charts
• Create gadgets, like the blocks, media assets
• Different views: all properties, preview
• Find will index it
• Trash basket
• More ?
All items in EPiServer are IContent: pages, blocks media and charts

17. Architecture
Chart dashboard
Chart gadget
• Page modified by
• Page modified at
DnD chart
Rest store
Chart drop
Load page
Content repository
descriptor
Chart Preview
Create chart

18. Chart dashboard
• Class inherit from ViewConfiguration<T>
• Set the view name
• Set the controllerType, if you would like to use Dojo
• Set the viewType, if you would like to use MVC/Webforms
• Optional – class inherit from UIDescriptor<T>
• Default view (view name)
• Disable views – for example the OnPageEditView
• Dojo widget – controllerType
• UI
What do you need to build a custom view?
All types inherit
ViewConfiguration<HomePage>
Check default view
Type inherit
UIDescriptor<HomePage>
Render default view
Load HomePage in CMS

19. Chart preview
• Same as previous, but now for ChartData (IContent)
What do you need to build a custom view?

20. Chart gadget
• Class inherit from ComponentDefinitionBase
• Set dojo module
• Title, description
• Plugin area
• ContentRepositoryDescriptorBase
• Tell what the gadget should show – ChartData
• What the gadget can do – CRUD
• What the root is
• Custom content provider ?
• Dojo widget
• HierarchicalList widget (EPiServer)
What do you need to build a gadget?

21. Dojo widget architecture
Rest store Chart widget
Chart preview
widget
Chart dashboard
widget
Module.configChart initializer

22. Code demo
- EPiServer Charts

23. Still work in progress
• Implement chart sources for pages
• Create Nuget package
What’s next?

24. Thanks!
www.patrickvankleef.com