How To Create Grid Layout Components Using Document Types

In this tutorial, you will learn how to use the Grid layout with document types.  This approach will allow you to test your code more thoroughly, it will help to make deploying your code simpler and it will give you a more consistent architecture, as you'll be creating all your pages and components in the same way.  If you want to level-up your Umbraco skills, then read on.

Introducing Doc Type Grid Editor

Out of the box, Umbraco surprisingly doesn't provide any way for you to use the document types you create with the new grid editor.  Instead of having to write lots of code ourselves, there is an excellent open source package that can be installed within your project that will allow this... the doc type grid editor.  

The doctype editor does exactly as the name implies.  With a little bit of configuration, you can use document types to create components you can use within the grid editor.  Like a page, each document type will define the properties of components.  Once everything has been built, you can then combine this with the Umbraco model builder so you can use strongly typed objects within your views. 

Getting Started With Doc Type Grid Editor

This article assumes that you understand how the grid layout property works but if you need a refresher, read this first.  In this example, let's assume you have document type created for a page and on that page, you have added a grid layout property. 

 

 

In this tutorial, I'm going to create a simple text editor component, which will look like this:

First, we need to install the package, this can be done via Nuget.  To install the package, you can run this install snippet in your Nuget console (for reference you can find more information about the package here):

Install-Package Our.Umbraco.DocTypeGridEditor

After the package has installed, you will need to do this update. Your grid.editors.config.js within your config folder.  In my example, I'm going to create a container that will contain all the components that I want content editors to use on the main content section on my pages, called mainContentArea. This is the only thing I want content editors to select from, I'll delete everything from grid.editors.config.js.  You will obviously be configuring this file based on your requirements and components, but, hopefully, this will make this tutorial easy to understand.:

[
    {
        "name": "MainContent",
        "alias": "MainContentArea",
        "view": "/App_Plugins/DocTypeGridEditor/Views/doctypegrideditor.html",
        "render": "/App_Plugins/DocTypeGridEditor/Render/DocTypeGridEditor.cshtml",
        "icon": "icon-item-arrangement",
        "config": {
            "allowedDocTypes": ["RichTextBlock"],
            "nameTemplate": "",
            "enablePreview": true,
            "viewPath": "/Views/Partials/Grid/Editors/DocTypeGridEditor/",
            "previewViewPath": "/Views/Partials/Grid/Editors/DocTypeGridEditor/Previews/",
            "previewCssFilePath": "",
            "previewJsFilePath": ""
        }
    }
]

To quickly recap the config above.  In your editor definitions, you can create as many editors as you want.  When you define a doctype editor, the allowed document types that can be used within it is set in the allowedDocTypes array.  To allow more that one type in your doc grid editor, you add more items in the 'allowedDocTypes' section.  In the example above you can see that in this editor the only doc-type allowed is RichTextBlock.

TIP: I tend to create a doc type editor for each different container of components I need on my website.  I may create a doc type editor definition for my homepage, which will only have the components I want content editors to use on the home page.  If the website has a sidebar, I would create a sidebar configuration.  For generic pages, I create a main container for all the components I want content editors to be able to drop onto a page (as in the example above)

With everything set-up and configured, create a new page within the Umbraco backend:



Pick a layout, on my page, I've defined three, fullwidth, half and third.  I'm going to use fullwidth:

Click 'Add Content' as normal.

Pick the doc type editor we defined within the config above.  In my example, mine was called MainContent

As I only have one component defined in my config, the 'Rich Text Block' when you select 'Add Content' the rich text block should instantly load in the right-hand panel.  If you have more than one allowed component you will have a list of select forms.  As you can see, the properties available for content editors to use have all been defined within my document type.

That's it.  Although this is a very simple tutorial, you should see the power it provides.  In the next tutorial, I will go over how you can create a strongly typed view.  Enjoy!

 

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top