The Umbraco grid on steroids - uWestFest 2017
•Download as PPTX, PDF•
3 likes•2,114 views
Ever wanted to do more than just the default Grid in Umbraco? Learn how the Umbraco Grid can be extended to do more than what is just available out of the box. You will see how to create new grid items from scratch, use other packages to easily create grid items, how you can customize Umbraco’s rendering of the Grid. And most importantly – when NOT to use the Grid - yes there are cases
Report
Share
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
Editor's Notes
- Danish web-agency Specialised in Umbraco websites, e-commerce and online marketing Help other Umbraco companies – development + online marketing
- Use for dynamic layout = editor has huge responsibility When it make sense: Could be news, case, product etc. Keep it simple!