Tag Archives: Backoffice extension

KendoUI Grid, OData, WebAPI and Entity Framework

In the latest project I was involved with, there was a need to present database tables data directly in the Umbraco’s backoffice, where all CRUD operations must be supported. This tables could be something like 1000 to 1 million rows and both the website and database would be hosted in Azure, in a WebApp and SQL Database respectively. Users should be able to create complex filters and order the data as they wish as well as update the data individually and in batch.

From the get-go there were some challenges we needed to overcome in order to create an usable system, that was user-friendly, fast, reliable, and where no conflitcts would come up when data was being updated from multiple users.

The solution was a new Umbraco Package we called Search Manager (since the database tables ultimately feed an Azure Search index) that uses Telerik’s Kendo UI Grid, WebAPI and Entity Framework. The following presents the process it took to reach the end result.

Continue reading

Automatic generation of Umbraco packages with Grunt

Manually creating Umbraco packages can be tiresome.

If you’re continuously building upon the same package, doing it manually is wasting time that can be more useful developing new features.

This problem presented itself to me when improving Approve It. In order to create the Umbraco package I need several things:

  • The main assembly
  • The new dashboard section html file
  • The App_Plugins folder which contains every angular controller and views, javascript frameworks and custom css
  • The Package Actions Contrib assembly and its respective actions that enable me to bundle some translations in the package

I decided to go with Grunt and the Grunt Umbraco Package task. A grunt file is a script that typically automates the process of executing some tasks. These scripts can be executed on top of NPM, a package manager for javscript that provides a command line tool to run its packages. To streamline even more the package creation, I installed a Visual Studio extension called NPM Scripts Task Runner, that detects the grunt file and provides a simples UI to handle its tasks.

Continue reading

Building an Umbraco 7 backoffice extension – Part III

The previous post (Part II) showed how to populate the content tree of a custom Umbraco backoffice section. This one presents a way for content managers to quickly handle each post pending approval, which means we’re going to create our own AngularJS controller and view.

AngularJS is a MVC javascript framework mainly mantained by Google which primary goal is to aid in the development of single-page applications. It’s use on the Umbraco backoffice was the most notable change when Umbraco 7 was first released.

When the content manager selects one node pending approval we want him to be able to take three quick actions:

  • get some information about that node;
  • quickly access it in the content section;
  • quickly publish it.

Continue reading

Building an Umbraco 7 backoffice extension – Part II

The previous post (Building an Umbraco 7 backoffice extension – Part I), demonstrated how easy it is to create a new section in Umbraco’s backoffice. This post will show how we can populate this new section with meaningful content coming directly from the backoffice.

To begin with, we must reference a few more assemblies (also available at the Umbraco’s installation bin directory):

  • umbraco.dll
  • cms.dll
  • Umbraco.Core.dll
  • System.Web.Http
  • System.Net.Http.Formatting

Then we can populate our section with a tree containing content awaiting approval. To accomplish this we must extend an Umbraco class named TreeController and decorate it with information about our Approve It plugin:

Continue reading

Building an Umbraco 7 backoffice extension – Part I

Umbraco is a lean and powerful  CMS built on top of current .NET technologies and Javascript frameworks. It provides developers with a varied and simple to use collection of APIs, it is easy to customize and doesn’t get in the way between the coded markup and the HTML that is actually rendered.

The next series of posts will show how to build plugins that extend the default Umbraco backoffice capabilities.

Continue reading