Create a thumbnail selector for news (5.4 or older)

In the Create a simple image selector (5.4 or older), we saw how to create a simple image selector. Today, we are going to use it to select thumbnails for news items and display them on a page. There are several controls that we need for the purpose.

Dialogs have a special role in Sitefinity CMS. They are used everywhere in the backend when editing, creating and selecting items. They provide the infrastructure for opening specialized windows and returning results. How you can use all the goodness that dialogs provide for you is a topic for another post. For our specific purpose, you can think of the dialog as a simple control, which is registered in Sitefinity CMS with a specific URL and opens in a RadWindow.

Our dialog is just a wrapper, that contains the simple image selector we built last week. Here's the template:

There's nothing special in the server-side code of our dialog, so I won't include it here. Just remember that you have to inherit from AjaxDialogBase. All the magic of the dialog happens in two methods of the client component:

_doneLinkClicked: function(sender, args) {

varselectedValue = this.get_imageSelector().get_selectedImageUrl();

if(!selectedValue || selectedValue === "") {

alert("No image selected.");

}

else{

dialogBase.close(selectedValue);

}

},

_cancelLinkClicked: function(sender, args) {

dialogBase.close();

},

This is all that we need to do in our dialog - get the URL of the image from the selector, and return it as a result from the dialog. However, we also need to let Sitefinity CMS know about our dialog. This is done by registering the dialog in our Global.asax file:

This is the tricky part, but once you've done it once, it's quite easy. The form through which you edit news items is composed of the so-called field controls. One field control has two main responsibilities - to provide user interface for editing and displaying a single property of a content item. In our case, the content item is a news item, the property is the thumbnail (created as a custom field). Both the TextBox in which you enter the URL, and the thumbnail that you see on the public page are part of the same field control we will create - the former we call Write mode (the user writes the value of the property), the latter Read mode (the value of the property is read and displayed).

Most of the required functionality has already been implemented in a regular text field control. TextField is what lets you edit titles for news items, for example. The different UI in our case is a link that we will display to open the dialog when in write mode (backend), and the image we are going to show when in read mode (frontend). So we inherit TextField, and override what we need to account for the different functionality.

Although the code might look like a lot, most of it is required to hook things up. The most important part that actually does the work is overriding the Value property on the server and on the client:

publicoverrideobjectValue

{

get

{

var val = string.Empty;

switch(this.DisplayMode)

{

caseFieldDisplayMode.Read:

val = this.ImageControl.ImageUrl;

break;

caseFieldDisplayMode.Write:

val = this.TextBoxControl.Text;

break;

}

returnval;

}

...

}

Here's the part on the client that grabs the URL from the dialog and populates the TextBox:

_set_readModeValue: function(value) {

if(value === undefined || value == null) {

this._clearLabel();

}

else{

if(this._imageControl != null) {

jQuery(this._imageControl).attr("src", value);

}

}

},

...

_windowClosed: function(sender, args) {

varimageUrl = args.get_argument();

if(imageUrl && imageUrl !== "") {

this.set_value(imageUrl);

}

},

All the rest is getting references to controls in the template, passing values from the server to the client and opening the dialog itself. You can look at the details in the download.

Up to this point, you've created everything Sitefinity CMS needs to select and persist the value of the thumbnail. Now the only thing left is to let it know where to find your controls together with any metadata you may need to pass. For this purpose, it uses control definitions (they define your field control, so Sitefinity CMS knows how to use it). For our purpose, we don't need anything special, so we just inherit from the base definition for TextField. Once this is done, Sitefinity CMS should be able to find you custom field, display it when you edit news items, and show the selected thumbnail in any news item template.

This is only scratching the surface of how you can extend Sitefinity CMS. Concepts like Field Controls and Control Definitions allow you to go crazy with your ideas and extend the built-in modules to support custom scenarios.