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 products view

After you Custom Products module: Create the products details view of the Products module frontend, you create the Products view widget. To do this:

  1. In Visual Studio, open the context menu of the Web folder and click UI » Public.
  2. Click Add » Class...
  3. In the Name input field, enter ProductsView.
  4. Open the ProductsView file and add the following namespaces:
    using Telerik.Sitefinity.Modules.Pages.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using Telerik.Sitefinity.Localization;
    using Telerik.Sitefinity.Web.UI.ContentUI;
    using ProductCatalogSample.Web.UI.Public.Designers;
  5. Change the class definition to:
    [RequireScriptManager]
    [ControlDesigner(typeof(ProductsDesigner))]
    [PropertyEditorTitle(typeof(ProductsResources), "ProductsViewTitle")]
    public class ProductsView : ContentView
  6. Specify the module name by adding this code:
    public override string ModuleName
    {
        get
        {
            if (String.IsNullOrEmpty(base.ControlDefinitionName))
                return ProductsModule.ModuleName;
            return base.ModuleName;
        }
        set
        {
            base.ModuleName = value;
        }
    }
  7. Specify a property that hides the prices on the frontend from the designer by pasting this code:
    private bool hidePrice = true;
     
    public bool HidePrices
    {
        get
        {
            return this.hidePrice;
        }
        set
        {
            this.hidePrice = value;
        }
    }
  8. Specify the name of the configuration definition for the widget in the following way:
    public override string ControlDefinitionName
    {
        get
        {
            if (String.IsNullOrEmpty(base.ControlDefinitionName))
                return ProductsDefinitions.FrontendDefinitionName;
            return base.ControlDefinitionName;
        }
        set
        {
            base.ControlDefinitionName = value;
        }
    }
  9. Define the name of the master view:
    public override string MasterViewName
    {
        get
        {
            if (!String.IsNullOrEmpty(base.MasterViewName))
                return base.MasterViewName;
            return ProductsDefinitions.FrontendListViewName;
        }
        set
        {
            base.MasterViewName = value;
        }
    }
  10. Define the name of the details view:
    public override string DetailViewName
    {
        get
        {
            if (!String.IsNullOrEmpty(base.DetailViewName))
                return base.DetailViewName;
     
            return ProductsDefinitions.FrontendDetailViewName;
        }
        set
        {
            base.DetailViewName = value;
        }
    }
  11. Provide a property for the text that is shown when the box in the designer is empty:
    public override string EmptyLinkText
    {
        get
        {
            return Res.Get<ProductsResources>().EditProductsSettings;
        }
    }
  12. Save the file.

In the code above, you first set the widget designer that the widget uses. You do this via the ControlDesigner attribute. Next, you specify the module name and set the name of the configuration definition that the widget uses to construct the views. Finally, you define the views that are shown when the widget is in the ContentViewDisplayMode.Master and the ContentViewDisplayMode.Detail states. You reference the master list view and the details view.

Back To Top

Next: Custom Products module: Create the frontend definitions