In Sitefinity 3.7, our team developed their own menu adapter to strip all of this junk out. Well – we’ve done the same thing for Sitefinity 4. This control is great – and allows for a significant amount of customization. We use it in every site we build without needing any additional customization.

Go check it out!

Next week we will be spending some time to build them into multiple DLLs for each Sitefinity version – so you don’t have to replace the Telerik.Sitefinity libraries to run it for your specific version.

Those of you that are passionate about Sitefinity (or Telerik all-together) probably noticed that Sitefinity 4 was released without an Events Calendar. The suggested solution was to build a custom calendar using RadScheduler (a Telerik product). But this required additional programming. You had to programmatically integrate the calendar with the Sitefinity Events Module so that it actually pulled in events. And if you wanted the events to be clickable – you needed to do even more work. To my astonishment, Sitefinity 4 progressed to 4.2 without anyone having developed a Calendar widget. About a month ago, I took the initiative and started the project myself. Today, I’d like to present the first Sitefinity 4 Calendar Widget.

The widget supports iCalendar links for each event (opens in Outlook, Gmail, iCal, and other mail clients). You can also link to an event detail page – just like you could in the 3.7 Events Calendar. The great thing about my calendar is that is built entirely on jQuery and WCF Services. No postbacks and no pesky AJAX framework. Clean, simple, and effective.

A huge thanks goes out to Adam Shaw for his development of FullCalendar. Without his hard work, this project would have not been possible.

Are you missing this button too? If you have a similar situation, the maybe you even see something like this (below) in place of the Use for Development button:

This message gave me a headache. I Googled, ran all available software updates, ran all of the Xcode updates, and still had no luck. However, great workaround to add this device to your provisioning profile:

1. Open Xcode Organizer (have your device plugged in)
2. Right click your device in the Organizer
3. Click on “Add Device to Provisioning Profile”
4. Type in your developer login
5. There you have it – your device should be good for testing now

For those visual learners, here’s a screenshot:

Unfortunately, I never did get the button back… Oh well – who needs it?

1. Open your project in Visual Studio
2. File > Add Existing Project > Select the HtmlField project (for example)
3. Right click on the Refrences folder of your project
4. Click on the “Projects” tab and select HtmlEditor
5. Save and Build
6. Register the control in your toolbox (CLR type is HtmlEditor.HtmlEditor)

HtmlField HtmlEditor.zip (16.4 MB)

In my past 3.7.x projects, I found myself using the RadEditor in my controls quite often. This HtmlField editor can be customized to include other tools, but this example includes basic formatting options, image insertion, links, and an HTML editor view.

To get a better understanding of what this control does, take a look at the JavaScript file in Resources/JavaScript. The refreshUI and applyChanges functions take care of handling the data in our control. If data has already been saved in the control, refreshUI pulls in that HTML content and reassigns it to the editor so you can continue editing it. applyChanges takes the HTML content from the editor and saves it into the Html string property of our control (Ln 35 of HtmlEditor.cs). In our control, we then assign it to our Literal control within the control template (Resources/Templates/HtmlEditor.ascx).

PageField PageSelector.zip (16.4 MB)

This new field is really rather remarkable. You click on the “Select Page” button and it immediately pops up with an interface for searching (completely AJAXed) and selecting a page from the sitemap. Controls like this one prove that Telerik put in some serious man hours into making Sitefinity 4 developer-friendly.

Again, pull open the JavaScript file in Resources/JavaScript to see what’s going on. It returns a Guid reference to a page. In our control (Ln 25 of PageSelector.cs) we use this Guid and the Fluent API to create a HyperLink from the selected page. Open up PageSelector.cs and take a look at the InitializeControls method. This assigns a couple of required properties of our PageField: WebServiceUrl and RootNodeID. We assign our WebServiceUrl specifically to the Page service to get a list of all pages. Our RootNodeID is being assigned to the default top-level node to pull in all of the child pages.

ImageSelector ImageSelector.zip (16.4 MB)

This control is a bit different – it actually uses ImageSelectorDesignerView. We are no longer using one of the controls from Telerik.Sitefinity.Web.UI.Fields. There is, however, a ImageField control that you can use from that namespace (allows uploading). This control just allows users to select images directly from an album.

Open up the JavaScript for the control. One thing to take note of here: applyChanges calls the applyChanges method of the parent designer (saves us some code). The parent designer is set within the initialize function. But what does this do? Open up ImageSelector.cs – ImageId holds a Guid reference to the page and we use that in our Fluent API code to search for the image and add it to our control. Thank you Telerik for making it easy to implement selectors in our own controls.

Multi View Designers MultiView.zip (17.3 MB)

This is slick. Sitefinity makes it easy to create tabbed/multi-view control designers to keep your controls clean and organized. I’ve tried to organize my project folders so that you can easily picture how everything links together. With multi-view designers, you still need a base designer and designer template. With those, are your designer views and their templates. Let’s take a look. Open up MultiViewDesigner.cs (Ln 20) and note the AddViews method. This method is magical – it automatically creates all of the JavaScript for tabbed content and wires the views to the designer. Let’s take a look at one of the views.

For each view, you need JavaScript, a Template, and a Code-Behind. Open up Views/View1.cs. Our ViewTitle is the text is displayed in the tab for this view. In GetScriptReferences and LayoutTemplateName we wire up our JavaScript and template for this view. If you open up the JavaScript for this view, you will notice that it is treated as if View1 were its a completely separate designer. We use _parentDesigner to reference the parent designer for the views and assign the Title property (string) of our control.

Well, that’s all I have. If you have problems implementing these controls in your project, please let me know in the comments. The majority of problems I’ve noticed were related to dll/reference versions. Download all of the project files here: AllProjects_Fields.zip (66.5 MB)

<input type="checkbox" name="mycheck" />

This will render a checkbox on on the IOS device using Phonegap. If I click touch that checkbox with my finger, there is a delay before the checkbox is actually checked. This delay breaks the illusion of it being a real native app (using native controls). Thankfully, some smart fellows found an event we can use to make the app more responsive to touch: touchstart.

touchstart is an event that is raised the instance your finger hits the screen. By default, checkboxes listen for the click event. All we have to do is remove the default click functionality and put it into the touchstart event. See the example below (I’m using jQuery mobile):

$('input[type="checkbox"]').click(function(e) {
	e.preventDefault(); // or return false;
});

$('input[type="checkbox"]').bind('touchstart', function(e) {
	if($(this).attr('checked') == false){
		$(this).attr('checked', true);
	} else {
		$(this).attr('checked', false);
	}
	// code above toggles the checked attribute

	$(this).change();
	// This manually throws the "change" event for the checkbox. Because we disabled the click event, the change event would not be raised.
});

This disables the default click event and forces it to rely on the touchstart event for checking/unchecking the checkbox. Obviously a significant amount of code for solving a pretty basic problem – hopefully someone will come up with a cleaner solution. Please leave me a comment if you already know of one…

After a lot of digging, question-asking, and programming, I’ve been able to get a pretty good grasp on how controls are structured and where to find the methods I need. To begin, if you are going to building your own custom controls, here are two things I would suggest:

1. Brush up on the Microsoft AJAX Framework. You will need to understand it for implementing Control Designers.
2. Purchase and Download .NET Reflector. Since there is a lack of documentation, you will need to be able to view the compiled code in the Telerik libraries. For controls like PageField, HtmlField, and FileField, this will come in handy.

As an example, let’s assume you want to implement a Page Selector in Sitefinity 4. In Sitefinity 3.x, this was simple – you could simply use a WebEditor. Not so easy in Sitefinity 4. To create one, you will need to use a new Sitefinity 4 control called a PageField (Telerik.Sitefinity.Web.UI.Fields). You need to create a custom control, control designer, and a JavaScript file that handles all of the data transactions between your designer and your control data.

For the most part, creating the control and control designer is basic (start with this tutorial). The difficult part is knowing what type of value (i.e. URL, Page Name, or Guid) gets returned from the PageField and how to use that in your control. So, to start, open up .NET Reflector and open up this DLL file (you can find it in any Sitefinity 4 Project or in the SDK): Telerik.Sitefinity.dll

Once you open up this DLL, you will see two options (as seen below):

Expand the Resources folder to see a whole slew of compiled JavaScript, Images, CSS, and ASCX files. Fortunately, I have a specific one in mind: Telerik.Sitefinity.Web.UI.Fields.Scripts.PageField.js. Right click the file and save it to your computer so you can open it in Visual Studio (this will make it much easier to read).

This JavaScript gives you a lot of information related to the PageField control. For instance, if you look at the saveChanges event, you will notice that the value of the control is being set to the ID of the selected page. This returned value will be different for all of the new Telerik.Sitefinity.Web.UI.Fields controls. For instance, HtmlField control returns the HTML content from the WYSIWYG editor.

Want to get a quick look at all of the properties and methods available to us for the PageField control? Collapse the Resources folder from earlier and Expand “Telerik.Sitefinity.dll”. Inside you will find the “Telerik.Sitefinity.Web.UI.Fields” namespace. Expand that, and then expand PageField as well. Now you can literally see all of the child controls and control methods.

Well, that should be enough to get you started. Use .NET reflector as your code documentation until we get better developer documentation from the Sitefinity team themselves.

Inside of app/etc is a magical modules folder that is automatically read by Magento. Each xml file inside of the modules directory gets processed. This folder is typically used for installing plugins and modules. However, we can use it to easily add our page templates into the admin. Simply create a new xml file inside of the modules directory and drop in the code (below). page/page-home.phtml refers to the templates folder of your theme.

<?xml version="1.0"?>
<config>
    <global>
        <cms>
            <layouts>
                <page_home>
                    <label>Home</label>
                    <template>page/page-home.phtml</template>
                </page_home>
            </layouts>
        </cms>
    </global>
</config>

And there you have it. Clear your cache using Magento’s Cache Management tool and you should be good to go. To add additional templates, just create another node inside of layouts using the same structure as page_home.

1. I forgot to give the user access to the DB
2. I typed in the password or server incorrectly

Well – if you’ve checked both of those options and you are still experiencing the issue, then chances are that you made the same silly mistake that I did.

When you install a fresh copy of SQL Server (I’m using Express 2008 R2), it is set to only allow Windows Authentication connections. You need to allow SQL connections… Follow the instructions below:

1. Open SQL Management Studio
2. Right click on your server instance and click “Properties”
3. Click “Security” in the left menu
4. Under “Server Authentication”, click “SQL Server and Windows Authentication mode”
5. Try your install one more time

Hope this saves you some time…