EPiServer Charts

EPiServer meetup

28-06-2016

Patrick van KleefEPiServer Most Valued Professional @Geta

• www.patrickvankleef.com• twitter.com/patkleef• slideshare.com/patkleef• github.com/patkleef• jsfiddle.net/patkleef• www.geta.no

Click icon to add picture

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

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

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

Drag and Drop

Dojo

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

Dojo/dndHow does it work?

SourceItem 1 - BlockItem 2 - ImageItem 3 - Document

TargetAccept: [ ] { Document }

Avatar

Item 3

EventsDndDrop, DraggingOver, DraggingOut, DropExternal, DropInternal, DndCancel, OverEvent, OutEvent, MouseMove, MouseDown, MouseUp

DEMO- Drag and Drop

ChartingDojo

Charting

• Different chart types• Animation and effects• Customize• Dojox/charting package• Charts• Plot• Axis• Action2d• Themes

Line | Column | Bar | Pie | Bubbles | more

DEMO- Charting

ChartsEPiServer – custom solution

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

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

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

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 viewType inherit

UIDescriptor<HomePage>

Render default view

Load HomePage in CMS

Chart preview

• Same as previous, but now for ChartData (IContent)

What do you need to build a custom view?

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?

Dojo widget architecture

Rest store Chart widget

Chart preview widget

Chart dashboard

widget

Module.configChart initializer

Code demo- EPiServer Charts

Still work in progress

• Implement chart sources for pages• Create Nuget package

What’s next?

Thanks!www.patrickvankleef.com