Deliver superior customer experiences with an AI-driven platform for creating and deploying cognitive chatbots
Deliver Awesome UI with the most complete toolboxes for .NET, Web and Mobile development
Automate UI, load and performance testing for web, desktop and mobile
A complete cloud platform for an app or your entire digital business
Detect and predict anomalies by automating machine learning to achieve higher asset uptime and maximized yield
Automate decision processes with a no-code business rules engine
Optimize data integration with high-performance connectivity
Connect to any cloud or on-premises data source using a standard interface
Build engaging multi-channel web and digital experiences with intuitive web content management
Personalize and optimize the customer experience across digital touchpoints
Build, protect and deploy apps across any platform and mobile device
Rapidly develop, manage and deploy business apps, delivered as SaaS in the cloud
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.
Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.