6 YEARS AGO

Kentico 12 MVC widgets in action

Yesterday, at the Kentico Benelux User Group, I showcased the new Kentico MVC widgets feature that will be released with Kentico v12 at the end of this year. I also demonstrated my custom built Kentico Cloud Asset widget and how easy it is to build your own widgets.

Kentico 12 (a.k.a. the raptor) will provide widget support for MVC. Via the so called "visual page builder" content editors and marketers will be able to place widgets within predefined zones in the layout of the page.

Compared to Kentico's portal engine, MVC widget development is different. The biggest difference is that MVC widgets are developed within the MVC application only. The widgets will then be automatically picked up in the page builder when you are working in the CMS. A MVC widget typically consists out of the following parts:
  • Partial view that contains the presentation logic and optionally one or more in-line editors to update the widgets content directly on the page. 
  • Model with the widget and in-line editor properties.
  • Controller to return the Widget's content.
  • Javascript that subscribes and fires the update property event. This will ensure that the changes in the in-line editor will be saved.
To illustrate this, take a look at that Kentico Cloud Asset widget architecture that I created:

Kentico MVC widget architecture

This code results in a MVC widget that you can use to select an asset from Kentico Cloud. The idea of the Kentico Cloud Asset widget originated from the following architecture:

Kentico Cloud content repository

The image shows Kentico Cloud as the central content repository which provides content to multiple Kentico (EMS) websites. I came up with the idea of the Kentico Cloud Asset widget to (potentially) solve some issues that we are facing with Kentico's media library.

You can find the code and instructions on GitHub: https://github.com/TrueLimeNL/TrueLime.Kentico.KenticoCloudAssetWidget.

Feel free to contribute!

The slides of my talk can be found below: