Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Umbraco grid on steroids - uWestFest 2017

1,257 views

Published on

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

Published in: Technology
  • Be the first to comment

The Umbraco grid on steroids - uWestFest 2017

  1. 1. THE UMBRACO GRID ON STEROIDS BY ANDERS BURLA JOHANSEN
  2. 2. PRESENTER • Anders Burla Johansen • CEO of Tea Solutions • Co-creator of Tea Commerce • @andersburla
  3. 3. SET THE EXPECTATIONS • The Grid 101 • Your own Grid Editors • The Grid on Steriods • Lessons learned
  4. 4. WHAT IS THIS GRID THING?
  5. 5. WHAT IS THIS GRID THING?
  6. 6. WHAT IS THIS GRID THING? • Better editor experience • Dynamic layout • Design responsibility & trust
  7. 7. STANDARD GRID EDITORS • What is a grid editor? • 6 editors out of the box
  8. 8. • Mix between hardcoded and dynamic template • Document type specific grid • What the starter kit does MULTIPLE GIRD & ROW LAYOUTS
  9. 9. CREATE YOUR OWN GRID EDITORS • Custom Grid Editor • LeBlender Editor • Doc Type Grid Editor
  10. 10. • Like property editors • package.manifest • editor.html • editor.controller.js • editor.cshtml CUSTOM GRID EDITOR
  11. 11. CUSTOM GRID EDITOR Editor experience
  12. 12. CUSTOM GRID EDITOR Frontend
  13. 13. CUSTOM GRID EDITOR PROS • Amazing editor experience • Need to know AngularJS CONS • Time consuming = more expensive • Need to know AngularJS
  14. 14. LEBLENDER EDITOR • Package by Lecoati • UI for editing Grid Editors • Built using data types • Updates grid.editors.config
  15. 15. LEBLENDER EDITOR Editor experience
  16. 16. LEBLENDER EDITOR Frontend
  17. 17. 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
  18. 18. DOC TYPE GRID EDITOR • Package by Matt & Lee • Just document types • Tabs, data types, description, validation etc.
  19. 19. DOC TYPE GRID EDITOR • Register in grid.editors.config.js • Changed a bit of the default
  20. 20. DOC TYPE GRID EDITOR Editor experience
  21. 21. DOC TYPE GRID EDITOR Frontend
  22. 22. 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
  23. 23. THE GRID ON STEROIDS
  24. 24. GRID SETTINGS & STYLES • Edit row & cell settings • Settings = HTML attributes • Styles = inline styles • 10 prevalue editors • Limit to rows/cells/row names
  25. 25. GRID SETTINGS & STYLES
  26. 26. CUSTOM GRID RENDERING • Uses Bootstrap3 as default • Use other CSS frameworks
  27. 27. NOW LETS USE IT
  28. 28. GRID EDITORS • Used Doc Type Grid Editor • 10 common used components
  29. 29. GRID EDITORS • Image grid editor • Doc Type Grid Editor • Why “replace” Umbraco’s image grid editor?
  30. 30. CUSTOM ROW SETTINGS • Make a better editor experience
  31. 31. CUSTOM ROW SETTINGS • Is a custom property editors
  32. 32. CUSTOMIZED GRID RENDERING • Modified Bootstrap3.cshtml • Dynamic page builder
  33. 33. LIVE DEMO
  34. 34. COPY/PASTE GRID CONTENT • Easy copy/paste grid or row • Multi-lingual with Vorto
  35. 35. LESSONS LEARNED
  36. 36. 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
  37. 37. QUESTIONS? • Anders Burla Johansen • abj@teasolutions.dk • @andersburla

×