Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Testimonials module: Create the widget designer for the Testimonials view

After you Testimonials module: Create the backend view of the Testimonials module, you need to create the frontend view. You start by creating the widget designer of the view:

Create the custom widget

To create the class for the view, perform the following:

  1. In Visual Studio, open the context menu of folder ControlDesigners and click Add » Class...

  2. In the Name input field, enter TestimonialsViewDesigner.
  3. Add the following namespaces in the new class:
    using System.Collections.Generic;
    using System.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Web.UI.Fields;
  4. Change the class definition to:
    public class TestimonialsViewDesigner : ControlDesignerBase
    {
     
    }
  5. Save the file.

Create the template

To create the template of the designer view, perform the following:

  1. In the context menu of folder ControlDesigners, click Add » Class...
  2. In the Name input field, enter TestimonialsViewDesignerTemplate.ascx and click Add.
  3. Open the newly created file and clear its content.
  4. Define the markup by pasting the following code:
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
    <sitefinity:FormManager ID="formManager" runat="server" />
     
    <div class="sfContentViews">
        <div id="RotatorOptions">
            <div>
                <div id="groupSettingPageSelect">
                        <ul class="sfTargetList">
                            <li>
                                <label for="Count" class="sfTxtLbl">Testimonials Count</label>
                                <input type="text" id="Count" class="sfTxt" />
                            </li>
                            <li>
                                <label for="DetailsPage" class="sfTxtLbl">Details Page</label>
                                <sf:PageField ID="PageSelector" runat="server" WebServiceUrl="~/Sitefinity/Services/Pages/PagesService.svc/" DisplayMode="Write" />
                            </li>
                        </ul>
                </div>
            </div>
        </div>
    </div>
  5. Save the file.

In the markup above, you define a field for testimonials count.

Implement the ControlDesignerBase class

To implement the ControlDesignerBase class in TestimonialsViewDesigner.cs, perform the following:

  1. Reference the embedded template by pasting the following code into TestimonialsViewDesigner.cs:
    private string _layoutTemplatePath = "~/Modules/Testimonials/ControlDesigners/TestimonialsViewDesignerTemplate.ascx";
     
    public override string LayoutTemplatePath
    {
        get { return _layoutTemplatePath; }
        set { _layoutTemplatePath = value; }
    }
     
    protected override string LayoutTemplateName
    {
        get { return null; }
    }
  2. Override the InitializeControls method by pasting the following code:
    protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
    {
        base.DesignerMode = ControlDesignerModes.Simple;
     
        PageSelector.RootNodeID = Telerik.Sitefinity.Abstractions.SiteInitializer.FrontendRootNodeId;
    }
     
    protected PageField PageSelector
    {
        get { return Container.GetControl<PageField>("PageSelector", true); }
    }
  3. Save the file.

Implement the client component

You must store the client class in a JavaScript file in the project. The view is located in this file.

To create the file:

  1. In the context menu of folder ControlDesigners, click Add » New Item...
  2. In the left pane, select Visual C# Items » Web.<
  3. Click JScript File and in the Name input field, enter TestimonialsViewDesigner.
  4. Open the newly created file.
  5. Add the following code to it:
    Type.registerNamespace("SitefinityWebApp.Modules.Testimonials.ControlDesigners");
     
    SitefinityWebApp.Modules.Testimonials.ControlDesigners.TestimonialsViewDesigner = function (element) {
        SitefinityWebApp.Modules.Testimonials.ControlDesigners.TestimonialsViewDesigner.initializeBase(this, [element]);
        this._PageSelector = null;
    }
     
     
    SitefinityWebApp.Modules.Testimonials.ControlDesigners.TestimonialsViewDesigner.prototype = {
        initialize: function () {
            SitefinityWebApp.Modules.Testimonials.ControlDesigners.TestimonialsViewDesigner.callBaseMethod(this, 'initialize');
     
        },
        dispose: function () {
            SitefinityWebApp.Modules.Testimonials.ControlDesigners.TestimonialsViewDesigner.callBaseMethod(this, 'dispose');
        },
        refreshUI: function () {
            var data = this._propertyEditor.get_control();
     
            // load max testimonials count
            jQuery("#Count").val(data.Count);
     
            // load selected details page (if any)
            var p = this.get_PageSelector();
            var pageid = data.DetailsPageID;
            if (pageid) p.set_value(pageid);
     
            // resize dialog handlers
            p.add_selectorOpened(this._resizeControlDesigner);
            p.add_selectorClosed(this._resizeControlDesigner);
        },
        applyChanges: function () {
            var controlData = this._propertyEditor.get_control();
     
            // save max testimonials count
            controlData.Count = jQuery("#Count").val();
     
            // save selected details page
            controlData.DetailsPageID = this.get_PageSelector().get_value();
        },
     
        // Page Selector
        get_PageSelector: function () {
            return this._PageSelector;
        },
        set_PageSelector: function (value) {
            this._PageSelector = value;
        },
     
        // function to initialize resizer methods and handlers
        _resizeControlDesigner: function () {
            setTimeout("dialogBase.resizeToContent()", 100);
        }
    }
     
    SitefinityWebApp.Modules.Testimonials.ControlDesigners.TestimonialsViewDesigner.registerClass('SitefinityWebApp.Modules.Testimonials.ControlDesigners.TestimonialsViewDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
  6. Save the file.

For more information, see Overview: Widget designers.

Reference the client script

You must reference the client component from the view class. You do this by overriding for the GetScriptReferences method. You must create a script reference in the method for your client component. When creating the reference, you must specify the name of the embedded resource that contains the client component and the assembly it resides in. The name of the resource follows the same naming conventions as the name of the template. Use the following code in the GetScriptReferences method:

private string _scriptPath = "~/Modules/Testimonials/ControlDesigners/TestimonialsViewDesigner.js";
 
public string DesignerScriptPath
{
    get { return _scriptPath; }
    set { _scriptPath = value; }
}
 
public override IEnumerable<ScriptReference> GetScriptReferences()
{
    var scripts = base.GetScriptReferences() as List<ScriptReference>;
    if (scripts == null) return base.GetScriptReferences();
 
    scripts.Add(new ScriptReference(DesignerScriptPath));
    return scripts.ToArray();
}
 
public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    var descriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
    var descriptor = (ScriptControlDescriptor)descriptors.Last();
    descriptor.AddComponentProperty("PageSelector", this.PageSelector.ClientID);
    return descriptors;
}
 

Back To Top

Next: Testimonials module: Create the Testimonials view