1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Sitefinity 4.1 Custom Widget

Sitefinity 4.1 Custom Widget

15 posts, 0 answered
  1. andrew
    andrew avatar
    13 posts
    Registered:
    02 Jul 2012
    28 Jun 2011
    Link to this post
    Help!!
    I am creating a widget to:

    Alow the user to enter a heading
    Alow the user to select or upload and image
    Allow the user to enter a paragraph, which is displayed below the image

    I have gone through the tutorials, which are very good, but dont help me with my problem

    Can you point me in the right direction?

    Id be very greatful

    Thanks

    Andrew



  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    28 Jun 2011
    Link to this post
    Hello andrew,

    Why don't you use ContentBlock? From the description you provided it appeared that it had all features you need.

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. andrew
    andrew avatar
    13 posts
    Registered:
    02 Jul 2012
    29 Jun 2011
    Link to this post
    Hi

    Thanks for the reply.

    I need the control to ONLY allow the user to enter a title, image and text description. I can't have the user being able to enter anything, just the pre designed content type and amount

    Andrew
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    29 Jun 2011
    Link to this post
    Hi andrew,

    You can crate a control designer which has the fields you want. Then you can persist these fields as a control properties or using the specific module API you can work with a content object.

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. andrew
    andrew avatar
    13 posts
    Registered:
    02 Jul 2012
    29 Jun 2011
    Link to this post
    Hi

    so I currently have

    a new project called category
    a category.ascx file and a catagory.cs file, with references the ascx file as a template
    (following the empty customer control tutorial)


    I need a text input, and text editor and a image uploader/selecter in the back end

    Can you please let me know what files I need to add to this inorder to get this up and running?


    Regards

    Andrew
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    29 Jun 2011
    Link to this post
    Hi andrew,

    If you have control designer you can add TextBox, HtmlField, MediaContentSelectorView and MediaContentUploaderView in it.

    <%@ Control Language="C#"   %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="designers" Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI"
        TagPrefix="sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
     
     
     
    This is my TextBox
    <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
     
    <sfFields:FormManager ID="formManager" runat="server" />
    <div id="editView" class="sfContentBlocksDesignerWrp">
        <sfFields:HtmlField
            ID="htmlTextControl"
            runat="server"
            Width="99%"
            Height="370px"
            EditorContentFilters="DefaultFilters"
            EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
            DisplayMode="Write"
            FixCursorIssue="True">
        </sfFields:HtmlField>
     
       
     
     
      <sf:MediaContentUploaderView id="uploaderView" runat="server"></sf:MediaContentUploaderView>
    <sf:MediaContentSelectorView
        id="selectorView"
        runat="server"
        ContentType="Telerik.Sitefinity.Libraries.Model.Document"
        ParentType="Telerik.Sitefinity.Libraries.Model.DocumentLibrary"
        LibraryBinderServiceUrl="~/Sitefinity/Services/Content/DocumentLibraryService.svc/"
        MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/DocumentService.svc/"
        MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Documents.DocumentItemDescriptionTemplate.htm"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="false">
    </sf:MediaContentSelectorView>

    Then reference the controls in the designer class

    protected virtual TextBox textBox
    {
        get
        {
            return this.Container.GetControl<TextBox>("TextBox1", true);
        }
    }
     
     
     
    protected virtual MediaContentSelectorView MediaContentSelector
    {
        get
        {
            return this.Container.GetControl<MediaContentSelectorView>("selectorView", true);
        }
    }
     
    protected virtual HtmlField HtmlEditorControl
    {
        get
        {
            return this.Container.GetControl<HtmlField>("htmlTextControl", true);
        }
    }
     
    protected virtual MediaContentUploaderView UploaderView
    {
        get
        {
            return this.Container.GetControl<MediaContentUploaderView>("uploaderView", true);
        }
    }

    and add them to the client component so you can get/set values.

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. andrew
    andrew avatar
    13 posts
    Registered:
    02 Jul 2012
    30 Jun 2011
    Link to this post
    Hi
    thanks for you help, I think i must be missing something because Im still not seeing any editor?!

    Heres what I have so far



    CatergoryControl.ascx
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="designers" Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI"
        TagPrefix="sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
      
      
      
    This is my TextBox
    <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
      
    <sfFields:FormManager ID="formManager" runat="server" />
    <div id="editView" class="sfContentBlocksDesignerWrp">
        <sfFields:HtmlField
            ID="htmlTextControl"
            runat="server"
            Width="99%"
            Height="370px"
            EditorContentFilters="DefaultFilters"
            EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
            DisplayMode="Write"
            FixCursorIssue="True">
        </sfFields:HtmlField>
      
        
      
      
      <sf:MediaContentUploaderView id="uploaderView" runat="server"></sf:MediaContentUploaderView>
    <sf:MediaContentSelectorView
        id="selectorView"
        runat="server"
        ContentType="Telerik.Sitefinity.Libraries.Model.Document"
        ParentType="Telerik.Sitefinity.Libraries.Model.DocumentLibrary"
        LibraryBinderServiceUrl="~/Sitefinity/Services/Content/DocumentLibraryService.svc/"
        MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/DocumentService.svc/"
        MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Documents.DocumentItemDescriptionTemplate.htm"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="false">
    </sf:MediaContentSelectorView>


    CatergoryControl.js
    Type.registerNamespace("CatergoryControl");
     
    CatergoryControl.CatergoryControlDesigner = function (element) {
        CatergoryControl.CatergoryControlDesigner.initializeBase(this, [element]);
    }
     
    NewsRotator.RotatorDesigner.prototype = {
        initialize: function () {
            CatergoryControl.CatergoryControlDesigner.callBaseMethod(this, 'initialize');
        },
        dispose: function () {
            CatergoryControl.CatergoryControlDesigner.callBaseMethod(this, 'dispose');
        },
        refreshUI: function () {
            var controlData = this.get_controlData();
     
            jQuery("#txtTitle").val(controlData.Title);
        },
        applyChanges: function () {
     
            var controlData = this.get_controlData();
     
            controlData.Title = jQuery("#txtTitle").val();
        },
        get_controlData: function () {
            return this.get_propertyEditor().get_control();
        },
        get_propertyEditor: function () {
            return this._propertyEditor;
        }
    }
     
    NewsRotator.RotatorDesigner.registerClass('CatergoryControl.CatergoryControlDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    CatergoryControlDesigner.cs

    using Telerik.Sitefinity.Web.UI.ControlDesign;
     
    public class CatergoryControlDesigner : ControlDesignerBase
    {
        protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
        {
            base.DesignerMode = ControlDesignerModes.Simple;
        }
     
        protected override string LayoutTemplateName
        {
            get
            {
                return "CatergoryControl.Resources.Views.CatergoryControlDesigner.ascx";
            }
        }
     
        public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
        {
            var res = new List<System.Web.UI.ScriptReference>(base.GetScriptReferences());
            var assemblyName = this.GetType().Assembly.GetName().ToString();
            res.Add(new System.Web.UI.ScriptReference("CatergoryControl.Resources.CatergoryControlDesigner.js", assemblyName));
            return res.ToArray();
        }
     
     
     
     
     
     
     
     
     
     
        protected virtual TextBox textBox
        {
            get
            {
                return this.Container.GetControl<TextBox>("TextBox1", true);
            }
        }
     
     
     
        protected virtual MediaContentSelectorView MediaContentSelector
        {
            get
            {
                return this.Container.GetControl<MediaContentSelectorView>("selectorView", true);
            }
        }
     
        protected virtual HtmlField HtmlEditorControl
        {
            get
            {
                return this.Container.GetControl<HtmlField>("htmlTextControl", true);
            }
        }
     
        protected virtual MediaContentUploaderView UploaderView
        {
            get
            {
                return this.Container.GetControl<MediaContentUploaderView>("uploaderView", true);
            }
        }
     
     
     
     
     
     
    }

    Im not getting any errors, but I am not seeing any editors either

    Can you see where I am going wrong?


    Thank you

    Andrew
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    30 Jun 2011
    Link to this post
    Hello Andrew,

    You should override LayoutTemplateName and LayoutTemplatePath

    sample

            protected override string LayoutTemplateName
            {
                get { return null; }
            }

            public override string LayoutTemplatePath
            {
                get
                {
                    return layoutTemplatePath;
                }
               
            }

    private const string layoutTemplatePath = "~/SfSamples/Telerik.Sitefinity.Samples1.Resources.SimpleViewCustomDesigner.ascx";

    where you use Virtual Path Provider for setting the template of the desgner that should be build as embedded resource. You should also build the client component as an embedded resource.

    Check for some js errors - if there are any, then the problem is inside your client component.

    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. andrew
    andrew avatar
    13 posts
    Registered:
    02 Jul 2012
    30 Jun 2011
    Link to this post
    I thin Im getting somewhere now because it seems to be fireing And the control is giving me the exception from
    protected override void InitializeControls(GenericContainer container)
            {
                throw new NotImplementedException();
            }

    it says in the docs that i "must address the UI elements"

    how can I get this to run simply to test the back end editors are working, and they I can get the UI values etc?


    Thanks for all you help on this, Really impressed with you and telerik for you support.

    Cheers

    Andrew
  10. andrew
    andrew avatar
    13 posts
    Registered:
    02 Jul 2012
    30 Jun 2011
    Link to this post
    As above: Here is my current progress:



    Directory:

    CategoryControl project
    CategoryControl.CS
    - Resources folder
    CategoryControl.js
    - - Views Folder (inside resources)
    CategoryControl.ascx
    CategoryControlDesigner.CS


    CategoryControl.CS
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Linq;
    using System.Text;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity.Web.UI;
     
    namespace CategoryControl
    {
        public class CategoryControl : SimpleView
        {
            protected override void InitializeControls(GenericContainer container)
            {
                //throw new NotImplementedException();
            }
     
            protected override string LayoutTemplateName
            {
                get
                {
                    return "CategoryControl.Resources.Views.CategoryControl.ascx";
                }
            }
        }
    }

    CategoryControl.js
    Type.registerNamespace("CategoryControl");
     
    CategoryControl.CategoryControlDesigner = function (element) {
        CategoryControl.CategoryControlDesigner.initializeBase(this, [element]);
    }
     
    CategoryControl.CategoryControlDesigner.prototype = {
        initialize: function () {
            CategoryControl.CategoryControlDesigner.callBaseMethod(this, 'initialize');
        },
        dispose: function () {
            CategoryControl.CategoryControlDesigner.callBaseMethod(this, 'dispose');
        },
        refreshUI: function () {
            var controlData = this.get_controlData();
     
            jQuery("#txtTitle").val(controlData.Title);
        },
        applyChanges: function () {
     
            var controlData = this.get_controlData();
     
            controlData.Title = jQuery("#txtTitle").val();
        },
        get_controlData: function () {
            return this.get_propertyEditor().get_control();
        },
        get_propertyEditor: function () {
            return this._propertyEditor;
        }
    }
     
    CategoryControl.CategoryControlDesigner.registerClass('CategoryControl.CategoryControlDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    CategoryControl.ascx
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sfFields" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="designers" Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI"
        TagPrefix="sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
       
       
       
    This is my TextBox
    <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
       
    <sfFields:FormManager ID="formManager" runat="server" />
    <div id="editView" class="sfContentBlocksDesignerWrp">
        <sfFields:HtmlField
            ID="htmlTextControl"
            runat="server"
            Width="99%"
            Height="370px"
            EditorContentFilters="DefaultFilters"
            EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
            DisplayMode="Write"
            FixCursorIssue="True">
        </sfFields:HtmlField>
       
         
       
       
      <sf:MediaContentUploaderView id="uploaderView" runat="server"></sf:MediaContentUploaderView>
    <sf:MediaContentSelectorView
        id="selectorView"
        runat="server"
        ContentType="Telerik.Sitefinity.Libraries.Model.Document"
        ParentType="Telerik.Sitefinity.Libraries.Model.DocumentLibrary"
        LibraryBinderServiceUrl="~/Sitefinity/Services/Content/DocumentLibraryService.svc/"
        MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/DocumentService.svc/"
        MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Documents.DocumentItemDescriptionTemplate.htm"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="false">
    </sf:MediaContentSelectorView>

    CategoryControlDesigner.CS

    using Telerik.Sitefinity.Web.UI.ControlDesign;
     
    public class CategoryControlDesigner : ControlDesignerBase
    {
        protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
        {
            base.DesignerMode = ControlDesignerModes.Simple;
        }
     
        protected override string LayoutTemplateName
            {
                get { return null; }
            }
     
            public override string LayoutTemplatePath
            {
                get
                {
                    return layoutTemplatePath;
                }
                
            }   
     
        private const string layoutTemplatePath = "~/CategoryControl.Resources.Views.CategoryControl.ascx";
     
        public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
        {
            var res = new List<System.Web.UI.ScriptReference>(base.GetScriptReferences());
            var assemblyName = this.GetType().Assembly.GetName().ToString();
            res.Add(new System.Web.UI.ScriptReference("CategoryControl.Resources.CategoryControl.js", assemblyName));
            return res.ToArray();
        }
     
     
     
     
     
     
     
     
     
     
        protected virtual TextBox textBox
        {
            get
            {
                return this.Container.GetControl<TextBox>("TextBox1", true);
            }
        }
     
     
     
        protected virtual MediaContentSelectorView MediaContentSelector
        {
            get
            {
                return this.Container.GetControl<MediaContentSelectorView>("selectorView", true);
            }
        }
     
        protected virtual HtmlField HtmlEditorControl
        {
            get
            {
                return this.Container.GetControl<HtmlField>("htmlTextControl", true);
            }
        }
     
        protected virtual MediaContentUploaderView UploaderView
        {
            get
            {
                return this.Container.GetControl<MediaContentUploaderView>("uploaderView", true);
            }
        }
     
     
     
     
     
     
    }


    I still can not see any editor when I drag the control into a page and press 'edit'

    Thank you

    Andrew

  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    30 Jun 2011
    Link to this post
    Hello Andrew,

    You haven't set the ControlDesigner attribute to the SimpleView based class

    [Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesigner(typeof(MyDesignerClassGoesHere))]

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. andrew
    andrew avatar
    13 posts
    Registered:
    02 Jul 2012
    30 Jun 2011
    Link to this post
    ok, iv got
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Linq;
    using System.Text;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using System.Runtime.Serialization;
    using Telerik.Sitefinity.Modules.Pages;
    using Telerik.Sitefinity.Model;
    using Telerik.Sitefinity.Taxonomies;
    using Telerik.Sitefinity;
    using System.Web.UI.HtmlControls;
     
    namespace CategoryControl
    {
        [ControlDesigner(typeof(CategoryControlDesigner))]
     
        public class CategoryControl : SimpleView
        {

    Im getting the error

    'The type or namespace 'CategoryControlDesigner' could not be found(are you missing a using directive or an assembly ref?

    Should I have a using'
  13. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    30 Jun 2011
    Link to this post
    Hi Andrew,

    This is a general ASP.NET error. You can refer to MSDN. You need to included a reference by adding using statement to the class you are registering as a control designer.

    Regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  14. andrew
    andrew avatar
    13 posts
    Registered:
    02 Jul 2012
    22 Jul 2011
    Link to this post
    Hi

    I have been trying to get this code to work with sitefinity 4.1 for the last two weeks with no look

    Is there anything else you could suggest?

    Is there any change you can build my code and see if you are having the same issue or it its something wrong other than the code?


    I Cant see how the code can be wrong as you provided much of it

    Thank you
  15. Bloommedia
    Bloommedia avatar
    10 posts
    Registered:
    18 May 2009
    25 Jul 2011
    Link to this post
    Hello

    I have now submitted a ticket for this
    Support ID:446863

    cheers

    Andrew
15 posts, 0 answered