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.

Custom Products module: Create the widget designer for the products view

After you Custom Products module: Create the products view, you create the widget designer for the view. To do so:

Create the custom widget

To create the class for the view:

  1. In Visual Studio, open the context menu of the Web folder and click UI » Public.
    Click     Add » Class...
  2. In the Name input field, enter CustomSettingsDesignerView.
  3. Open the file 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.

Create the template

To create the template of the designer view:

  1. In Visual Studio, open the context menu of the Web folder and click UI » Public.
    Click Add » New Item...
  2. 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 above, you first register the necessary assemblies, so that they can be used in the template. Then, you define a field for hiding the prices on products.

Implement the ContentViewDesignerView class

To implement the ContentViewDesignerView class in your view:

  1. Reference the embedded template by pasting the following code into the CustomSettingsDesignerView.cs file:
    protected override string LayoutTemplateName
            {
                get
                {
                    if (DesignerTemplateName != null) return DesignerTemplateName;
                    return "ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView.ascx";
                }
            }
  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:
    #region Properties
     
            /// <summary>
            /// The type name of the view used to display the designed control in master mode.
            /// </summary>
            public string DesignedMasterViewType
            {
                get;
                set;
            }
     
            /// <summary>
            /// The bool property that holds the hide/show price option
            /// </summary>
            public bool HidePrice
            {
                get;
                set;
            }
     
            #region Labels
     
     
            #endregion
     
            /// <summary>
            /// Gets the name of the view.
            /// </summary>
            /// <value>The name of the view.</value>
            public override string ViewName
            {
                get
                {
                    return "customViewSettings";
                }
            }
     
            /// <summary>
            /// Gets the view title.
            /// </summary>
            /// <value>The view title.</value>
            public override string ViewTitle
            {
                get
                {
                    return "Custom Settings";
                }
            }
     
     
            #endregion
  4.  SimpleView requires you to override the InitializeControls method as follows:
    protected override void InitializeControls(GenericContainer container)
            {
                if (this.HidePrice == true)
                {
                    HidePriceControl.Choices[0].Selected = true;
                }
                else
                {
                    HidePriceControl.Choices[0].Selected = false;
                }
            }

    In the method above, you perform the logic to show or hide the price of products depending on whether the HidePrice checkbox is selected in the designer settings.

  5. Save the file.

To reference the controls from the CustomSettingsDesignerView.ascx you must call the GetControl method and return the values of the controls.

Implement the client component

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

To create the file:

  1. In Visual Studio, open the context menu of the Web folder and click UI » Public. 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 and 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("ProductCatalogSample.Web.UI.Public");
     
     
    ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView = function (element) {
        ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView.initializeBase(this, [element]);
        this._controldataFieldNameMap = {};
        this._parentDesigner = null;
        this._refreshing = false;
        this._onLoadDelegate = null;
        this._onUnloadDelegate = null;
        this._hidePriceControlId = null;
        this._hidePriceControlDataFieldName = null;
    }
     
    ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView.prototype = {
     
        /* --------------------------------- set up and tear down --------------------------------- */
     
        initialize: function () {
            ProductCatalogSample.Web.UI.Public.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
            ProductCatalogSample.Web.UI.Public.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!');
        }
     
    }
    ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView.registerClass('ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);
     
    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
  5. Save the file.
  6. In the Properties pane of the CustomSettingsDesignerView.js file, change the Build Action to Embedded Resource.

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 the GetScriptReference method. In the method, 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("ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView.js", assemblyName));
    return res;
}

You specify a script descriptor for the view by overriding the GetScriptDescriptors method:

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 };
}


Register the scripts in the AssemblyInfo.cs as follows:

[assembly: WebResource("ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView.js", "application/x-javascript")]
[assembly: WebResource("ProductCatalogSample.Web.Controls.Scripts.TaxonomyDropDownField.js", "application/x-javascript")]

In the code above, the WebResource definition must include the default namespace of the assembly and the name of the .js file.

Create 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. In Visual Studio, open the context menu of the Web folder and click UI » Public » Designers.
    Click Add » Class...
  2. In the Name input field, enter ProductsDesigner.
  3. Open the file 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 widget 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 code above, in the AddViews method you add the views for the products widget designer to the views argument the method receives. In the Products module, you reuse some of the built-in views.

Back To Top

Next: Custom Products module: Create the products view