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 backend definitions

After you Custom Products module: Create the TaxonomyDropDownField widget for the backend view of the Products module, you create the backend definitions. To do this, you must wrap all of the admin panel views in a ContentViewControlElement and return it in the DefineProductsBackendContentView method of the definitions class.

To do this:

  1. In Visual Studio, expand the ProductsModule project and open the ProductsDefinitions.cs file.
  2. In the ProductsDefinitions class, define a CreateBackendFormToolbar method.

    This method must create the toolbar for the forms definitions in the backend view. You implement the forms definitions later in this topic. Following is the code for the toolbar:

    private static void CreateBackendFormToolbar(DetailFormViewElement detailView, string resourceClassId, bool isCreateMode)
            {
                ProductsDefinitions.CreateBackendFormToolbar(detailView, resourceClassId, isCreateMode, "ThisItem", true);
            }
     
            private static void CreateBackendFormToolbar(DetailFormViewElement detailView, string resourceClassId, bool isCreateMode, string itemName, bool showPreview, string backToItems = "BackToItems")
            {
                var toolbarSectionElement = new WidgetBarSectionElement(detailView.Toolbar.Sections)
                {
                    Name = "BackendForm",
                    WrapperTagKey = HtmlTextWriterTag.Div,
                    CssClass = "sfWorkflowMenuWrp"
                };
     
                // Create
                toolbarSectionElement.Items.Add(new CommandWidgetElement(toolbarSectionElement.Items)
                {
                    Name = "SaveChangesWidgetElement",
                    ButtonType = CommandButtonType.Save,
                    CommandName = DefinitionsHelper.SaveCommandName,
                    Text = (isCreateMode) ? String.Concat("Create", itemName) : "SaveChanges",
                    ResourceClassId = resourceClassId,
                    WrapperTagKey = HtmlTextWriterTag.Span,
                    WidgetType = typeof(CommandWidget)
                });
     
                // Preview
                if (showPreview == true)
                {
                    toolbarSectionElement.Items.Add(new CommandWidgetElement(toolbarSectionElement.Items)
                    {
                        Name = "PreviewWidgetElement",
                        ButtonType = CommandButtonType.Standard,
                        CommandName = DefinitionsHelper.PreviewCommandName,
                        Text = "Preview",
                        ResourceClassId = typeof(Labels).Name,
                        WrapperTagKey = HtmlTextWriterTag.Span,
                        WidgetType = typeof(CommandWidget)
                    });
                }
                if (!isCreateMode)
                {
                    var actionsMenuWidget = new ActionMenuWidgetElement(toolbarSectionElement.Items)
                    {
                        Name = "moreActions",
                        Text = Res.Get<Labels>().MoreActionsLink,
                        ResourceClassId = resourceClassId,
                        WrapperTagKey = HtmlTextWriterTag.Div,
                        WidgetType = typeof(ActionMenuWidget),
                        CssClass = "sfInlineBlock sfAlignMiddle"
                    };
                    actionsMenuWidget.MenuItems.Add(new CommandWidgetElement(actionsMenuWidget.MenuItems)
                    {
                        Name = DeleteCommandName,
                        Text = "DeleteThisItem",
                        CommandName = DefinitionsHelper.DeleteCommandName,
                        ResourceClassId = resourceClassId,
                        WidgetType = typeof(CommandWidget),
                        CssClass = "sfDeleteItm"
                    });
     
                    actionsMenuWidget.MenuItems.Add(new CommandWidgetElement(actionsMenuWidget.MenuItems)
                    {
                        Name = PermissionsCommandName,
                        ButtonType = CommandButtonType.SimpleLinkButton,
                        Text = "SetPermissions",
                        CommandName = DefinitionsHelper.PermissionsCommandName,
                        ResourceClassId = resourceClassId,
                        WidgetType = typeof(CommandWidget)
                    });
                    toolbarSectionElement.Items.Add(actionsMenuWidget);
                }
     
                // Cancel
                toolbarSectionElement.Items.Add(new CommandWidgetElement(toolbarSectionElement.Items)
                {
                    Name = "CancelWidgetElement",
                    ButtonType = CommandButtonType.Cancel,
                    CommandName = DefinitionsHelper.CancelCommandName,
                    Text = backToItems,
                    ResourceClassId = resourceClassId,
                    WrapperTagKey = HtmlTextWriterTag.Span,
                    WidgetType = typeof(CommandWidget)
                });
     
     
                detailView.Toolbar.Sections.Add(toolbarSectionElement);
            }
  3. In the ProductsDefinitions class, define a CreateBackendSections method.

    In this method, you must create the actual form for managing the items in your module. Use the following code for the method:

    private static void CreateBackendSections(DetailFormViewElement detailView, FieldDisplayMode displayMode)
            {
                #region Toolbar section
     
                if (detailView.ViewName == ProductsDefinitions.BackendEditViewName)
                {
                    var toolbarSection = new ContentViewSectionElement(detailView.Sections)
                    {
                        Name = DefinitionsHelper.ToolbarSectionName
                    };
     
                    var languageListFieldElement = new LanguageListFieldElement(toolbarSection.Fields)
                    {
                        ID = "languageListField",
                        FieldType = typeof(LanguageListField),
                        ResourceClassId = typeof(LocalizationResources).Name,
                        Title = "OtherTranslationsColon",
                        DisplayMode = displayMode,
                        FieldName = "languageListField",
                        DataFieldName = "AvailableLanguages"
                    };
                    toolbarSection.Fields.Add(languageListFieldElement);
     
                    detailView.Sections.Add(toolbarSection);
                }
     
                #endregion
     
                #region Main section
     
                var mainSection = new ContentViewSectionElement(detailView.Sections)
                {
                    Name = "MainSection",
                    CssClass = "sfFirstForm"
                };
     
                var titleField = new TextFieldDefinitionElement(mainSection.Fields)
                {
                    ID = "titleFieldControl",
                    DataFieldName = (displayMode == FieldDisplayMode.Write) ? "Title.PersistedValue" : "Title",
                    DisplayMode = displayMode,
                    Title = "lTitle",
                    CssClass = "sfTitleField",
                    ResourceClassId = typeof(ProductsResources).Name,
                    WrapperTag = HtmlTextWriterTag.Li,
                };
                titleField.ValidatorConfig = new ValidatorDefinitionElement(titleField)
                {
                    Required = true,
                    MessageCssClass = "sfError",
                    RequiredViolationMessage = "TitleCannotBeEmpty",
                    ResourceClassId = typeof(ProductsResources).Name
                };
                mainSection.Fields.Add(titleField);
     
                if (detailView.ViewName == ProductsDefinitions.BackendEditViewName || detailView.ViewName == ProductsDefinitions.BackendInsertViewName)
                {
                    var languageChoiceField = new ChoiceFieldElement(mainSection.Fields)
                    {
                        ID = "languageChoiceField",
                        FieldType = typeof(LanguageChoiceField),
                        ResourceClassId = typeof(ProductsResources).Name,
                        Title = "Language",
                        DisplayMode = displayMode,
                        FieldName = "languageField",
                        RenderChoiceAs = RenderChoicesAs.DropDown,
                        MutuallyExclusive = true,
                        DataFieldName = "AvailableLanguages"
                    };
                    mainSection.Fields.Add(languageChoiceField);
                }
     
                var dropDownTaxonomyField = new TaxonFieldDefinitionElement(mainSection.Fields)
                {
                    ID = "testTaxonomyField",
                    Title = "Colors",
                    DataFieldName = "Colors",
                    TaxonomyId = ProductsModule.ColorsTaxonomyId,
                    FieldType = typeof(TaxonomyDropDownField),
                    DisplayMode = displayMode,
                };
                mainSection.Fields.Add(dropDownTaxonomyField);
     
                var contentField = new HtmlFieldElement(mainSection.Fields)
                {
                    ID = "contentFieldControl",
                    DataFieldName = (displayMode == FieldDisplayMode.Write) ? "Content.PersistedValue" : "Content",
                    DisplayMode = displayMode,
                    CssClass = "sfFormSeparator sfContentField",
                    ResourceClassId = typeof(ProductsResources).Name,
                    WrapperTag = HtmlTextWriterTag.Li,
                    EditorContentFilters = Telerik.Web.UI.EditorFilters.DefaultFilters,
                    EditorStripFormattingOptions = (Telerik.Web.UI.EditorStripFormattingOptions?)(Telerik.Web.UI.EditorStripFormattingOptions.MSWord | Telerik.Web.UI.EditorStripFormattingOptions.Css | Telerik.Web.UI.EditorStripFormattingOptions.Font | Telerik.Web.UI.EditorStripFormattingOptions.Span | Telerik.Web.UI.EditorStripFormattingOptions.ConvertWordLists)
                };
                mainSection.Fields.Add(contentField);
     
     
     
                //Product Image
                var productImageField = new ImageFieldElement(mainSection.Fields)
                {
                    ID = "avatarField",
                    DataFieldName = "ProductImage",
                    DisplayMode = displayMode,
                    UploadMode = ImageFieldUploadMode.Dialog,
                    Title = "ProductImageFieldTitle",
                    WrapperTag = HtmlTextWriterTag.Li,
                    CssClass = "sfUserAvatar",
                    ResourceClassId = typeof(ProductsResources).Name,
                    DataFieldType = typeof(ContentLink),
                    DefaultSrc = "~/SFRes/images/ProductCatalogSample/Images.NoProductImage.png",// put your default image location example:
                    SizeInPx = 100
                };
                mainSection.Fields.Add(productImageField);
     
     
     
     
                var summaryField = new TextFieldDefinitionElement(mainSection.Fields)
                {
                    ID = "whatsInTheBoxFieldControl",
                    DataFieldName = (displayMode == FieldDisplayMode.Write) ? "WhatIsInTheBox.PersistedValue" : "WhatIsInTheBox",
                    DisplayMode = displayMode,
                    Title = "WhatIsInTheBox",
                    CssClass = "sfFormSeparator",
                    WrapperTag = HtmlTextWriterTag.Li,
                    ResourceClassId = typeof(ProductsResources).Name,
                    Rows = 5
                };
                summaryField.ExpandableDefinitionConfig = new ExpandableControlElement(summaryField)
                {
                    Expanded = false,
                    ExpandText = "ClickToAddSummary",
                    ResourceClassId = typeof(ProductsResources).Name
                };
                summaryField.ValidatorConfig.Required = false;
                mainSection.Fields.Add(summaryField);
     
     
                var quantityField = new TextFieldDefinitionElement(mainSection.Fields)
                {
                    ID = "quantityFieldControl",
                    DataFieldName = "QuantityInStock",
                    DisplayMode = displayMode,
                    Title = "QuantityInStock",
                    CssClass = "sfTitleField",
                    ResourceClassId = typeof(ProductsResources).Name,
                    WrapperTag = HtmlTextWriterTag.Li
                };
                quantityField.ValidatorConfig = new ValidatorDefinitionElement(quantityField)
                {
                    Required = true,
                    MessageCssClass = "sfError",
                    RequiredViolationMessage = "TitleCannotBeEmpty",
                    ResourceClassId = typeof(ProductsResources).Name,
                    RegularExpression = "^[0-9]+[.]*[0-9]*$",
                    RegularExpressionViolationMessage = "TheQuantityMustBeAPositiveNumber"
                };
                mainSection.Fields.Add(quantityField);
     
                var priceField = new TextFieldDefinitionElement(mainSection.Fields)
                {
                    ID = "priceFieldControl",
                    DataFieldName = "Price",
                    DisplayMode = displayMode,
                    Title = "Price",
                    CssClass = "sfTitleField",
                    ResourceClassId = typeof(ProductsResources).Name,
                    WrapperTag = HtmlTextWriterTag.Li,
                };
                priceField.ValidatorConfig = new ValidatorDefinitionElement(priceField)
                {
                    Required = true,
                    MessageCssClass = "sfError",
                    RequiredViolationMessage = "TitleCannotBeEmpty",
                    ResourceClassId = typeof(ProductsResources).Name,
                    RegularExpression = "^[0-9]+[.]*[0-9]*$",
                    RegularExpressionViolationMessage = "ThePriceMustBeAPositiveNumber"
                };
                mainSection.Fields.Add(priceField);
     
                detailView.Sections.Add(mainSection);
     
                #endregion
     
                #region Categories and Tags
                var taxonSection = new ContentViewSectionElement(detailView.Sections)
                {
                    Name = "TaxonSection",
                    Title ="CategoriesAndTags",
                    ResourceClassId = typeof(ProductsResources).Name,
                    CssClass = "sfExpandableForm",
                    ExpandableDefinitionConfig =
                    {
                        Expanded = false
                    }
                };
     
                var categories = DefinitionTemplates.CategoriesFieldWriteMode(taxonSection.Fields);
                categories.DisplayMode = displayMode;
                taxonSection.Fields.Add(categories);
     
                var tags = DefinitionTemplates.TagsFieldWriteMode(taxonSection.Fields);
                tags.DisplayMode = displayMode;
                tags.CssClass = "sfFormSeparator";
                tags.ExpandableDefinition.Expanded = true;
                tags.Description = "TagsFieldInstructions";
                taxonSection.Fields.Add(tags);
     
                detailView.Sections.Add(taxonSection);
                #endregion
     
                #region More options section
     
                var moreOptionsSection = new ContentViewSectionElement(detailView.Sections)
                {
                    Name = "MoreOptionsSection",
                    Title ="MoreOptionsURL",
                    ResourceClassId = typeof(ProductsResources).Name,
                    CssClass = "sfExpandableForm",
                    ExpandableDefinitionConfig =
                    {
                        Expanded = false
                    }
                };
     
                if (displayMode == FieldDisplayMode.Write)
                {
                    var urlName = new MirrorTextFieldElement(moreOptionsSection.Fields)
                    {
                        Title = "UrlName",
                        ResourceClassId = typeof(ProductsResources).Name,
                        ID = "urlName",
                        MirroredControlId = titleField.ID,
                        DataFieldName = (displayMode == FieldDisplayMode.Write) ? "UrlName.PersistedValue" : "UrlName",
                        DisplayMode = displayMode,
                        RegularExpressionFilter = DefinitionsHelper.UrlRegularExpressionFilter,
                        WrapperTag = HtmlTextWriterTag.Li,
                        ReplaceWith = "-"
                    };
                    var validationDef = new ValidatorDefinitionElement(urlName)
                    {
                        Required = true,
                        MessageCssClass = "sfError",
                        RequiredViolationMessage = Res.Get<ProductsResources>().UrlNameCannotBeEmpty,
                        RegularExpression = DefinitionsHelper.UrlRegularExpressionFilterForValidator,
                        RegularExpressionViolationMessage = Res.Get<PageResources>().UrlNameInvalidSymbols
                    };
                    urlName.ValidatorConfig = validationDef;
     
                    moreOptionsSection.Fields.Add(urlName);
                }
     
                var allowCommentsFieldElement = new ChoiceFieldElement(moreOptionsSection.Fields)
                {
                    ID = "allowCommentsField",
                    Title = (displayMode == FieldDisplayMode.Read) ? "AllowComments" : string.Empty,
                    DataFieldName = "AllowComments",
                    DisplayMode = displayMode,
                    RenderChoiceAs = RenderChoicesAs.SingleCheckBox,
                    CssClass = "sfCheckBox sfFormSeparator",
                    WrapperTag = HtmlTextWriterTag.Li,
                    ResourceClassId = typeof(ProductsResources).Name
                };
                allowCommentsFieldElement.ChoicesConfig.Add(
                    new ChoiceElement(allowCommentsFieldElement.ChoicesConfig)
                    {
                        Text = "AllowComments",
                        ResourceClassId = typeof(ProductsResources).Name
                    });
                moreOptionsSection.Fields.Add(allowCommentsFieldElement);
     
                detailView.Sections.Add(moreOptionsSection);
     
                #endregion
     
                #region Sidebar
     
                if (displayMode == FieldDisplayMode.Write)
                {
                    var sidebar = new ContentViewSectionElement(detailView.Sections)
                    {
                        Name = DefinitionsHelper.SidebarSectionName,
                        CssClass = "sfItemReadOnlyInfo"
                    };
     
                    sidebar.Fields.Add(new ContentWorkflowStatusInfoFieldElement(sidebar.Fields)
                    {
                        DisplayMode = displayMode,
                        FieldName = "NewsWorkflowStatusInfoField",
                        ResourceClassId = typeof(ProductsResources).Name,
                        WrapperTag = HtmlTextWriterTag.Li,
                        FieldType = typeof(ContentWorkflowStatusInfoField)
                    });
     
                    detailView.Sections.Add(sidebar);
                }
     
                #endregion
     
            }
  4. Define the following helper methods:
    /// <summary>
    /// Creates the action menu widget element.
    /// </summary>
    /// <param name="parent">The parent.</param>
    /// <param name="name">The name.</param>
    /// <param name="wrapperTagKey">The wrapper tag key.</param>
    /// <param name="commandName">Name of the command.</param>
    /// <param name="text">The text.</param>
    /// <param name="resourceClassId">The resource class pageId.</param>
    /// <returns></returns>
    public static CommandWidgetElement CreateActionMenuCommand(
        ConfigElement parent,
        string name,
        HtmlTextWriterTag wrapperTagKey,
        string commandName,
        string text,
        string resourceClassId)
    {
        return new CommandWidgetElement(parent)
        {
            Name = name,
            WrapperTagKey = wrapperTagKey,
            CommandName = commandName,
            Text = text,
            ResourceClassId = resourceClassId,
            WidgetType = typeof(CommandWidget)
        };
    }
     
    /// <summary>
    /// Creates the action menu command.
    /// </summary>
    /// <param name="parent">The parent.</param>
    /// <param name="name">The name.</param>
    /// <param name="wrapperTagKey">The wrapper tag key.</param>
    /// <param name="commandName">Name of the command.</param>
    /// <param name="text">The text.</param>
    /// <param name="resourceClassId">The resource class id.</param>
    /// <param name="cssClass">The CSS class.</param>
    /// <returns></returns>
    public static CommandWidgetElement CreateActionMenuCommand(
        ConfigElement parent,
        string name,
        HtmlTextWriterTag wrapperTagKey,
        string commandName,
        string text,
        string resourceClassId,
        string cssClass)
    {
        var commandWidgetElement = DefinitionsHelper.CreateActionMenuCommand(parent, name, wrapperTagKey, commandName, text, resourceClassId);
        commandWidgetElement.CssClass = cssClass;
        return commandWidgetElement;
    }
     
    /// <summary>
    /// Creates the actions menu separator.
    /// </summary>
    /// <param name="parent">The parent.</param>
    /// <param name="name">The name.</param>
    /// <param name="WrapperTagKey">The wrapper tag key.</param>
    /// <param name="cssClass">The CSS class.</param>
    /// <param name="text">The text.</param>
    /// <param name="resourceClassId">The resource class pageId.</param>
    /// <returns></returns>
    public static WidgetElement CreateActionMenuSeparator(
        ConfigElement parent,
        string name,
        HtmlTextWriterTag WrapperTagKey,
        string cssClass,
        string text,
        string resourceClassId)
    {
        return new LiteralWidgetElement(parent)
        {
            Name = name,
            WrapperTagKey = WrapperTagKey,
            CssClass = cssClass,
            Text = text,
            ResourceClassId = resourceClassId,
            WidgetType = typeof(LiteralWidget),
            IsSeparator = true
        };
    }
     
     
     
     
    /// <summary>
    /// Fills the action menu items.
    /// </summary>
    /// <param name="menuItems">The menu items.</param>
    /// <param name="parent">The parent.</param>
    /// <param name="resourceClassId">The resource class pageId.</param>
    public static void FillActionMenuItems(ConfigElementList<WidgetElement> menuItems, ConfigElement parent, string resourceClassId)
    {
        menuItems.Add(
            CreateActionMenuCommand(menuItems, "View", HtmlTextWriterTag.Li, PreviewCommandName, "View", resourceClassId));
        menuItems.Add(
            CreateActionMenuCommand(menuItems, "Delete", HtmlTextWriterTag.Li, DeleteCommandName, "Delete", resourceClassId, "sfDeleteItm"));
        menuItems.Add(
            CreateActionMenuCommand(menuItems, "Publish", HtmlTextWriterTag.Li, PublishCommandName, "Publish", resourceClassId, "sfPublishItm"));
        menuItems.Add(
            CreateActionMenuCommand(menuItems, "Unpublish", HtmlTextWriterTag.Li, UnpublishCommandName, "Unpublish", resourceClassId, "sfUnpublishItm"));
        menuItems.Add(
            CreateActionMenuSeparator(menuItems, "Separator", HtmlTextWriterTag.Li, "sfSeparator", "Edit", resourceClassId));
        menuItems.Add(
            CreateActionMenuCommand(menuItems, "Content", HtmlTextWriterTag.Li, EditCommandName, "Content", resourceClassId));
        menuItems.Add(
            CreateActionMenuCommand(menuItems, "Permissions", HtmlTextWriterTag.Li, PermissionsCommandName, "Permissions", resourceClassId));
        menuItems.Add(
            CreateActionMenuCommand(menuItems, "History", HtmlTextWriterTag.Li, HistoryGridCommandName, "HistoryMenuItemTitle", "VersionResources"));
    }
  5. In the ProductsDefinitions class, implement the DefineProductsBackendContentView method in the following way:
    /// <summary>
    /// Defines the ContentView control for News on the frontend
    /// </summary>
    /// <param name="parent">The parent configuration element.</param>
    /// <returns>A configured instance of <see cref="ContentViewControlElement"/>.</returns>
    internal static ContentViewControlElement DefineProductsFrontendContentView(ConfigElement parent)
    {
        // define content view control
        var controlDefinition = new ContentViewControlElement(parent)
        {
            ControlDefinitionName = ProductsDefinitions.FrontendDefinitionName,
            ContentType = typeof(ProductItem)
        };
     
        // *** define views ***
     
        #region News backend list view
     
        var newsListView = new ContentViewMasterElement(controlDefinition.ViewsConfig)
        {
            ViewName = ProductsDefinitions.FrontendListViewName,
            ViewType = typeof(ProductCatalogSample.Web.UI.Public.MasterListView),
            AllowPaging = true,
            DisplayMode = FieldDisplayMode.Read,
            ItemsPerPage = 20,
            ResourceClassId = typeof(ProductsResources).Name,
            FilterExpression = DefinitionsHelper.PublishedOrScheduledFilterExpression,
            SortExpression = "PublicationDate DESC"
        };
     
        controlDefinition.ViewsConfig.Add(newsListView);
     
        #endregion
     
        #region News backend details view
     
        var newsDetailsView = new ContentViewDetailElement(controlDefinition.ViewsConfig)
        {
            ViewName = ProductsDefinitions.FrontendDetailViewName,
            ViewType = typeof(ProductDetailsView),
            ShowSections = false,
            DisplayMode = FieldDisplayMode.Read,
            ResourceClassId = typeof(ProductsResources).Name
        };
     
        controlDefinition.ViewsConfig.Add(newsDetailsView);
     
        #endregion
     
        return controlDefinition;
    }

Back To Top