Customizing the Sitefinity Content Admin: Part I

One of the biggest challenges with Sitefinity is molding and altering an existing content type to fit the client’s needs. In most cases it would be advised to create a new content entity either through the Sitefinity module builder or a purely custom content solution through code, but sometimes you need to put on the gloves and enhance Sitefinity’s very own content admin screens.

During this blog series I’ll briefly explain the nature of the admin screen and how it works under the hood. Next, I’ll explain a few tips, tricks, dos, and don’ts of the Sitefinity Content Admin to help you corral the process to your liking.

What exactly am I looking at?

When an admin opens a content item, say events, they’re met with that oh-so-familiar content listing found throughout the Sitefinity backend pages. This page is virtually the life-blood of your website’s content and allows you to build and maintain your content items out-of-the-box. At face-value it may not seem all that pragmatic, but under the surface there’s a lot going on and many different options for customization.
Sitefinity Events Content

edit event edit event 2

Each Sitefinity Content Type comes equipped with many fields to help define your News items, Blog Posts, and Events. From titles, descriptions, dates, to images, locations, and contact information; Sitefinity comes very prepared for data hydration. It doesn’t, however, have everything (how could it?). Sometimes you’ve got to add new fields and values to fit your administration needs.

Custom Fields: The Building Blocks of Custom Success

Our journey through transfiguring content types always starts at “Custom Fields for -Content Type-” found on the bottom right of the Content Listing Admin page.

Custom Fields

Depending on the content type, you’ll see quite a lengthy list of default fields and a not-so-lengthy list of Custom fields (not yet anyways). Default fields can’t be edited or deleted, however they can be hidden if it doesn’t add any real value to your content items. Custom fields however boast many options that allow you to personalize at your fancy- without any actual code work.

Default Fields Custom Fields

Clicking the “Add a field” option will bring a pane with several options for adding in your new fields. Here you can be specific to the field Type (Short Text, Images, Dates, etc) and even the interface widget type depending on the selected field type. That is, you can add related images, documents, files and have a Sitefinity selector for it out of the box!

Let’s take a look at adding a related image to blog items:

  1. Add a new “Related Media (images, videos, files)” custom field type
    Related media
  2. Click ‘Done’
    Adding a Custom Field
  3. ‘Save Changes’ and open up a new content item of that type. You did it!

Adding the custom field will add a relational value to the database (for flat items like short text you can even be specific about the column attributes for later use) and will update the appropriate insert/update/view config files in the project.

Related media custom field

This functionality alone can propel your content items towards their maximum potential. But what if I want to directly change the functionality of these fields, add business logic, or simply move them around the admin screen?

We need to go deeper

Manipulating the Sitefinity Content Admin: A Code Odyssey

In order to instantiate a fully customized interface we have to look at the code level. Say the selection of tools in Custom Fields section aren’t quite what we need. For instance: We’d like to instantiate a drop down field fueled by a list of contact lists in events. How would we go about doing that in Visual Studio?

Custom Fields are not easy objects to build in code, generally as developers, we create User controls, or widgets, to convey information directly- whether they’re rotators, forms, etc. Sitefinity, however, uses a unique system to add/edit/delete field information on content items. Because of the nature of the Content Admin we must adhere to using Sitefinity Field Controls and inheriting from them directly. These controls, once associated with a field type, utilize various .cs, .ascx, and .js files to directly manage data with Open Access. It can be very challenging instantiated and ‘hooking’ into this process.

In this tutorial I will show you how we can create our very own custom field and register it with a field value. In part 2 of the series I’ll go over how we can mold it into whatever we want and manage it in the admin add/edit screen.

Step 1: Sitefinity Thunder. Get it.

A general custom field in Sitefinity is comprised of about 6 files, totaling about 500 lines of code. No developer in their right mind would try to justify 500 lines of code for a single text box, but thanks to Sitefinity Thunder, it can be generated in seconds. You can download Sitefinity Thunder here and learn more about the powerful tool here.

Step 2: Generate a New Custom Field

Today we’re not going over the specifics of Thunder, just how it can generate a simple field for us. Once downloaded and installed, go and find a place in your solution where you’d like to add the field. Once spotted, click ‘Add’ – ‘New Item’. In your selections on the right there should be a ‘Sitefinity’ pane with an option for “Sitefinity Field Control”.

Sitefinity Field Control

Once you’ve appropriately named the field, click ‘Add’- a window will pop up asking how you’d like to configure the item- but just continue with the default and click ‘ok’. The 6 files mentioned earlier will now have been generated and ready to go:

Sitefinity Thunder

Step 3: Register!

Out of the box, this is a fully functioning text box. So before we do anything else let’s associate it with a field in Sitefinity! Just like adding any other custom field, we go to the custom fields pane in Sitefinity and add a brand new text field, while associating it with our new custom form field. To do this select “Custom…” and fill in the appropriate namespace and field name in the presented textbox.

Register custom field in Sitefinity New Custom Field

Do not fear! This has been done for us already by Thunder. If you open up the “MyFieldControl1.cs” you will see the name already generated in commented code:

MyFieldControl Code

Save the selection, open up a blank content item and behold! A brand new field has been added that you can manipulate in code however you wish!

New Custom Field

Stay Tuned

Part two of this series Sitefinity Custom Fields 2: Electric Boogaloo, I’ll cover the mechanics of altering and implementing special Custom Field code. As well as how to manipulate the Sitefinity Content Admin even further with the power of C# and Visual Studio.

No Comments

Leave a Comment

Your email address will not be published. Required fields are marked *