Knowledge base feed

How to enable the Files provider for Images and Documents module in Sitefinity 3.7 SP3

Georgi Chokov — Mon, 15 Mar 2010 17:53:44 GMT

Sitefinity team received a lot of requests to implement a provider, which allows items in Images and Documents module to be stored on the File system.

This is implemented out of the box in the latest service release. Here is how to enable it:

1. Open your Sitefinity 3.7 SP3 web.config file.

2. Add the following properties to the Libraries provider:

<Libraries

streamingProviderName="Files"

streamingIsEnabled="True"

...

By setting streamingProviderName to Files, all items uploaded to Images and Documents module will be stored in App_Data\Files\<Provider Name>. This means if you have several Libraries providers, each provider will have its items in separate directories.

If you want to go back with the database storage, the provider name should be changed to Nolics. If the property is missing, Sitefinity uses Nolics as default streaming provider.

A short note on the streaming setting - when streamingIsEnabled, Sitefinity is using its own streaming implementation. This setting must be ON, when the streamingProviderName is set to Files.

How to reuse Sitefinity editor dialogs

Radoslav Georgiev — Fri, 12 Feb 2010 11:58:11 GMT

As you all may have noticed we use custom dialogs such as the Link Manager, Image Manager, and Documents Manager in Sitefinity rich text editor. These custom dialogs let you insert links from your website site map or add images and documents from your libraries. When you develop custom modules or controls you may wish to add those to your editor in order to reuse this functionality. This article will lead you through the steps you need to take to achieve this.

First you need to add the commands to your editor tools file:

<tools name="InsertToolbar" dockable="false">

<tool name="LibraryImageManager" text="Insert an image"/>

<tool name="LibraryDocumentManager" text="Insert a document"/>

<tool name="LinkManager" text="Insert a link" shortcut="CTRL+K"/>

...

</tools>

Then you need to the control template containing your markup and add the following JavaScript code so that your editor is able to utilize the commands you have just added:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

<!--

Telerik.Web.UI.Editor.CommandList["LibraryImageManager"] = function(commandName, editor, args) {

var editorArgs = editor.getSelectedElement();

if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")

editorArgs = editor.getSelection();

var myCallbackFunction = function(sender, args) {

if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "IMG")

args.parentNode.replaceChild(editorArgs, args);

else {

var cloned = args.cloneNode(true);

var div = args.ownerDocument.createElement("DIV");

div.appendChild(cloned);

editorArgs.pasteHtml(div.innerHTML);

}

var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx") %>';

editor.showExternalDialog(

path,

editorArgs,

750,

515,

myCallbackFunction,

null,

'ImageLibraryDialog',

true,

Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,

false,

true)

};

Telerik.Web.UI.Editor.CommandList["LibraryDocumentManager"] = function(commandName, editor, args) {

var editorArgs = editor.getSelectedElement();

if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")

editorArgs = editor.getSelection();

var myCallbackFunction = function(sender, args) {

if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")

args.parentNode.replaceChild(editorArgs, args);

else {

var cloned = args.cloneNode(true);

var div = args.ownerDocument.createElement("DIV");

div.appendChild(cloned);

editorArgs.pasteHtml(div.innerHTML);

}

var path =

'<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx") %>'

;

editor.showExternalDialog(

path,

editorArgs,

750,

515,

myCallbackFunction,

null,

'ImageLibraryDialog',

false,

Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,

false,

true)

};

Telerik.Web.UI.Editor.CommandList["LinkManager"] = function(commandName, editor, args) {

var editorArgs = editor.getSelectedElement();

if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A") {

var sel = editor.getSelection();

editorArgs = sel;

editorArgs.Html = sel.getHtml();

editorArgs.Text = sel.getText();

}

var myCallbackFunction = function(sender, args) {

if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")

args.parentNode.replaceChild(editorArgs, args);

else {

var cloned = args.cloneNode(true);

var div = args.ownerDocument.createElement("DIV");

div.appendChild(cloned);

editorArgs.pasteHtml(div.innerHTML);

}

var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>';

editor.showExternalDialog(

path,

editorArgs,

750,

515,

myCallbackFunction,

null,

'ImageLibraryDialog',

false,

Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,

false,

true)

};

Telerik.Web.UI.Editor.CommandList["SetLinkProperties"] = function(commandName, editor, args) {

var editorArgs = editor.getSelectedElement();

if (!editorArgs.nodeName || typeof (editorArgs.nodeName) == "undefined" || editorArgs.nodeName != "A")

editorArgs = editor.getSelection();

var myCallbackFunction = function(sender, args) {

if (typeof (editorArgs.nodeName) != "undefined" && editorArgs.nodeName == "A")

args.parentNode.replaceChild(editorArgs, args);

else {

var cloned = args.cloneNode(true);

var div = args.ownerDocument.createElement("DIV");

div.appendChild(cloned);

editorArgs.pasteHtml(div.innerHTML);

}

var path = '<%= ((Telerik.Cms.Web.CmsPageBase)Page).ResolveCmsUrl("~/Sitefinity/UserControls/Dialogs/LinksDialog.aspx") %>';

editor.showExternalDialog(

path,

editorArgs,

750,

515,

myCallbackFunction,

null,

'ImageLibraryDialog',

false,

Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,

false,

true)

};

RadEditorCommandList["IncreaseSize"] = function(commandName, editor, oTool) {

var currentWidth = editor.get_element().style.width; //get the width of Telerik RadEditor

var currentHeight = editor.get_element().style.height; //get the heigh of Telerik RadEditor

editor.SetSize(currentWidth, currentHeight + 30); //set the height size of the editor to increase with 30px

};

RadEditorCommandList["DecreaseSize"] = function(commandName, editor, oTool) {

var currentWidth = editor.get_element().style.width;

var currentHeight = editor.get_element().style.height;

editor.SetSize(currentWidth, currentHeight - 30); //set the height size of the editor to decrease with 30px

};

var oldFunction = Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"]; //save the original Paste function

Telerik.Web.UI.Editor.CommandList["ToggleScreenMode"] = function(commandName, editor, args) {

oldFunction(commandName, editor, args);

var bd = document.getElementsByTagName("body")[0];

if (/fullScreenMode/.test(bd.className)) {

var rep = bd.className.match(' ' + 'fullScreenMode') ? ' ' + 'fullScreenMode' : 'fullScreenMode';

bd.className = bd.className.replace(rep, '');

} else {

bd.className += bd.className ? ' ' + 'fullScreenMode' : 'fullScreenMode';

}

-->

</script>

</telerik:RadCodeBlock>

This JavaScirpt code can be found in any of the external templates for creating or editing new content items or in the control template for the Generic Content control.

For more information on creating custom dialogs for the editor you can take a look at the following article: RadEditor: Add Custom Dialogs

Detail mode of declaratively added controls throws Error 404 Not found

Ivan Dimitrov — Tue, 26 Jan 2010 14:15:01 GMT

The problem can be reproduced in 3.x versions when you use declaratively added ContentView based controls as NewsView, EventsView, ContentView, BlogPosts. The problem can be reproduced when you register the control in a template and try to navigate to the full content of an item.

Control/Page template

    <%@ Register TagPrefix="sf" Namespace="Telerik.News.WebControls"  Assembly="Telerik.News" %>  
 <sf:NewsView runat="server" ID="NewsView1" BehaviorMode="Auto" ProviderName="News"></sf:NewsView>  
  

The problem lies in the UrlRewriterService that we use. Actually, all links are correct and it is hard to figure out what is going wrong. After some debugging, we managed to come up with a simple solution that requires to register Telerik.Web.UrlRewriterService in the code behind of your user control

Code Behind

    [Telerik.Web.UrlRewriterService("Telerik.Cms.Engine.ContentUrlRewriterService, Telerik.Cms.Engine")]  
 public partial class TelerikSamples_SamppleControl: System.Web.UI.UserControl  
 {  
     protected void Page_Load(object sender, EventArgs e)  
     {  
   
     }  
 }  
  

RadioButtonList rendered as

Radoslav Georgiev — Thu, 21 Jan 2010 13:11:17 GMT

When you use RadioButtonList control in your Sitefinity website the button lists are always rendered as <ul> and setting the ReperatDirection="Horizontal" property of the RadioButtonList control does not take effect. This is because we use a custom control adapter fro rendering the control in Sitefinity.

In order to make the RadioButtonList control render the buttons horizontally you have two options: either remove the control adapter or provide custom styles for the RadioButtonList. The first option is not recommendable because removing the control adapter will break the appearance of RadioButton controls in the Sitefnity back-end. This can be done by removing the bellow line from ~/App_Browsers/BrowserFile.browser file:

        <controlAdapters>  
       ...  
       <adapter controlType="System.Web.UI.WebControls.RadioButtonList" adapterType="Telerik.Cms.Web.UI.Adapters.RadioButtonListAdapter" />  
     </controlAdapters>  
  

The preferred approach is to provide CSS rules in order to render the radio button lists on the same line. First set the CssClass property of the RadioButtonList control:

        <asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="ButtonList">  
         ...  
     </asp:RadioButtonList>  
  

Then use the bellow sample CSS rules to achieve the desired result:

    .ButtonList  
 {  
     list-style-type:none;  
     width: 100%;  
     float: left;  
     clear: both;  
 }  
 .ButtonList li  
 {  
     float: left;  
 }  
   
  

Newsletters module not sending e-mails

Radoslav Georgiev — Thu, 14 Jan 2010 16:11:52 GMT

You have probably experienced this when you have valid SMTP settings for your Newsletters module and have sent/received the test e-mail that the SMTP settings are valid, however when you go to send your news letter it sends several e-mails and then "freezes." There are three major reasons for this and this KB article will help you deal with them.

The first reason for the newsletter sending to "freeze" is that the SMTP server has been flooded with too many e-mails at the same time. In order to deal with this issue you can just increase the interval for sending e-mails. This way you can set the newsletter manager to send e-mails every N milliseconds. To configure this go to your web.config find the notifications configuration section and edit the sending interval property:

    <notifications defaultProvider="Notifications">   
       <providers>   
         <clear/>   
         <add name="Notifications"    
          type="Telerik.Notifications.Data.DefaultProvider, Telerik.Notifications.Data"    
          connectionStringName="DefaultConnection"    
          EnableSsl="false"    
          MergedFields="FirstName;LastName"    
          SendingInterval="1000"/>   
       </providers>  
   
  

The second and third reasons for the newsletter sending to stall are that your subscribers have entered invalid data for first and last name and e-mails. The first and last names for subscribers must consist of English alpha-numeric characters and the requirement for emails is that they are valid. You can customize newsletter subscription control template and use regular expressions to check the validity of data entered. To do this go to ~/Sitefinity/ControlTemplates/Newsletters/SubscriptionFormTemplate.ascx. If you are using e-mail only mode for the subscription form you should add reg ex validator only to textbox with ID sf1_email. If mode with e-mails and names is used add validators to text controls that are in emailNamehldr placeholder. Bellow are sample regular expression validators which will validate the e-mails and first name:

    <li>  
     <asp:Label ID="Label1" runat="server" Text="Email:" AssociatedControlID="sf2_email"></asp:Label>  
     <asp:TextBox runat="server" ID="sf2_email" CssClass="sf_subscribeTxt" ValidationGroup="subscription"></asp:TextBox>  
     <asp:RequiredFieldValidator ID="emailEmptyValidator2" runat="server" CssClass="sf_emailValidation"  
         ValidationGroup="subscription" ControlToValidate="sf2_email" Display="Dynamic"  
         EnableViewState="False" SetFocusOnError="True">  
         <strong><asp:Literal ID="Literal7" runat="server" Text="Email cannot be empty!"></asp:Literal></strong>  
     </asp:RequiredFieldValidator>  
     <asp:RegularExpressionValidator ID="emailREValidator2" runat="server" CssClass="sf_emailValidation"  
         ControlToValidate="sf2_email" Display="Dynamic" EnableViewState="false" SetFocusOnError="true"  
         ValidationExpression="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" ValidationGroup="subscription">  
         <strong><asp:Literal ID="literal22" runat="server" Text="Wrong email!"></asp:Literal></strong>  
     </asp:RegularExpressionValidator>  
 </li>  
 <li>  
     <asp:Label ID="Label2" runat="server" AssociatedControlID="sf_firstname" Text="First name:"></asp:Label>  
     <asp:TextBox runat="server" CssClass="sf_subscribeTxt" ID="sf_firstname"></asp:TextBox>  
      <asp:RegularExpressionValidator ID="firstNameValidator" runat="server" CssClass="sf_emailValidation"  
         ControlToValidate="sf_firstname" Display="Dynamic" EnableViewState="false" SetFocusOnError="true"  
         ValidationExpression="^[a-zA-Z0-9]*$" ValidationGroup="subscription">  
         <strong><asp:Literal ID="literal3" runat="server" Text="First name can contain only Elnglish alphanumeric characters"></asp:Literal></strong>  
     </asp:RegularExpressionValidator>  
 </li>  
   
  

Once you have made sure that no faulty data will be entered you can check if the current subscribers have faulty date. For those purposes you can validate against the same regular expressions used above. Bellow is a sample how to check e-mail validity of all newsletters subscribers:

            string emailStrRegex = @"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" +  
                         @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +  
                         @".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$";  
         System.Text.RegularExpressions.Regex emailRegex = new System.Text.RegularExpressions.Regex(emailStrRegex);  
         Telerik.Notifications.Newsletters.DataManager newslettersManager = new Telerik.Notifications.Newsletters.DataManager();  
         foreach (Telerik.Newsletters.ISubscriber subscriber in newslettersManager.GetSubscribers())  
         {  
             string email = subscriber.Email;  
             if (!emailRegex.IsMatch(email))  
             {  
                 //output fauly email  
                 //you can also delete subscriber  
                 newslettersManager.DeleteSubscriber(subscriber.SubscriberId);  
             }  
         }  
  

You can use similar logic for validating subscribers' first and last names.

Evaluating Sitefinity from Developer’s perspective

Georgi Chokov — Tue, 29 Dec 2009 14:29:19 GMT

So you are a developer and it’s the first time that you are entering in the Sitefinity world? You have deadlines and a tight schedule, but still, you have to find out if Sitefinity is suitable for your next state of the art project? This KB will get you started.

If you already know the scale of your project, you can first take a look at our showcase gallery. This should give you an overview of the typical web sites done so far with Sitefinity. Some of the showcases provide you with case studies – how the development/management problems are solved with the CMS. Learning from others' experience is sometimes better than learning from your own mistakes.

If you are a .NET developer, then you already know the essential part of Sitefinity. When you pass the System Requirements, describing the various supported types of OS Web and Database servers, your next step should be installing the product and creating sample content. You can also play with our sample web site – Telerik University Demo. The basic developer resources that you are looking for are:

If you are looking for information about the basic features and commonly used tasks, such as creating pages, activating and using localization, managing users, roles and permissions, you can check our product videos.

Once you pass this point, you will most probably want to know about the advanced customizations that could be done with our CMS. This is what Sitefinity is designed for – we provide you with a code base and API which you can use to create your own controls interacting with the content, modules and services. The resources that can guide you beyond the basics:

Sitefinity comes with the award winning RadControls for Asp.Net AJAX and Silverlight controls from Telerik - you can use them for the user interface or integrate them with your custom modules. We are regularly posting code examples with them in our Blogs and Forums. Another very helpful resource could be sitefinitywatch.com.

What about the support service?

It is important to mention that you are getting support from the people developing the product as well. The main support channels though which you could receive support is-are:

Online Support Ticketing System accessible from your Client.Net account
Forum threads

If you have any specific questions on the software architecture, or uncertainties on how to implement Sitefinity in your unique scenario, our team will be pleased to help you. Our partners could also help you if the project is too big for you and you need additional development help.

We wish you successful evaluation!

How to apply custom style sheets to Sitefinity Content View controls

Radoslav Georgiev — Sat, 19 Dec 2009 12:45:32 GMT

Most of you are probably aware that since Sitefinity 3.6 we have moved to using embedded control templates for Sitefinity's controls. This means that if you wish for example to modify the look and feel for the New View control you will have to map its external template and edit it to achieve the desired result. In the following article we will give you some guidance on how to change the style rules for content view controls. We will work with the News View control as an example.

Before you start I will suggest that you look at the following resources if you have any doubts on how to work with Sitefinity's control templates:

Introduction to ControlsConfig file

How to map a view to an external template, in Sitefinity 3.6 or later?

Once you have gained better understanding on how to map controls to use external templates you will need to make the News View control use the external templates. The files you will need to modify are ~/Sitefinity/ControlTemplates/News/ListPageMaster.ascx and ~/Sitefinity/ControlTemplates/News/Details.ascx. What you should do with those files is to change the CssFile link to point to your custom css files:

    <telerik:CssFileLink ID="CssFileLink1" FileName="~/Path to your style sheet"  Media="screen" runat="server" />   
  

Then you should map the control to the templates using the following view settings in the ControlsConfig file and restart the website:

     <viewSettings hostType="Telerik.News.WebControls.NewsView">   
       <additionalTemplates>   
         <!--Provides user interface for displaying a list of news items in the NewsView control for the News module.-->   
         <add key="ItemListTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/News/ListPageMaster.ascx" />   
         <!--Provides user interface for displaying a single news item in the NewsView control of the News module.-->   
         <add key="SingleItemTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/News/ListPageDetails.ascx" />   
       </additionalTemplates>   
 </viewSettings>   
  

For your convenience I am sending you as an attached file the default CSS styles for the content view public controls. This will save you some time from building the styles from scratch.

Enhance Sitefinity's ImageEditorDialog dialog security

Ivan Dimitrov — Tue, 08 Dec 2009 22:30:13 GMT

To enhance Sitefinity's ImageEditorDialog dialog security, there are new properties added to this control since Sitefinity 3.7 SP2:

AllowedFileExtensions – specifies the file extensions which are allowed for uploading by authenticated users. Default value (when you do not specify this property) – all file types!
AllowedFileExtensionsForAnonymousUsers – specifies the file extensions which are allowed for uploading by anonymous users (for example, when anonymous users write in the Forums module on a public page). Default value (when you do not specify this property) – no file types!

To set these properties,

1.Open:

~/your_website/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx (for ImageEditorDialog)

~/your_website/Sitefinity/UserControls/Dialogs/DocumentEditorDialog.aspx (for DocumentEditorDialog),

2. Modify the ImageEditorDialog control or DocumentEditorDialog.aspx by adding the AllowedFileExtensions property. For a property value enter the file extensions you want to allow, starting with a dot and separated by a comma.

Sample code

    <lib:ImageEditorDialog runat="server" DisplayMode="Images" AllowedFileExtensions=".jpg, .jpeg, .png" AllowedFileExtensionsForAnonymousUsers=".jpg"/>   
  

With this code, you specify that authenticated users could upload only three file types using the image dialog, and that anonymous users could only upload one file type.

Important note: when you do not set the AllowedFileExtensions property, you allow all file types for authenticated users. However, when you do not set the AllowedFileExtensionsForAnonymousUsers property, you forbid anonymous users to upload any file type.

Creating a custom URL Mapping Service

Vladimir Vasilev — Fri, 04 Dec 2009 09:00:00 GMT

Instead of using the default Domain-Page mapping implementation of the Cms URL Mapping Service, you can create a custom URL Mapping.

The URL Mapping service allows to define different Site Map roots based on the inforamtion in the current HTTP Context.

For example, you can map a specific CMS page in the site to a specific Membership User. So when the site is accessed by this user, the mapped CMS page behaves as a root of the site.

Here is the sample implementation:

1. Create UserUrlMappingService class in the ~/App_Code/UserUrlMappingService.cs:

   using System.Web;  
 using System.Web.Security;  
 using Telerik.Cms.Web;  
   
 public class UserUrlMappingService : UrlMappingServiceBase  
 {  
     protected override string GetKey(HttpContext context)  
     {  
         RolePrincipal principal = context.User as RolePrincipal;  
         if (principal != null)  
         {  
             return context.User.Identity.Name;  
         }  
         else  
         {  
             // We should check the cookies,   
             // because sometimes this method is called in the BeginRequest (before the user is authenticated).  
             HttpCookie cookie = context.Request.Cookies[FormsAuthentication.FormsCookieName];  
             if (cookie != null)  
             {  
                 FormsAuthenticationTicket ticket = FormsAuthentication.Decrypt(cookie.Value);  
                 if (ticket != null)  
                     return ticket.Name;  
             }  
         }  
   
         return string.Empty;  
     }  
 }  

2. Declare the Mapping Service in the web.config and add your mappings:

   <cms defaultProvider="Sitefinity" ...>  
     <urlMappings type="Custom" customService="UserUrlMappingService, App_Code">  
             <add key="[username]" value="[page_path]" />  
     </urlMappings>  
     ...  

Where username is the name of the membership user and page_path is the path to the page without extension i.e. page1 or page1/subpage1.

Additionaly, you can declare custom parameters for the mapping elements in the collection, and later access them for specific SiteMap node if it belongs to that mapping configuration.

For example, lets say that you have 2 users (user1 and user2) and you want to define different Site Map roots for them (page1 and page2). Also, you want to dynamically load different themes when the users access any page under their roots. Here is the implementation:

1. UserUrlMappingService:

   using System.Web;  
 using System.Web.Security;  
 using Telerik.Cms.Web;  
 using Telerik.Cms.Configuration;  
   
 public class UserUrlMappingService : UrlMappingServiceBase  
 {  
     protected override UrlMappingInfo CreateMappingInfoItem(UrlMappingElement mappingElement)  
     {  
         return new UserUrlMappingInfo(mappingElement);  
     }  
   
     protected override string GetKey(HttpContext context)  
     {  
         RolePrincipal principal = context.User as RolePrincipal;  
         if (principal != null)  
         {  
             return context.User.Identity.Name;  
         }  
         else  
         {  
             // We should check the cookies,   
             // because sometimes this method is called in the BeginRequest (before the user is authenticated).  
             HttpCookie cookie = context.Request.Cookies[FormsAuthentication.FormsCookieName];  
             if (cookie != null)  
             {  
                 FormsAuthenticationTicket ticket = FormsAuthentication.Decrypt(cookie.Value);  
                 if (ticket != null)  
                     return ticket.Name;  
             }  
         }  
   
         return string.Empty;  
     }  
 }  
   
 public class UserUrlMappingInfo : UrlMappingInfo  
 {  
     public UserUrlMappingInfo(UrlMappingElement mappingElement)  
         : base(mappingElement)  
     {  
         this.theme = mappingElement.Parameters["theme"];  
     }  
   
     public string Theme  
     {  
         get { return this.theme; }  
     }  
   
     private string theme;  
 }  
   

2. URL mapping configuration:

       <urlMappings type="Custom" customService="UserUrlMappingService, App_Code">  
        <add key="user1" value="page1" theme="Levels"/>  
        <add key="user2" value="page2" theme="Orange with left sidebar" />  
     </urlMappings>  

3. Custom InternalPage:

- create a CustomInternalPage class in the ~/App_Code/CustomInternalPage.cs

   using System;  
 using Telerik.Cms.Web;  
   
 public class CustomInternalPage : InternalPage  
 {  
     protected override void OnPreInit(EventArgs e)  
     {  
         base.OnPreInit(e);  
   
         ICmsUrlContext context = (ICmsUrlContext)this.Context.Items[UrlHelper.CmsPageKey];  
         if (context != null)  
         {  
             CmsSiteMapNode node = context.GetSiteMapNode() as CmsSiteMapNode;  
             if (node != null)  
             {  
                 UserUrlMappingInfo urlMappingInfo = node.GetMappingInfo() as UserUrlMappingInfo;  
                 if (urlMappingInfo != null)  
                 {  
                     string theme = urlMappingInfo.Theme;  
                     if (!string.IsNullOrEmpty(theme))  
                     {  
                         this.Theme = theme;  
                     }  
                 }  
             }  
         }  
     }  
   
 }  
   

- replace the declaration of InternalPage class with the name of your newly created class in the following file ~/Sitefinity/cmsentrypoint.aspx:

<%@ Page Language="C#" MasterPageFile="~/App_Master/Dummy.master" Inherits="CustomInternalPage" %>

Finally, the URL Mapping service can be used in many other different custom scenarios.

Controling appearance of RadControls for ASP.NET AJAX in Sitefinity

Radoslav Georgiev — Thu, 20 Aug 2009 11:25:36 GMT

Sitefinity CMS comes with the complete set of RadControls for ASP.NET AJAX built in and at your disposal for use in your web site project. The CMS even uses some of the controls in its toolbox in the page editor. As an example the navigation controls such as the Site Menu, Site Panel Bar and the Site Tab Strip are essentially RadControls wrapped into user controls (.ascx) in order to make them available in the control toolbox for drag and drop use. Using RadControls skins in Sitefinity CMS is essentially the same as using them in regular ASP.NET themes, you can refer to the Using skins in ASP.NET themes article for more information. This article will cover the topics of how to create your custom styles and skins for the RadControls.

Using the built-in skins for RadControls.

With the built in RadControls for ASP.NET AJAX you also get access to the built-in skins for the RadControls. Currently the RadControls come with twelve built in skins. I will use the RadMenu control as an example through the rest of this article. You can see the look and feel of the twelve built-in skins for the RadMenu below:

If you wish to use one of those skins you simply have to open the RadMenu.skin located in the theme that your pages use and tell it that it has to use the desired skin. Lets take for example the Blue with right sidebar theme that comes with Sitefinity.Open the Visual Studio and go to ~/App_Themes/Blue with right sidebar/RadMenu.skin (if this file does not exist in your theme directory you will have to create it). If I want to use the Telerik skin I just have to set the skin property:

    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>  
 <telerik:RadMenu      
     runat="server"   
     Skin="Telerik" EnableEmbeddedSkins="true">  
 </telerik:RadMenu>  
  

Note that this will also make the Site Menu navigation control to use this skin, since it is a RadMenu wrapped into a user control (.ascx).

Building your own skin

Building custom skins for RadControls for ASP.NET AJAX in Sitefinity, like using built in skins, is the same as doing so for regular ASP.NET themes. The documentation for RadControls, contains a tutorial on how to create custom skins for each of the controls, it also contains a full list of the CSS skin file selectors that you have to use in order to build your own styling rules. For the RadMenu you can take a look at the following tutorial and article:

Tutorial: Creating A Custom Skin

CSS Skin File Selectors

To put the process in a nut shell, you have to create a folder in your theme directory that will hold your styles and images files. For the RadMenu you have to create a directory called Menu (e.g. ~/App_Themes/Blue with right sidebar/Menu/). If your skin is called MySkin the ~/App_Themes/Blue with right sidebar/RadMenu.skin file has to look like this:

    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>  
 <telerik:RadMenu      
     runat="server"   
     Skin="MySkin" EnableEmbeddedSkins="false">  
 </telerik:RadMenu>  
  

And the style rules located in the ~/App_Themes/Blue with right sidebar/Menu/styles.css file have to look as bellow. Note that you have to follow the convention with using the skin name so that your theme will be able to load them:

    .RadMenu_MySkin   
 {  
     background: #75a8e6;  
     z-index: 100 !important;          
   
 }  
 .RadMenu_MySkin .rmLink,  
 .RadMenu_MySkin .rmTemplate .rmText  
 {  
     line-height: 20px;  
     text-decoration:none;  
     color: #fff;  
     background: #75a8e6;      
 }  
  

Disabling/overriding the embedded styling rules

All RadControls come with built in styling rules embedded into the Telerik.Web.UI.dll. Those embedded styles are used for your convenience so that you do not have to build the styles from scratch every time you create your theme or use a control. Those built in style get loaded together with your custom styles, and sometimes may interfere with the styling rules that you have built. To prevent this you can use two approaches.

The first one is easier and quicker to apply. You just have to add !important statement to your styles that get override by the embedded style sheets. This will explicitly tell your theme that it has to use the custom styles. Here is an example:

    .RadMenu_MySkin  
 {  
     z-index: 100 !important;          
 }  
  

The second one is disabling completely the embedded style sheets. Although this approach is "cleaner" than the above one, it involves building control style rule from the ground up and might take you some more time. If you prefer this approach you should set the EnableEmbeddedBaseStyleSheet property in your skin file. Here is an example how to do it for the RadMenu:

    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>  
 <telerik:RadMenu      
     runat="server"   
     Skin="SitefinityBlue" EnableEmbeddedSkins="false"  
     EnableEmbeddedBaseStylesheet="false">  
 </telerik:RadMenu>  
  

For more information on how to disable embedded resources, such as skins, styles and scripts, for the RadControls you can take a look at the following article: Disabling embedded resources.

The “Domain – Page mapping” feature

Vladimir Vasilev — Wed, 19 Aug 2009 05:01:00 GMT

In Sitefinity 3.7, you can map domains to specific pages without the need to write any code.

What does “Domain – Page mapping” mean?

You can map a specific CMS page in the site to a specific domain. So when the site is accessed via this domain, the mapped CMS page behaves as a root of the site.

The implementation was initially started in the following forum post: http://www.sitefinity.com/support/forums/sitefinity-3-x/developing-with-sitefinity/sub-domains.aspx

Configuration:

All you need to do is to specify the mapping configuration rules under telerik/cms section in the web.config:

   <urlMappings>  
  <add key="<domain>" value="<page_path>" />  
  <add ... />  
   ...  
 </urlMappings>  
  
  

where

<domain> is the name of the domain, i.e. www.mysite.com, blogs.mysite.com, etc.

<page_path> is the path to the page relative to the SiteMap root (without extension), i.e. blogs, home/internal

The key and value attributes are required.

In the mapping <add> element, you can also specify shared attribute, which expects True ot False. It is optional with default value False. If shared="true", the mapped page node will be visible and accessible to the other domain; otherwise, it will be hidden for it.

Sample scenario:

For example, you have to create 3 Web sites:

-mysite.com – the main Web Site

-blogs.mysite.com – for Blogs

-forums.mysite.com – for Forums

The three sites will share same resources, and you want to use single sign-in to manage their contents.

The Site Map will have the following pages:

-Home

-About

-Blogs

- Posts

-Forums

- Posts

Without mapping, the blogs' posts will be accessible with:

mysite.com/blogs/posts.aspx

and the forums' posts with:

mysite.com/forums/posts.aspx

After applying the following domain mapping in the web.config:

   <cms defaultProvider="Sitefinity" ...>  
  <urlMappings>  
  <add key="blogs.mysite.com" value="blogs" shared="true" />  
  <add key="forums.mysite.com" value="forums" shared="false" />  
  </urlMappings>  
  
  

.. when the Web Site is accessed via blogs.mysite.com, it will be opened starting from the blogs page. However, the blogs page will be still accessible through the other domains, because its shared attribute is set to True.

The forums page will be accessible only through forums.mysite.com.

Testing:

You can test it in your localhost before going to production. In order to do this you should edit <path_to_windows>\System32\drivers\etc\hosts file by adding the domains you want to test:

127.0.0.1       localhost

::1             localhost

127.0.0.1       blogs.mysite.com

127.0.0.1       forums.mysite.com

Don't forget to rollback your changes after finishing with the tests.

The "Domain - Page mapping" is the default implementation of the CmsUrlMappingService. However, it is easy to build a custom mapping, based on the current HttpContext like "User - Page mapping" or "Cookie - Page mapping", which defines different SiteMap roots for specific users or for specific value in the cookie. How to do this will be handled in another KB.

Social Bookmarks in Sitefinity

Dilyan Rusev — Mon, 10 Aug 2009 15:38:00 GMT

Introduction

Social bookmarks are a way of sharing information on one's favourite social network. But first we must know how social bookmarks work in Sitefinity. I would like to point out that modifying basic things with Social Bookmarks in Sitefinity does not require programming skills.

Social Bookmarks in Sitefinity

Social bookarks are available for the following modules:

Images & Documents
Generic Content
Blogs
Events
News

If you web site were located locally on your computer at C:\intetpub\wwwroot\dido, and it had a sub-folder C:\intetpub\wwwroot\dido\App_Data, I would refer from now on to the latter as ~/App_Data. Therefore, ~/ would mean the root directory of our web site.

Social bookmarks settings are kept in the module's ControlTemplates directory. For example, for the news module, it would be ~/Sitefinity/ControlTemplates/News.

In that directory, we have a file called socialBookmarkTemplate.xml. Here is a sample file:

    <bookmarks>  
   <itemTemplate>  
     <bookmark title="Facebook" name="Facebook">  
       <url><![CDATA[http://www.facebook.com/sharer.php?u={0}&t={1}]]></url>  
     </bookmark>      
     <bookmark title="StumbleUpon" name="StumbleUpon" >  
       <url><![CDATA[http://www.stumbleupon.com/submit?url={0}]]></url>  
     </bookmark>  
     <bookmark title="Del.icio.us" name="delicious" >  
       <url><![CDATA[http://del.icio.us/post?url={0}&title={1}]]></url>  
     </bookmark>  
   </itemTemplate>  
   <extendedProperty>  
     <image>  
       <size>24</size>  
       <extension>png</extension>  
     </image>  
   </extendedProperty>  
 </bookmarks>  
  

Important note!

Users with versions prior to 3.7 should upgrade this file, too - for all modules. You should add the CDATA element in the url tag.

Here, we have an item template and extended properties. Item template is used to list all social bookmarks, and the extended properties are used for naming (more on that later).

Every bookmark element describes a single social bookmark. It has name, title and url. Name is what identifies this social bookamrks and participates in icon naming. Title is what shows as alternate text of the social bookmark's icon.

Url is starts with <!CDATA[ and ends with ]]>. These are important, because they allow you to copy-paste the social bookmark url in this file without worrying about escaping special XML characters. In the url, we have two more important elements: {0} and {1}. These are placeholders for

{0} => Url of the item that is going to be social-bookmark-ed
{1} => Title of the blog post/news item/event/library item or Name of the generic content item.

These values are substituted by Sitefinity with the real values for you, so that when you click on the social bookmark, you will have the actual values.

For extended properties, we have image size and image extension. These apply to all social bookmarks.

It is time to explain how images (icons) are mapped to social bookmarks. Right in the directory where socialBookmarkTemplate.xml. resides, there is a folder named SocialBookmark. All social bookmark images are there. Relating a bookmark element to a image in the SocialBookmark folder is guided by this rule:

Final image name = SocialBookmarkName_ImageSize.ImageExtension.

SocialBookmarkName is the name attribute of the bookmark element in socialBookmarkTemplate.xml, and ImageSize and ImageExtension come from the extended properties of the same file. This is done so that you can have two or more sets of icon sizes, and switching between them would be just a matter of editing a single value in the .xml file.

Customizing

If you want to change the icon of a social bookmark, all you have to do is change its image file. Now you know where to look for and what the social bookmark's name will be.

Reordering the social bookmarks is done by reordering the bookmark elements in the xml file for a module.

Removing a social bookmark is accomplished by removing its bookmark element.

Adding a new social bookmark would require you to find out the url for adding a new item to the social network you use. This information would be generally located on the social network's official web site. Then you would add a new bookmark element and a properly named picture.

Conclusion

Social bookmarks in Sitefinity require no programming skills to be modified. They are an easy way to share your favourite pages with your friends.

How to Wrap Generic Conent in a User Control

Penka Ivanova — Thu, 16 Jul 2009 11:47:55 GMT

Introduction

While wrapping a GenericContent control in a custom control has its advantages, it is quicker to do it with a user control. This article is available in the offline help as well, but we decided to make it available as a KB, as well.

Extensibility

Extending an existing control provided in Sitefinity is useful and time-saving - customizing existing controls take less time than creating new ones from scratch. The functionality the controls offer is prone to extension but it is up to each customer to define the exact requirements. This topic will provide an example for extending controls in Sitefinity by adding the Generic Content control to a user control.

Entering content is the main functionality of the Generic Content control. Still, additional options such as choosing what to be visible to whom or when it should be visible are very useful. This would come in handy when setting different content of a page for registered and for unregistered users.

Example

A user control could wrap an existing GenericContent control, and implement the custom logic. The user control should implement IGenericContent interface and its Content property should have an appropriate ControlDesignerAttribute. For example:

Mark-up:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WrappingGCInUserControl.ascx.cs" Inherits="Tickets_WrappingGCInUserControl" %>  
 <%@ Register Assembly="Telerik.Cms.Engine" Namespace="Telerik.Cms.Engine.WebControls"  TagPrefix="sfWeb" %>  
 <dl>  
    <dd>  
        <h2>Title</h2>  
    </dd>  
    <dd>  
        <sfWeb:GenericContent runat="server" ID="GenericContent1" />      
    </dd>  
    <dd>  
        Footer  
    </dd>  
 </dl>  
  

Code-behind:

    using System;  
 using System.ComponentModel;  
 using System.Web.UI;  
 using Telerik.Cms.Engine;  
 using Telerik.Cms.Engine.WebControls;  
 using Telerik.Framework.Web.Design;  
 using Telerik.Web;  
 [ControlDesignerAttribute("Telerik.Cms.Engine.WebControls.Design.GenericContentDesigner, Telerik.Cms.Engine")]  
 public partial class Tickets_WrappingGCInUserControl : System.Web.UI.UserControl, IGenericContent  
 {  
    protected void Page_Load(object sender, EventArgs e)  
    {  
    }  
    #region IGenericContent Members  
    [CmsBrowsable(false)]  
    [CmsPersistable(true)]  
    public string Content  
    {  
        get  
        {  
            return GenericContent1.Content;  
        }  
        set  
        {  
            GenericContent1.Content = value;  
        }  
    }  
    [Browsable(false)]  
    public Guid ContentID  
    {  
        get  
        {  
            return GenericContent1.ContentID;  
        }  
        set  
        {  
            GenericContent1.ContentID = value;  
        }  
    }  
    public string ProviderName  
    {  
        get  
        {  
            return GenericContent1.ProviderName;  
        }  
        set  
        {  
            GenericContent1.ProviderName = value;  
        }  
    }  
    [Browsable(false)]  
    public IContent SharedContent  
    {  
        get  
        {  
            return this.GenericContent1.SharedContent;  
        }  
    }  
    public bool UseStagedVersion  
    {  
        get  
        {  
            return GenericContent1.UseStagedVersion;  
        }  
        set  
        {  
            GenericContent1.UseStagedVersion = value;  
        }  
    }  
    [CmsBrowsable(false), CmsPersistable(true)]  
    public bool HasDynamicLinks  
    {  
        get  
        {  
            return GenericContent1.HasDynamicLinks;  
        }  
        set  
        {  
            GenericContent1.HasDynamicLinks = value;  
        }  
    }  
    public string GetItemUrl(string provider, Guid id, bool resolveAsAbsoluteUrl)  
    {  
        return GenericContent1.GetItemUrl(provider, id, resolveAsAbsoluteUrl);  
    }  
    public void RenderBinaryContent(HtmlTextWriter writer)  
    {  
        GenericContent1.RenderBinaryContent(writer);  
    }  
    public void RenderTextContent(HtmlTextWriter writer)  
    {  
        GenericContent1.RenderTextContent(writer);  
    }  
    #endregion  
 }  
  

Editing Image Gallery causes IE7 Crash

Georgi and Radoslav — Thu, 09 Jul 2009 13:16:04 GMT

Problem:

IE 7 crashes when one edits the Image Gallery Control.

Solution:

The problem is related to the way IE7 parses the rendered HTML by PagingSetting server controls in the ImageGalleryControlDesigner template and there are two options to avoid it.

You should make the designer template external (you can find all external templates and their mapping configuration in the download section in your Client.net account):

1. In the ~/App_Data/Configuration/Telerik.Sitefinity.Configuration.ControlsConfig.xml add the following template mapping:

    <?xml version="1.0" encoding="utf-8"?>         
 <controlsConfig>         
   <viewMap>         
     <viewSettings hostType="Telerik.Libraries.WebControls.Design.ImageGalleryDesigner"       
   
     layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Libraries/ImageGalleryControlDesigner.ascx" />         
   </viewMap>         
 </controlsConfig>         
  

layoutTemplatePath is the path where you store the external template. Generally you can add it to ~/Sitefinity/Admin/ControlTemplates/Libraries/ImageGalleryControlDesigner.ascx

Open the ~/Sitefinity/Admin/ControlTemplates/Libraries/ImageGalleryControlDesigner.ascx for edit and find the first instance of PagingSetting control:

    <sf:PresentationModeSettings ID="ModeSettings1" runat="server">         
     <DetailHeaderTemplate>         
     ...         
   
         <sf:PagingSetting id="pagingSetting" AllowPagingSetting="true" DefaultPageCount="10" AllowPaging="true" runat="server" />  
  

Approach 1:

Remove the instance of the control from the template

Approach 2:

Duplicated the PagingSetting control:

    <sf:PagingSetting id="pagingSetting" AllowPagingSetting="true" DefaultPageCount="10" AllowPaging="true" runat="server" />         
 <sf:PagingSetting id="pagingSetting1" AllowPagingSetting="true" DefaultPageCount="10" AllowPaging="true" runat="server" />  
  

The templates and ControlsConfig file are attached for your convenience. Let us know if there is anything else that we can do for you.

Google Checkout Integration

Joseph Anderson — Thu, 14 May 2009 12:02:08 GMT

Introduction

In a basic view, an e-Commerce system is a product list, a shopping cart and a checkout area. Many businesses will provide you with a shopping cart and checkout area. Often, they pass a small fee to your customers for their services. Sitefinity can provide you with a product list with the added benefit of built-in categories and tag lists. In this example, I shall use the EventsView with a Google Checkout button, demonstrating basic e-Commerce functionality with Sitefinity out of the box.

Installation

For the purposes of this demonstration, I shall provide you with the necessary files to install Google Checkout to allow users to pay for events. Here is how to install them:

1. Download the sample project, which is shown below this article
2. Using the same folder structure, copy the files into Sitefinity
3. In your Web.config and under the </configSections> tag, add the necessary app settings:

        <appSettings>  
         <add key="GoogleMerchantID" value="xxxxx" />  
         <add key="GoogleMerchantKey" value="xxxxx" />  
         <add key="GoogleEnvironment" value="Sandbox" />  
     </appSettings>  
   
  

4. In your Web.config, add this line of code beneath the <metaFields> tag:

            <add key="Events.Price" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue="0" />  
   
  

5. Login to your Sitefinity project.
6. Click on Pages
7. Select a page and click Edit this Page or Edit this Language Version if localization is turned on
8. From the toolbox on the right, drag and drop an EventsView
9. Click Edit on the EventsView
10. Click on the Advanced Tab
11. Expand the appearance section and under the ItemListTemplatePath property, enter this path:

~\Sitefinity\ControlTemplates\Events\ContentViewItemView.ascx

11. Click I'm done
12. Click Publish or Save, depending on the workflow settings.

If workflow is turned on, make sure that the page is approved and later published.

Obtaining an Google Merchant ID and a Google Merchant Key

For this example, we will use the Google Sandbox to do test sales. This will ensure that the orders are not processed while we do custom development. As with most 3rd party applications, you must obtain a user name and password to use their API. Often times, this is known as an API key with a special secret key. To obtain this info, please visit Google Checkout's website.

When this is complete, enter the data into the app settings keys of your application. If you'd like to use this in a production envionment, you must change the App Settings Environment variable to production and obtain a production Merchant ID and Merchant key.

Create Events with a Price

Once this is complete, login to the CMS and click Modules > Events. Create some new events and add a price for them.

Checking out with Google

Now that this code has been inserted and you have events with prices, here is the end result:

Explaining the code

Google uses a special button control along with a method called AddItem. This method redirects the user to a URL, based on the product name, price and quantity. In this case, I passed the Event's meta data into this method. To get that data, I extracted the event's ID and passed the parameters into the EventManager's GetContent method. Here is the annotated code:

    using Telerik.Events;  
 using Telerik.Cms.Engine;  
 using GCheckout.Checkout;  
 using GCheckout.Util;  
   
 public partial class Sitefinity_ControlTemplates_Events_ContentViewItemView : System.Web.UI.UserControl  
 {  
     protected void Page_Load(object sender, EventArgs e)  
     {  
   
     }  
     public void repeater_ItemDataBound(object sender, RepeaterItemEventArgs e)  
     {  
         //Assign the event ID to the button's command argument, so it can be used later  
         if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)  
         {  
             EventsManager manager = new EventsManager("Events");  
             IContent content = (IContent)e.Item.DataItem;  
             GCheckoutButton button = (GCheckoutButton)e.Item.FindControl("GCheckoutButton1");  
             if (button != null)  
             {  
                 button.CommandName = "Select";  
                 button.CommandArgument = content.ID.ToString();  
                 //Subscribe to the button's click event  
                 button.Click += new ImageClickEventHandler(button_Click);  
             }  
         }  
     }  
   
     void button_Click(object sender, ImageClickEventArgs e)  
     {  
         //Since this button is inside of a repeater, you must cast the sender object as a Google Checkout button  
         GCheckoutButton GCheckoutButton1 =  (GCheckoutButton)sender;  
         //Get the ID of the event  
         Guid EventID = new Guid(GCheckoutButton1.CommandArgument);  
         if (EventID != null)  
         {  
             EventsManager manager = new EventsManager("Events");  
             IContent content = manager.Content.GetContent(EventID);  
             //Pass the event's name, description, left null here, price and quanity to Google Checkout  
             CheckoutShoppingCartRequest Req = GCheckoutButton1.CreateRequest();  
             Req.AddItem(content.GetMetaData("Title").ToString(), String.Empty, Convert.ToDecimal(content.GetMetaData("Price")), 1);  
             GCheckoutResponse Resp = Req.Send();  
             //Report any errors  
             if (Resp.IsGood)  
             {  
                 Response.Redirect(Resp.RedirectUrl, true);  
             }  
             else  
             {  
                 Response.Write("ResponseXml = " + Resp.ResponseXml + "<br>");  
                 Response.Write("ErrorMessage = " + Resp.ErrorMessage + "<br>");  
             }   
         }  
     }  
 }  
  

For more information about Google Checkout, please read Getting Started with Google Checkout. For more info on the Event's module's API please red our Developer Manual.