Sitefinity 4.1 Custom Widget

Posted by Community Admin on 28-Jun-2011 00:00

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

Posted by Community Admin on 28-Jun-2011 00:00

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

Posted by Community Admin on 29-Jun-2011 00:00

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

Posted by Community Admin on 29-Jun-2011 00:00

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

Posted by Community Admin on 29-Jun-2011 00:00

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

Posted by Community Admin on 29-Jun-2011 00:00

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

Posted by Community Admin on 30-Jun-2011 00:00

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

Posted by Community Admin on 30-Jun-2011 00:00

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

Posted by Community Admin on 30-Jun-2011 00:00

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

Posted by Community Admin on 30-Jun-2011 00:00

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

Posted by Community Admin on 30-Jun-2011 00:00

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

Posted by Community Admin on 30-Jun-2011 00:00

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'

Posted by Community Admin on 30-Jun-2011 00:00

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

Posted by Community Admin on 22-Jul-2011 00:00

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

Posted by Community Admin on 25-Jul-2011 00:00

Hello

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

cheers

Andrew

This thread is closed

All Replies