The Umbraco grid on steroids - uWestFest 2017
- 1. THE UMBRACO GRID ON STEROIDS BY ANDERS BURLA JOHANSEN
- 3. PRESENTER • Anders Burla Johansen • CEO of Tea Solutions • Co-creator of Tea Commerce • @andersburla
- 4. SET THE EXPECTATIONS • The Grid 101 • Your own Grid Editors • The Grid on Steriods • Lessons learned
- 5. WHAT IS THIS GRID THING?
- 6. WHAT IS THIS GRID THING?
- 7. WHAT IS THIS GRID THING? • Better editor experience • Dynamic layout • Design responsibility & trust
- 8. STANDARD GRID EDITORS • What is a grid editor? • 6 editors out of the box
- 9. • Mix between hardcoded and dynamic template • Document type specific grid • What the starter kit does MULTIPLE GIRD & ROW LAYOUTS
- 10. CREATE YOUR OWN GRID EDITORS • Custom Grid Editor • LeBlender Editor • Doc Type Grid Editor
- 11. • Like property editors • package.manifest • editor.html • editor.controller.js • editor.cshtml CUSTOM GRID EDITOR
- 14. CUSTOM GRID EDITOR PROS • Amazing editor experience • Need to know AngularJS CONS • Time consuming = more expensive • Need to know AngularJS
- 15. LEBLENDER EDITOR • Package by Lecoati • UI for editing Grid Editors • Built using data types • Updates grid.editors.config
- 18. LEBLENDER EDITOR PROS • UI for creating Grid Editors • Works with most data types • Easy to have/make editor preview mode CONS • Doesn’t work with NestedContent • Model is LeBlenderModel • Editor UI is limited to right-hand side • No data validation
- 19. DOC TYPE GRID EDITOR • Package by Matt & Lee • Just document types • Tabs, data types, description, validation etc.
- 20. DOC TYPE GRID EDITOR • Register in grid.editors.config.js • Changed a bit of the default
- 21. DOC TYPE GRID EDITOR Editor experience
- 23. DOC TYPE GRID EDITOR PROS • Just Umbraco document types • Model is IPublishedContent • Umbraco 7 UI • Easy to make editor preview mode CONS • Editor UI is limited to right-hand side • Manual change grid.editors.config.js
- 25. GRID SETTINGS & STYLES • Edit row & cell settings • Settings = HTML attributes • Styles = inline styles • 10 prevalue editors • Limit to rows/cells/row names
- 27. CUSTOM GRID RENDERING • Uses Bootstrap3 as default • Use other CSS frameworks
- 28. NOW LETS USE IT
- 29. GRID EDITORS • Used Doc Type Grid Editor • 10 common used components
- 30. GRID EDITORS • Image grid editor • Doc Type Grid Editor • Why “replace” Umbraco’s image grid editor?
- 31. CUSTOM ROW SETTINGS • Make a better editor experience
- 32. CUSTOM ROW SETTINGS • Is a custom property editors
- 33. CUSTOMIZED GRID RENDERING • Modified Bootstrap3.cshtml • Dynamic page builder
- 34. LIVE DEMO
- 35. COPY/PASTE GRID CONTENT • Easy copy/paste grid or row • Multi-lingual with Vorto
- 36. LESSONS LEARNED
- 37. LESSONS LEARNED • Use the grid when it make sense • Keep it simple! • Doc Type Grid Editor is easy and versatile • Use row/cell settings – not styles • Multiple grid and row layouts is time consuming • 3 different content ways • Hardcode • Ribbons – Nested Content • Grid page – 1 grid layout, row config for columns
- 38. QUESTIONS? • Anders Burla Johansen • abj@teasolutions.dk • @andersburla