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.
It may come as a surprise to many of you that vast majority of Sitefinity user interface (among others, all modules) is actually data driven. Behind the scenes, all the different modules and functionality that you see is driven by a single engine that is modified through the structured data.
On the first through, this may seem as a completely irrelevant technical ego trip, but the implications of this design are far fetching. Namely, since the whole user interface is structured data it ought to be possible to manipulate this data in a programmatic way – and indeed, it is possible.
In this article, I will demonstrate how to change all the text fields of all the modules to display their “example” text as a tooltip, rather as a grayed out text underneath the textbox. So the transition we are looking forward is something like this:
In this blog post, I want just to demonstrate the mechanics of this process. In one of the subsequent posts I will go deeper into the architecture of this engine, so don’t worry if not everything makes sense right now.
In case you are curious how all this will look like once you install everything, you can take a look at the following video. Note that the custom page you’ll see together with the project is available for download from here.
You can take a look at the video here.
You can download the code from here in order to follow the explanations.
Remember that all controls you see in Sitefinity User Interface are so called Field controls and they all inherit from the base class FieldControl. The control whose functionality we wanted to change is called TextFieldControl (used for any kind of text input, except for Html input). Our task was to hide the example text below the textbox and show it inside of the tooltip instead. In order to do this I’ve created a new class and called it TooltipTextField and made it inherit from the TextField class. I’ve also created a new template and called it TooltipTextField.ascx and rewire the new field control to use that template instead. Inside of that template, you’ll notice I’m using RadToolTip (Telerik’s ASP.NET Ajax control that comes for free with Sitefinity 4.0 among with 100 other controls). I’ve also used some CSS to hide the label that was showing the example beneath the textbox.
Finally, I’ve overridden the ConstructControl() method, in order to set the Text property of the RadToolTip to the Example property of the TextField control. In addition to this, I also hide the question mark image if there if the Example property is not defined.
By doing this, I have created a new, modified, version of the TextField control. The next step is to use Sitefinity’s definition API to change all the instances of TextField control with the TooltipTextField control. The logic for this is done in the static class DefinitionManager.
The DefinitionManager class is doing a bit more actually. It provides you with a method to replace any kind of existing with any kind of new field for the specified module. You will notice there how I am traversing the hierarchy of the definitions engine to find the fields that I want to replace and finally replace them. I’ll go more in details on this in one of the subsequent posts.
Finally, there is the ChangeFields.aspx page that I’ve put in my website. This is just a sample of how to use the DefinitionManager class. You can examine it and modify as you see fit.
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.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share 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.