Make your Umbraco Grid Layout smarter with LeBlender 1.0.0

Make your Umbraco Grid Layout smarter with LeBlender 1.0.0

What is LeBlender and what does it intend to be?

LeBlender is an open source Umbraco backoffice extension which made the Grid Canvas Editors management easier and flexible.

We can create, order, update, remove and extend Grid editors on the fly, through a very simple and nice user interface.

LeBlender project brings two main features:

LeBlender editors manager

This part of the project is a user interface tool for managing the grid editor settings.

Basically, it's a simple UI to edit the grid config file grid.editors.config.js. Through it, we can manage our Umbraco project's set of grid editors without manually writing any line of JSON code. 

In addition, in this new version, we made it possible to extend it with your own grid editor in a very easy way, see more information in the next section.

1.png

 

LeBlender editor

When we start a new project with the Umbraco Grid Layout, 5 different editors are available by default: RTEimagemacroembed and textstring.

We have added a new one: LeBlender Editor

This new grid editor allow us to create complex data structures for our Grid in just a few clicks without any line of code.
It is a perfect solution for sliders, carousels, tabs, highlighted content and so much more...

Its main features are:

  • 100% configurable by UI
  • Optional preview within the grid backend property editor
  • Simple set of properties or list of them
  • Any datatype can be used as LeBlenderEditor properties
  • LeBlenderEditor can be cached
  • Custom controllers can be used

 

In Action


Which new features does LeBlender 1.0.0 bring?

LeBender Editor manager as a tree

In the previous version, LeBlender Editor manager was a property editor. We decided to move it into a tree architecture, mainly to follow and respect the Umbraco standard and make the Grid Editor management more understandable and simple.

Now we can manage our Grid Editors in the same way as we are managing datatypes or any other Umbraco components.

See discussion about this topic: https://twitter.com/aaantoinee/status/586898164260700160

LeBlender editor caching

Now, the LeBlender Editors can be cached. Within the advanced LeBlender Editor's settings, we added a new field to specify the editor cache duration in seconds by page:

3.png (2)

The LeBlender Editor cache is refreshed every time the content is published, so your changes are rendered immediately.

Custom controller

Because our grid editors sometimes need some logic and it is always better to isolate it within controllers, we added the option to create custom controllers for the LeBlender Editors.

To do it, we just need to create a standard MVC controller that inherits from LeBlenderController with the same name as our LeBlender Editor.

In the following example, the editor is called LastTweets:

 public class LastTweetsController : LeBlenderController
{
public ActionResult Index(LeBlenderModel model)
{
// Do your stuff here
// ...
return View(model);
}
}

In this case, we are routing the action to the default Index method, but we have also allowed routing to different actions based on the partial view name that is being rendered.
In the following example, the partial view is called DisplayLastTweets:

public class LastTweetsController : LeBlenderController
{
public ActionResult DisplayLastTweets(LeBlenderModel model)
{
...

The controller receives a LeBlenderModel object and can return any custom model to the partial view.

Extend LeBlender editor manager 

Hopefully, a lot of new grid editors are going to be born in the next days and months from the Umbraco community. This way, we made LeBlender editor manager super easy to extend with your own editors or others from the community.

It can be done the same way as we declare a property editor for Datatype into a package.manifest, we just have to specify that the property editor is a Grid Ediror "isGridEditor": true.

In addition, we can use prevalues to define the needed fields for our editor configuration.

Let's see for instance the textstring editor configuration:

{ 
"propertyEditors": [
{
"name": "Textstring",
"alias": "textstring",
"isGridEditor": true,
"editor": { "view": "textstring" },
"prevalues": {
"fields": [
{
"label": "Style",
"key": "style",
"description": "inline style",
"view": "textstring"
},
{
"label": "Markup",
"key": "markup",
"description": "markup of the input",
"view": "textstring"
}
]}
}]
}

In this case, two prevalues are needed for this editor: Styles and Markup

2.png (1)

Upgrading

We have tried to make LeBlender 1.0.0 compatible with previous versions.

Nevertheless there are some breaking changes regarding the LeBlender editor. The most relevant is that the default LeBlender model name has changed. On the previous version it was called BlenderModel, it has been changed for LeBlenderModel.

Follow those steps to upgrade your project.

  1. Remove LeBlender Datatype
  2. Uninstall previous version (delete "/App_plugin/Lecoati.LeBlender/" folder and "/bin/Lecoati.leblender.Extension.dll")
  3. Install LeBlender 1.0.0
  4. Change your BlenderModel references to LeBlenderModel
  5. Save and publish the content which uses the LeBlender editor

Let us know if you have any issue

What is next?

We are very proud of what we have achieved with LeBlender. We really hope that it will be as useful for the community as it is for us. We are expecting a lot a feedback, comments and new feature requests from the community.

References

 

About us

We are based in Barcelona and specialize in medium and large Umbraco projects. We offer our experience, method and commitment to achieve the success of every project. We have been an official Umbraco partner since 2011.

All Categories