+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Command Panel: Creating command panel from User Control

by Ivan Osmak

[This post is part of the developer's manual preview published on this blog. You can find temporary TOC here.]
 

As it was already stated, the new backend architecture of Sitefinity 3.6 allows various implementations of the command panels. We’ve seen already how to take advantage of the automatic command generation and manual command generation. In this article we are going to explore how to create a command panel from a User Control.

 

User Control command panels are generally used with intra site module, where all the Views are based on User Controls. The main advantage of the User Control based command panel is the fact that we can use any User Control as a command panel as long as we implement ICommandPanel interface on it.

 

Note that, while you will be able to create a command panel in Visual Studio by simply dragging and dropping controls on the canvas and wiring events as you would for any other user control, this flexibility also means that you will have to implement every aspect of the command panel yourself. For example, you will have to manually assign the commands to the hyperlinks.

 

In the sample for this article we are going to add a User Control based command panel to our sample books module. The command panel will simply display a YouTube video and have a link to a book sales View of the module. While, the YouTube video is really not something we would need in a command panel, the idea is to show that you are not limited in any way when creating User Control based command panel. The final result of our command panel can be seen on the screenshot below:

Creating the user control


When creating a User Control based command panel, the first step is to implement the User Control which will be used as a command panel. Create a folder in your Sitefinity website and create a new User Control inside of it (mark “Place code in separate file” checkbox).

 

Now that you have created your user control, create the user interface by dragging the controls you will use. The markup for the sample command panel from the screenshot looks like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyCommandPanel.ascx.cs" Inherits="MyControls_MyCommandPanel" %> 
 
<object width="120" height="101"
    <param name="movie" value="http://www.youtube.com/v/mgDo0U6I2K8&hl=en&fs=1&color1=0x006699&color2=0x54abd6"></param> 
    <param name="allowFullScreen" value="true"></param> 
    <param name="allowscriptaccess" value="always"></param> 
    <embed src="http://www.youtube.com/v/mgDo0U6I2K8&hl=en&fs=1&color1=0x006699&color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="120" height="101"></embed> 
</object> 
<br /> 
<asp:HyperLink ID="booksSalesView" runat="server" Text="Books sales" Font-Bold="true"></asp:HyperLink> 
 
Nothing that you would not expect in a User Control; we have an embedded YouTube video object and a HyperLink control.

 

Now, open the the code behind file and make sure you at least implement ICommandPanel interface on the control. If you will be wiring commands for the Views it is also a good idea to inherit from ViewModeUserControl as opposed from UserControl base class. The code behind implementation for our sample command panel looks like this:

using System; 
using Samples.Books.WebControls; 
using Telerik.Cms.Web.UI; 
using Telerik.Web; 
 
public partial class MyControls_MyCommandPanel : ViewModeUserControl<BooksControlPanel>, ICommandPanel 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        booksSalesView.NavigateUrl = CreateRootViewCommand(typeof (BooksControlPanel), typeof (BooksSalesView)); 
    } 
 
    /// <summary> 
    /// Not implemented on the user control command panel 
    /// </summary> 
    public void Refresh() 
    { 
        throw new System.NotImplementedException(); 
    } 
 
    /// <summary> 
    /// Name for the command panel. 
    /// </summary> 
    public override string Name 
    { 
        get 
        { 
            return "MyCommandPanel"
        } 
    } 
 
    /// <summary> 
    /// Title of the command panel. 
    /// </summary> 
    public override string Title 
    { 
        get 
        { 
            return "My command panel"
        } 
    } 
 
    /// <summary> 
    /// Not implemented on the user control command panel 
    /// </summary> 
    public IControlPanel ControlPanel 
    { 
        get 
        { 
            throw new System.NotImplementedException(); 
        } 
    } 
 
While, the code is self-explanatory, it is worthy to note that CommandPanels cannot take advantage of the CreateHostView methods, since they are not part of the View hierarchy. Therefore, in command panels, one should always use CreateRootCommand methods to create commands.

 

Loading the User Control based command panel


Now that we have implemented our User Control based command panel all we are left with is to load it in our control panel. We need to open our Control Panel class (BooksControlPanel in this sample) and override CreateCommandPanelsFromUserControls method in following manner:
protected override void CreateCommandPanelsFromUserControls(string viewMode, System.Collections.Generic.List<string> userControls, System.Collections.Generic.List<Telerik.Web.ICommandPanel> list) 
            if (userControls == null
                userControls = new List<string>(); 
 
            userControls.Add("~/MyControls/MyCommandPanel.ascx"); 
            base.CreateCommandPanelsFromUserControls(viewMode, userControls, list); 
 
Similarly to manually creating commands, we receive several nifty parameters through this method. First of all we receive the current view, so we can implement conditional command panel loading like demonstrated in this article.

 

The second parameter is the list of virtual paths of all the User Control based command panels. All we need to do is add the virtual path to our User Control created in the first part of this article. The third parameter gives us access to the list of all command panels already created should we need it.

 

The implementation of the method is very simple. We check if userControls list has been initialized and if not create a new instance of string list for it. Then we add a virtual path of our User Control to the list. Finally, we call the base implementation of the method and pass it the modified parameters.

Leave a comment