Umbraco 7.2 grid updates

Thursday, June 26, 2014 by Per Ploug

Since the alpha of 7.2 was shown off in the Codegarden keynote, we've been hard at work, to include a visual configuration of the grid editor. If you havn't seen the new grid UI before, I highly recommend you watch the Codegarden keynote available here - grid demo starts around 35mins in. 

Configuration UI

See the configuration UI on action in this video: 


The configuration UI gives you the ability to manage the overall template of the grid, so you can specify how many sections this grid should have.

For each section you can specify which "layouts" the editor is allowed to insert. A layout is basically a row of cells, and each cell then have a number of editors allowed on them.

Layouts are configured once, and then assigned to the different grid sections. So they can be shared on multiple grids / sections. This gives better re-use and a consistent UI for editors. 

The grid structure

Confused about the grid editor and what it contains? - there are a lot of parts to it, but lets go through them all:

  1. The grid has a template
  2. The template has 1 or more sections
  3. Each section has a collection of allowed layouts 
  4. A layout is a row of one or more areas
  5. A layout area has a list of allowed editors
  6. An editor is the component you use to enter data, like a rich text editor, a headline, or picking media.

Clear as mud, right? - anyways, even though there are many small parts, most usage of the grid should be fairly easy since it comes with its new configuration UI and helper methods for templating. 

Breaking changes

However, as we went through the structure of the grid, we also changed a number of variable and collection names in the json-blob stored by the grid editor, so for those who have been playing around with the alpha, will not be able to upgrade to the beta when it's released without loosing grid data and configuration.

So bottomline: we've added a grid configuration UI and changed the data format, so if you upgrade from alpha to beta, expect to loose your grid content+config, it should however reset the grid gracefully.

17 comment(s) for “Umbraco 7.2 grid updates”

  1. Gravatar ImageEd Says:

    So all the data is stored in one Blob? No changes in the IPublishedContent??

  2. Gravatar ImagePer Ploug Says:

    All configuration is stored in configuration blob by itself, all the grid data goes into one property value, so it is not seperate nodes or any special IPublishedContent property - all data stored as json is retrieved as a c# dynamic object in razor.

  3. Gravatar ImageSøren Reinke Says:

    Hi Per

    Is the beta version with the new features ?

    I know it is very hard to predict the feature, but have you any idea if there will be more content breaking changes ?

  4. Gravatar ImageAsbjørn Says:

    That looks great! That json file was just a little intimidating ;)
    Umbraco just keeps getting better all the time :)

    By the way, that Variations feature that was shown off (for multilanguage) scenarios - is that coming in 7.2 as well or a later version?

  5. Gravatar ImageNiels Hartvig Says:

    @Asbjørn: The variations/segmentation is far future (and also shown an hour later in the keynote under a future ideas section - I'm sorry if that was clear).

  6. Gravatar ImageAsbjørn Says:

    @Niels: No problem :) There are plenty of goodies in 7.2 in the meantime.

  7. Gravatar Imagekeilo Says:

    @Per and @Niels, there seem to be a mystery on the way the Macros inserted via tinymce within the Grid. Sometimes the macros do render and sometimes they simply show the Macro:macroname (as they appear on the rte).
    Is this a known bug? And also what would be the best place to keep track of the development and bugs for this new amazing Grid data type?

  8. Gravatar ImageSøren Reinke Says:

    Hi Per

    Could you please make it so, that it is possible to make Layout columns with an odd column count.

    So it is possible to do a 3/6/3 layout.

  9. Gravatar ImageSøren Reinke Says:

    Hi Per and Niels

    I think there is a bug in the backend showing of the content of the grid.

    If i make a layout with an 8/4 column combo, only data entered in the 8 column is shown in the backend.
    The data entered in both column can be seen in the database.

    Also Chrome is complaying about a missing /umbraco/ace/ace.js file when loading the backend.

    If you need more information, feel free to contact me.

  10. Gravatar ImageMike Says:

    Looks nice.

    Tips for the presenter: get a quality microphone and edit out the noise, speak clearly (don't trail off in your sentence, often I cannot understand the 2nd part of your sentences), move slowly when switching from one section to the other (it made me lose track a couple of times) and don't move the mouse to and from when pointing out an element, just rest the mouse on the element eand then explain what it is/does etc.

    Thank you!

  11. Gravatar ImageSøren Reinke Says:

    The bug i found has been fixed in :-)

  12. Gravatar ImageDavid Conlisk Says:

    Looks great! I've been playing with the alpha version which is pretty good, but the UI improvements will make it a lot easier. Keep up the good work!

  13. Gravatar ImageDavid Conlisk Says:

    Actually, if you go direct to youtube the picture and sound are much better quality:

  14. Gravatar ImageGert Says:

    Seems like a mouse with ADHD ;-). Great work! Thanks

  15. Gravatar Imagemarco teodoro Says:

    i can't find this datatype on umbraco 7.2.0 beta version. Do i need to install it from other repository?

  16. Gravatar ImageSebastiaan Janssen Says:

    @marco Developer Section > DataTypes > Add > Choose Grid from the dropdown.

  17. Gravatar ImageMikael Syska Says:

    Totally agree with Mike's comment.

    Don't move the mouse _ALL_ the time ... really makes me loose focus.

    Other than that ... looks great.

Leave a comment