The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
UPDATE 2: Improvements and extensions to this thumbnail selector are included in a newer blog post.
UPDATE: In the comments to this blog post, some people reported issues with running the sample in Sitefinity 4.1. Those issues have been fixed. The download links in the post have been updated and point to the new version of the sample containing the fixes. If someone is still running versions of Sitefinity before 4.1, you can download the initial version from here. The installation instructions have also been updated with the correct file names.
In my previous blog post I showed you how you can 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, but before we discuss the implementation, you can take a look at the result we are aiming for in this video.
You can download the source code for this example from here. Here is a list of what we will need to implement to cover the scenario shown in the above video:
Note: All controls that we build in this blog post have a corresponding client component. More information about how to build client components can be found on MSDN.
Dialogs have a special role in Sitefinity. 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 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:
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 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:
Here's the part on the client that grabs the URL from the dialog and populates the TextBox:
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 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 knows how to use it). Ivan Osmak described the concept in this blog post. For our purpose, we don't need anything special, so we just inherit from the base definition for TextField. Once this is done, Sitefinity 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. 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. Expect more thorough examination of those topics in the coming weeks. Meanwhile, we'd love to hear your feedback in the forums.
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You have the right to request deletion of your Personal Information at any time.
You can also ask us not to pass your Personal Information to third parties here: Do Not Sell My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More