More in this section

Forums / Developing with Sitefinity / Extending Sitefinity Downloadlist Widget

Extending Sitefinity Downloadlist Widget

3 posts, 0 answered
  1. Mayvelous
    Mayvelous avatar
    43 posts
    Registered:
    26 May 2011
    19 Aug 2011
    Link to this post
    I'm wondering if we can extend the sitefinity built-in widget design view. What I want to do, say for "Download list", I want to add new fields "Download List Title" or "Summary" or whatever fields and have it display on the page. I still like to keep all the widget design view functionalities but just add some more fields.

    May be too easy/obvious answer but I'm still learning user controls so appreciate if someone could guide me along.
    Thanks.
  2. Svetoslav Petsov
    Svetoslav Petsov avatar
    456 posts
    Registered:
    24 Sep 2012
    23 Aug 2011
    Link to this post
    Hi May,

    You have to create a new Custom control, inheriting the DownloadList control. 
    Here are some guides on creating custom controls:
    http://www.sitefinity.com/blogs/ivan/posts/11-01-18/implementing_sitefinity_widgets_and_designers_how_to_implement_facebook_like_button.aspx
    http://www.sitefinity.com/40/help/developers-guide/sitefinity-essentials-controls-working-with-control-designers-creating-a-simple-control-designers.html
    http://www.sitefinity.com/40/help/developers-guide/how-to-how-to-create-a-simple-image-selector.html


    Basically, what you'll need to do is create a new assembly (or you can use a folder inside your SitefinityWebApp). In this assembly, you will have to add:
    1) An .ascx file which will use one (or more) of the View  templates of the current DownloadList control. You can copy the desired template code from (Design >> Widget Templates)  and add for example a Label (which will hold the title) to it. Mind that you will have to change the template of all the Views, if you want all of them to have this title displayed.
    This is the frontend template of the control.
    2)An .ascx file which will use one of the control's designer templates, extending it with a textbox (for example) which will hold the input of the title. This one of the Views that you see when you click the edit button of your widget (it has two Views currently - Settings and Documents & Files)
    3) A class that inherits from the actual control's class. This will be the file that you will use when registering your control in Sitefinity's Backend:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Sitefinity.Modules.Libraries.Web.UI.Documents;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Modules.Pages.Web.UI;
    using Telerik.Sitefinity.Web.UI.PublicControls;
     
    namespace SitefinityWebApp.Tests
    {
        [RequireScriptManager]
        [ControlDesigner(typeof(CustomDesigner))]
        [PropertyEditorTitle(typeof(PublicControlsResources), "DownloadList")]
        public class NewFrontendView : DownloadListView
        {
        }
    }
    You don't need to override anything here, the only thing that we will change is the designer that this control is associated with ( [ControlDesigner(typeof(CustomDesigner))]).
    4) A  class that inherits from the designer of the DownloadList control:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;
     
    namespace SitefinityWebApp.Tests
    {
        public class CustomDesigner : DownloadListDesigner
        {
            protected override void AddViews(Dictionary<string, Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerView> views)
            {
                var selectorView = new MyView();
                var settingsView = new DownloadListSettingsDesignerView();
                views.Add(selectorView.ViewName, selectorView);
                views.Add(settingsView.ViewName, settingsView);
            }
        }
    }

    As I've already said, the designer has two Views, and you will edit one of them. So, you will have to override the AddViews method of the Designer, changing one of the views to your own (MyView).

    5)A class that gets the template of your new view and inherits from the Documents & Files View:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;
    using Telerik.Sitefinity.Web.UI;
     
    namespace SitefinityWebApp.Tests
    {
        public class MyView : DownloadListSelectorDesignerView
        {
            public static readonly string newTemplatePath = "~/MyControls/SitefinityWebApp.Tests.NewTemplate.ascx";
     
            public override string LayoutTemplatePath
            {
                get
                {
                    if (string.IsNullOrEmpty(this.layoutTemplatePath))
                        return this.layoutTemplatePath = newTemplatePath;
                    return this.layoutTemplatePath;
                }
                set
                {
                    this.layoutTemplatePath = value;
                }
            }
     
            private string layoutTemplatePath;
        }
    }

    As you can see, here I'm giving the designer its new View by a relative path. In order for Sitefinity to use this path, you will have to register it from Settings >> Advanced >> VirtualPathSettings

    6) A .js file that gets the value of the textbox inside the designer and sets it to a property of your control's class, which is then called by the template and bound to the Literal. More information on how to create this javascript file and wire it to the control, you can find in the demos i provided in the beginning of the page.

    7) Register the custom control and use it (this can also be found in the demos)
      All the best,
    Svetoslav Petsov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. Webteam
    Webteam avatar
    28 posts
    Registered:
    30 Nov 2009
    16 Jan 2012
    Link to this post
    Did you get this to work?  We are trying to do the exact same thing but I can't get the javascript binding to work.  If you did get a title or summary working for the download list could you post your solution?
3 posts, 0 answered