EPiServer Charts
Download as PPTX, PDF0 likes506 views
This document presents a presentation by Patrick van Kleef about utilizing Dojo for drag-and-drop functionality and charting within Episerver. It covers topics such as chart data management, custom views, and the architecture required to build gadgets for displaying charts. The document also includes demo links and outlines future developments in the project.
![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](https://image.slidesharecdn.com/meetup-160711070001/85/EPiServer-Charts-8-320.jpg)
![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](https://image.slidesharecdn.com/meetup-160711070001/85/EPiServer-Charts-9-320.jpg)
EPiServer Charts
- 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
- 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?