Developers Guide

Creating the products view control designer

Creating the custom control

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

  1. From the context menu of folder Web » UI » Public » Designers, click Add » Class...

  2. In the Name input field, enter CustomSettingsDesignerView.

  3. Open the file in Visual Studio and add the following namespaces:

    using System.Web.UI;
    using Telerik.Sitefinity.Modules.Pages;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Web.UI.Fields;

  4. Change the class definition to:

    public class CustomSettingsDesignerView : ContentViewDesignerView
    {
    }

  5. Save the file.

Creating the template

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

  1. In the context menu of folder Web » UI » Public » Designers, click Add » New Item...

  2. From the dialog click Visual C# » Code » Code File.

  3. In the Name input field, enter CustomSettingsDesignerView.ascx and click Add.

  4. Open the newly created file and clear its content.

  5. Define the markup by pasting the following code:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sfFields" Namespace="Telerik.Sitefinity.Web.UI.Fields" %>
     
    <ul class="sfRadioList sfTitledList">
      <li>
         <sfFields:ChoiceField ID="hidePrice" runat="server"
                             CssClass="sfInlineWrapper"
                             DataFieldName="HidePriceOnFrontend"
                             DisplayMode="Write"
                             RenderChoicesAs="SingleCheckBox">
         <Choices>
            <sfFields:ChoiceItem Text="Hide price on products" />
         </Choices>
        </sfFields:ChoiceField>
      </li>
    </ul>

  6. Save the file.

  7. In the Properties pane of the CustomSettingsDesignerView.ascx file, change the Build Action to Embedded Resource.

In the markup, first, you register the necessary assemblies, so that they can be used in the template. Then, you define a field for hiding the prices on products.

Implementing the ContentViewDesignerView class

To implement the ContentViewDesignerView class in your view, perform the following:

  1. Reference the embedded template by pasting the following code into CustomSettingsDesignerView.cs:

    protected override string LayoutTemplateName
    {
        get
        {
            return null;
        }
    }
     
    public override string LayoutTemplatePath
    {
        get
        {
            return ProductsModule.ProductsVirtualPath + "ProductsModule.Web.UI.Public.Designers.CustomSettingsDesignerView.ascx";
        }
        set
        {
            base.LayoutTemplatePath = value;
        }
    }

  2. Provide reference to the controls in the template by pasting the following code:

    protected virtual ChoiceField HidePriceControl
    {
        get
        {
            return this.Container.GetControl<ChoiceField>("hidePrice", true);
        }
    }

  3. Define the necessary properties by pasting the following code:

    public bool HidePrice
    {
        get;
        set;
    }
     
    public override string ViewName
    {
        get
        {
            return "customViewSettings";
        }
    }
     
    public override string ViewTitle
    {
        get
        {
            return "Custom Settings";
        }
    }

  4. Save the file.

To reference the controls from the CustomSettingsDesignerView.ascx you must call GetControl and returning the controls’ values.

Implementing the client component

You must store the client class in a javascript file in the project, where the view resides.

To create the file, perform the following:

  1. In the context menu of folder Web » UI » Public » Designers, 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 CustomSettingsDesignerView.

  4. Open the newly created file.

  5. Add the following code to it:

    /// <reference name="MicrosoftAjax.js"/>
    /// <reference name="Telerik.Sitefinity.Resources.Scripts.jquery-1.4.2-vsdoc.js" assembly="Telerik.Sitefinity.Resources"/>
     
    Type._registerScript("CustomSettingsDesignerView.js", ["IDesignerViewControl.js"]);
    Type.registerNamespace("ProductsModule.Web.UI.Public.Designers");
     
     
    ProductsModule.Web.UI.Public.Designers.CustomSettingsDesignerView = function (element) {
        ProductsModule.Web.UI.Public.Designers.CustomSettingsDesignerView.initializeBase(this, [element]);
        this._controldataFieldNameMap = {};
        this._parentDesigner = null;
        this._refreshing = false;
        this._onLoadDelegate = null;
        this._onUnloadDelegate = null;
        this._hidePriceControlId = null;
        this._hidePriceControlDataFieldName = null;
    }
     
    ProductsModule.Web.UI.Public.Designers.CustomSettingsDesignerView.prototype = {
     
        /* --------------------------------- set up and tear down --------------------------------- */
     
        initialize: function () {
            ProductsModule.Web.UI.Public.Designers.CustomSettingsDesignerView.callBaseMethod(this, 'initialize');
     
            if (this._onLoadDelegate == null) {
                this._onLoadDelegate = Function.createDelegate(this, this._onLoad);
            }
            if (this._onUnloadDelegate == null) {
                this._onUnloadDelegate = Function.createDelegate(this, this._onUnload);
            }
            Sys.Application.add_load(this._onLoadDelegate);
            Sys.Application.add_unload(this._onUnloadDelegate);
     
            // prevent memory leaks for jQuery
            $(this).unload(function () {
                jQuery.event.remove(this);
                jQuery.removeData(this);
            });
        },
     
        dispose: function () {
            //Add custom dispose actions here
            ProductsModule.Web.UI.Public.Designers.CustomSettingsDesignerView.callBaseMethod(this, 'dispose');
            if (this._valueUpdatedDelegate) {
                delete this._valueUpdatedDelegate;
            }
            if (this._templateValueChangedDelegate) {
                delete this._templateValueChangedDelegate;
            }
            if (this._onLoadDelegate) {
                delete this._onLoadDelegate;
            }
            if (this._onUnloadDelegate) {
                delete this._onUnloadDelegate;
            }
        },
     
        /* --------------------------------- public methods --------------------------------- */
     
        refreshUI: function () {
            this._refreshing = true;
            var control = this.get_controlData();
            var field = $find(this._hidePriceControlId);
            field.set_value(control.HidePrices);
     
            this._refreshing = false;
        },
     
        applyChanges: function () {
            var control = this.get_controlData();
            var field = $find(this._hidePriceControlId);
            control.HidePrices = field.get_value();
     
        },
     
        /* --------------------------------- private methods --------------------------------- */
     
        // this method is executed when the page loads
        _onLoad: function () {
     
        },
     
        _onUnload: function () {
     
        },
     
     
        get_hidePriceControlId: function () {
            return this._hidePriceControlId;
        },
     
        set_hidePriceControlId: function (value) {
            this._hidePriceControlId = value;
        },
     
        get_hidePriceControlDataFieldName: function () {
            return this._hidePriceControlDataFieldName;
        },
     
        set_hidePriceControlDataFieldName: function (value) {
            this._hidePriceControlDataFieldName = value;
        },
     
        // gets the reference to the parent designer control
        get_parentDesigner: function () {
            return this._parentDesigner;
        },
     
        // sets the reference fo the parent designer control
        set_parentDesigner: function (value) {
            this._parentDesigner = value;
        },
     
     
        // gets the name of the currently selected master view name of the content view control
        get_currentViewName: function () {
            return (this._currentViewName) ? this._currentViewName : this.get_controlData().MasterViewName;
        },
     
        // gets the client side representation of the currently selected master view definition
        get_currentView: function () {
            var currentViewName = this.get_currentViewName();
            var data = this.get_controlData();
            var views = data.ControlDefinition.Views;
            if (views.hasOwnProperty(currentViewName)) {
                return views[currentViewName];
            }
            else {
                var views = data.ControlDefinition.Views;
                for (var v in views) {
                    var current = views[v];
                    if (current.IsMasterView) {
                        return current;
                    }
                }
                return null;
            }
        },
     
        // this fixes the data if there are some incompatible values set in advanced mode
        _adjustControlData: function (data) {
            var view = data.ControlDefinition.Views[this.get_currentViewName()];
            if (!view) {
                var views = data.ControlDefinition.Views;
                var viewName;
                for (var key in views) {
                    if (views[key].IsMasterView) {
                        viewName = key;
                        break;
                    }
                }
                data.MasterViewName = viewName;
            }
        },
     
        _resolvePropertyPath: function (fieldControl) {
            var dataFieldName = this._hidePriceControlDataFieldName;
            var viewPath = "ControlDefinition.Views['" + this.get_currentViewName() + "']";
            return viewPath;
        },
     
        // gets the object that represents the client side representation of the control
        // being edited
        get_controlData: function () {
            var parent = this.get_parentDesigner();
            if (parent) {
                var pe = parent.get_propertyEditor();
                if (pe) {
                    return pe.get_control();
                }
            }
            alert('Control designer cannot find the control properties object!');
        }
     
    }
    ProductsModule.Web.UI.Public.Designers.CustomSettingsDesignerView.registerClass('ProductsModule.Web.UI.Public.Designers.CustomSettingsDesignerView', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);
     
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

    Save the file.

  6. In the Properties pane of the CustomSettingsDesignerView.js file, change the Build Action to Embedded Resource.

For more information, see Working with control designers.

Referencing the client script

You must reference the client component from the view class. You do this in the override for the GetScriptReference method. In it you must create a script reference 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.

public override IEnumerable<ScriptReference> GetScriptReferences()
{
    var res = PageManager.GetScriptReferences(ScriptRef.JQuery);
    var assemblyName = this.GetType().Assembly.GetName().ToString();
    var telerikAssemblyName = typeof(Telerik.Sitefinity.Web.UI.Fields.TextField).Assembly.GetName().FullName;
 
    res.Add(new ScriptReference("Telerik.Sitefinity.Web.UI.ControlDesign.Scripts.IDesignerViewControl.js", telerikAssemblyName));
    res.Add(new ScriptReference("ProductsModule.Web.UI.Public.Designers.CustomSettingsDesignerView.js", assemblyName));
    return res;
}

You must specify a script descriptor for the view. This is done in the GetScriptDescriptors override.

public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
    ScriptControlDescriptor desc = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);
 
    desc.AddProperty("hidePriceControlId", this.HidePriceControl.ClientID);
    desc.AddProperty("hidePriceControlDataFieldName", this.HidePriceControl.DataFieldName);
 
    return new[] { desc };
}

Creating the multi view designer

To define the multi view designer and add the designer view that you created in this section, perform the following:

  1. From the context menu of folder Web » UI » Public » Designers, click Add » Class...

  2. In the Name input field, enter ProductsDesigner.

  3. Open the file in Visual Studio and add the following namespaces:

    using ProductCatalogSample.Model;
    using System.Collections.Generic;
    using Telerik.Sitefinity.Localization;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.GenericContent.Model;
    using Telerik.Sitefinity.Configuration;
    using Telerik.Sitefinity.Web.Configuration;

  4. Change the class definition to:

    public class ProductsDesigner : ContentViewDesignerBase
    {
    }

  5. To specify the designer views in the multi view control designer paste the following code:

    protected override void AddViews(Dictionary<string, ControlDesignerView> views)
    {
        var resources = Res.Get<ProductsResources>();
        var contentSelectorsSettings = new ContentSelectorsDesignerView();
        contentSelectorsSettings.ContentTitleText = resources.DesignerContentTitleText;
        contentSelectorsSettings.ChooseAllText = resources.DesignerChooseAllText;
        contentSelectorsSettings.ChooseSingleText = resources.DesignerChooseSingleText;
        contentSelectorsSettings.ChooseSimpleFilterText = resources.DesignerChooseSimpleFilterText;
        contentSelectorsSettings.ChooseAdvancedFilterText = resources.DesignerChooseAdvancedFilterText;
        contentSelectorsSettings.NoContentToSelectText = resources.DesignerNoContentToSelectText;
        contentSelectorsSettings.ContentSelector.TitleText = resources.DesignerContentSelectorTitleText;
        contentSelectorsSettings.ContentSelector.ItemType = typeof(ProductItem).FullName;
     
        var singleItemSettings = new SingleItemSettingsDesignerView();
        singleItemSettings.DesignedDetailViewType = typeof(ProductDetailsView).FullName;
     
        var customSettings = new CustomSettingsDesignerView();
        customSettings.HidePrice = true;
     
        views.Add(singleItemSettings.ViewName, singleItemSettings);
        views.Add(customSettings.ViewName, customSettings);
    }

  6. Implement the required methods by pasting the following code:

    protected override string ScriptDescriptorTypeName
    {
        get
        {
            return typeof(ContentViewDesignerBase).FullName;
        }
    }
     
    protected override System.Type ResourcesAssemblyInfo
    {
        get
        {
            return Config.Get<ControlsConfig>().ResourcesAssemblyInfo;
        }
    }

  7. Save the file.

In the AddViews method you add the views for the products control designer to the views argument it receives. In the Products module you reuse some of the built-in views.

Next steps

+1-888-365-2779
sales@sitefinity.com

Related topics:

Feedback

How useful is this article?

Tell us more

Submit
Your message was successfully sent.

We appreciate your feedback.

Your message could not be sent.

OK