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.

1. Avoid Headaches by Removing Clutter

Clutter blog post image

Having visual clutter on your website means that effective design hierarchy was either never planned for, or was lost at some point as your site evolved. It also means visitors have to weed their way through it to get what they want.

The biggest problem I see here is website owners that feel the need to have every piece of content, every widget, every feature and a picture of their grandma always in view, and large…everything large. You can avoid cluttering your site by following these simple tips:

  • Use tasteful text treatments. Don’t make things large, bold, italic, and underlined if simply large would communicate the message effectively.
  • Design a size hierarchy for images, videos, and other graphics. By order of relevance coupled with importance you can give the sizes to elements. Doing this will help eye flow down and across the page by helping users quickly scan the content. Prevent yourself from giving everything or even nearly everything the same importance level.
  • Use margins, spacing, borders and floats to create whitespace between elements.
  • Use a grid system. Implement a strict grid system for visual consistency across all pages and template, if for no other reason. Not to mention the immense development benefits from doing so.

2. Avoid Confusing Navigation

Better navigation blog post image

Typically when users first arrive on a website they start on a page other than your home page. With that being said, they are going to need well thought out navigation. Including all types of navigation from primary, secondary, tertiary, and even footer navigation. Check out these tips for navigation:

  • Use consistent placement of all your navigation elements. There’s nothing more confusing to a user than navigating to a new page and the menu is in a different location.
  • Provide secondary menus to help users see other accessible content on the site easily. Secondary navigation should have a prominent location on the page.
  • Make sure you don’t have any broken navigational links on your site. Users get very confused when a link is broken or goes somewhere they aren’t expecting.

3. Allow Your Content to Breathe

Breathe blog post image

Create breathing room for elements by spacing things out. Doing so makes it easy for the eye to focus attention to each thing, one at a time. It also allows the eye to more easily understand the page layout and absorb the features. The main benefits to using adequate whitespace include:

  • Adding emotion to the design aesthetic. Whitespace doesn’t need to be white, and may be better stated as negative space, which can be any color, and color represents and evokes emotion.
  • Making the layout have less stress on the eyes, especially when dealing with pages with heavy and dense content.
  • Helping visitors interact with the various elements and features on your site. When the user can easily see the features and access the attention grabbers of your site, they will be more likely to interact with them and use them.

4. Use Great Photos and Graphics

Graphics blog post image

Impressions are everything online and pictures and graphics can make unyielding and lasting impressions for your website users. They are powerful because they can portray a feeling or mood, strengthen your corporate identity, and communicate a message. You should use this power wisely and with good taste. These elements often cover many pixels on your site so you want them to be effective. I suggest investing in professional photography, of which you have many options; there are lots of great stock photography websites out there. If you aren’t familiar with stock photography, here’s a list of a few resources:

5. Pay Attention to Legibility

Legibility blog post image

Your text should be readable by all users, even those with disabilities that use screen readers or something like it. So what font-family is used, and what size it gets shown at are important decisions that need to be made. At the very least you should make it easy on the eyes by formatting your content with proper headlines, subheads, quotes, captions, paragraphs, lists etc. Your visitors are consuming content fast and in a hurry, so you want to make text readable and hierarchical.

Choose a font face that looks crisp and legible, don’t force people to strain while reading your content just because you like the way a particular font looks. There are plenty of great fonts in various styles that will fit the bill. Oh, and choose a universal font that looks great on mobile devices and desktop monitors.

6. Make it Responsive

Responsive blog post image

If you haven’t already invested in a responsive site, you should do it so users are free to access your site on any sized device. Many designs look great at small sizes, but when they get sized up to widescreen monitors they don’t take advantage of the extra spaces. And vice versa, your site should look just as great on mobile devices as it does on desktop monitors. Mobile web users are growing in numbers faster than Garfield finds pizza, so make sure you are serving up your content in a manner that can be easily accessed and consumed.