Developers Guide

Creating the backend view

You must wrap all of the admin panel views in a ContentViewControlElement and return it in the DefineLocationsBackendContentViewmethod of the definitions class. To do this, you must perform the following:

  1. Open the LocationsDefinitions.cs file.

  2. Add the following using statements:

    • using Telerik.Sitefinity.Configuration;
    • using Telerik.Sitefinity.Modules;
    • using Telerik.Sitefinity.Web.UI.Validation.Config;
    • using System.Web.UI;
    • using Telerik.Sitefinity.Web.UI.Fields.Config;
    • using Telerik.Web.UI;
    • using Telerik.Sitefinity.Localization;
    • using Telerik.Sitefinity.Web.UI.Fields;
    • using Telerik.Sitefinity.Web.UI.ContentUI.Views.Backend.Master.Config;
    • using Telerik.Sitefinity.Web.UI.Fields.Enums;
    • using Telerik.Sitefinity.Web.UI.Backend.Elements.Widgets;
    • using Telerik.Sitefinity.Web.UI.Backend.Elements.Enums;
    • using Telerik.Sitefinity.Web.UI.Backend.Elements.Config;
    • using Telerik.Sitefinity.Web.UI.ContentUI.Views.Backend.Detail;
    • using LocationsModule.Model;
    • using Telerik.Sitefinity.Web.UI.ContentUI.Views.Backend.Master;

  3. In the LocationsDefinitions class, define a CreateBackendFormToolbar method.

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

    private static void CreateBackendFormToolbar(DetailFormViewElement detailView, bool isCreateMode, bool showPreview)
    {
        // create toolbar
        var toolbarSectionElement = new WidgetBarSectionElement(detailView.Toolbar.Sections)
        {
            Name = "BackendForm",
            WrapperTagKey = HtmlTextWriterTag.Div,
            CssClass = "sfWorkflowMenuWrp"
        };
     
        // Create / Save Command
        toolbarSectionElement.Items.Add(new CommandWidgetElement(toolbarSectionElement.Items)
        {
            Name = "SaveChangesWidgetElement",
            ButtonType = CommandButtonType.Save,
            CommandName = DefinitionsHelper.SaveCommandName,
            Text = (isCreateMode) ? String.Concat("Create Location") : "Save Changes",
            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,
                WrapperTagKey = HtmlTextWriterTag.Div,
                WidgetType = typeof(ActionMenuWidget),
                CssClass = "sfInlineBlock sfAlignMiddle"
            };
            actionsMenuWidget.MenuItems.Add(new CommandWidgetElement(actionsMenuWidget.MenuItems)
            {
                Name = "DeleteCommand",
                Text = "DeleteThisItem",
                CommandName = DefinitionsHelper.DeleteCommandName,
                WidgetType = typeof(CommandWidget),
                CssClass = "sfDeleteItm"
            });
     
            toolbarSectionElement.Items.Add(actionsMenuWidget);
        }
     
        // Cancel
        toolbarSectionElement.Items.Add(new CommandWidgetElement(toolbarSectionElement.Items)
        {
            Name = "CancelWidgetElement",
            ButtonType = CommandButtonType.Cancel,
            CommandName = DefinitionsHelper.CancelCommandName,
            Text = "Back to Locations List",
            WrapperTagKey = HtmlTextWriterTag.Span,
            WidgetType = typeof(CommandWidget)
        });
     
     
        detailView.Toolbar.Sections.Add(toolbarSectionElement);
    }

  4. In the LocationsDefinitions class, define a CreateBackendSections method.

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

    private static void CreateBackendSections(DetailFormViewElement detailView, FieldDisplayMode displayMode)
    {
        #region Toolbar section
     
        if (detailView.ViewName == LocationsDefinitions.BackendEditViewName)
        {
            var toolbarSection = new ContentViewSectionElement(detailView.Sections)
            {
                Name = DefinitionsHelper.ToolbarSectionName
            };
     
            // LOCALIZATION
            var languageListFieldElement = new LanguageListFieldElement(toolbarSection.Fields)
            {
                ID = "languageListField",
                FieldType = typeof(LanguageListField),
                ResourceClassId = typeof(LocalizationResources).Name,
                Title = Res.Get<LocalizationResources>().OtherTranslationsColon,
                DisplayMode = displayMode,
                FieldName = "languageListField",
                DataFieldName = "AvailableLanguages"
            };
            toolbarSection.Fields.Add(languageListFieldElement);
     
            detailView.Sections.Add(toolbarSection);
        }
     
        #endregion
     
        #region Main section
     
        // define new section
        var mainSection = new ContentViewSectionElement(detailView.Sections)
        {
            Name = "MainSection",
            CssClass = "sfFirstForm"
        };
     
        #region Title Field
     
        // define title field element
        var titleField = new TextFieldDefinitionElement(mainSection.Fields)
        {
            ID = "titleFieldControl",
            DataFieldName = "Title",
            DisplayMode = displayMode,
            Title = "Title",
            CssClass = "sfTitleField",
            WrapperTag = HtmlTextWriterTag.Li,
        };
     
        // add validation
        titleField.ValidatorConfig = new ValidatorDefinitionElement(titleField)
        {
            Required = true,
            MessageCssClass = "sfError",
            RequiredViolationMessage = "Title field is required"
        };
     
        // add field to section
        mainSection.Fields.Add(titleField);
     
        #endregion
     
        #region Content
     
        var contentField = new HtmlFieldElement(mainSection.Fields)
        {
            ID = "contentFieldControl",
            DataFieldName = "Content",
            DisplayMode = displayMode,
            CssClass = "sfFormSeparator sfContentField",
            WrapperTag = HtmlTextWriterTag.Li,
            EditorContentFilters = Telerik.Web.UI.EditorFilters.DefaultFilters,
            EditorStripFormattingOptions = (EditorStripFormattingOptions?)(EditorStripFormattingOptions.MSWord | EditorStripFormattingOptions.Css | EditorStripFormattingOptions.Font | EditorStripFormattingOptions.Span | EditorStripFormattingOptions.ConvertWordLists)
        };
        mainSection.Fields.Add(contentField);
     
        #endregion
     
        #region Address fields
     
        // Address field
        var addressField = new TextFieldDefinitionElement(mainSection.Fields)
        {
            ID = "addressFieldControl",
            DataFieldName = "Address",
            DisplayMode = displayMode,
            Title = "Address",
            CssClass = "sfTitleField",
            WrapperTag = HtmlTextWriterTag.Li
        };
        addressField.ValidatorConfig = new ValidatorDefinitionElement(addressField)
        {
            Required = true,
            MessageCssClass = "sfError",
            RequiredViolationMessage = "Location address is required"
        };
        mainSection.Fields.Add(addressField);
     
        // City field
        var cityField = new TextFieldDefinitionElement(mainSection.Fields)
        {
            ID = "cityFieldControl",
            DataFieldName = "City",
            DisplayMode = displayMode,
            Title = "City",
            CssClass = "sfTitleField",
            WrapperTag = HtmlTextWriterTag.Li
        };
        mainSection.Fields.Add(cityField);
     
        // State / Region field
        var regionField = new TextFieldDefinitionElement(mainSection.Fields)
        {
            ID = "regionFieldControl",
            DataFieldName = "Region",
            DisplayMode = displayMode,
            Title = "State / Region",
            CssClass = "sfTitleField",
            WrapperTag = HtmlTextWriterTag.Li
        };
        regionField.ValidatorConfig = new ValidatorDefinitionElement(regionField)
        {
            Required = true,
            MessageCssClass = "sfError",
            RequiredViolationMessage = "State / Region is a required field"
        };
        mainSection.Fields.Add(regionField);
     
        // Postal Code field
        var postalCodeField = new TextFieldDefinitionElement(mainSection.Fields)
        {
            ID = "postalCodeFieldControl",
            DataFieldName = "PostalCode",
            DisplayMode = displayMode,
            Title = "Postal Code",
            CssClass = "sfTitleField",
            WrapperTag = HtmlTextWriterTag.Li
        };
        postalCodeField.ValidatorConfig = new ValidatorDefinitionElement(postalCodeField)
        {
            Required = true,
            MessageCssClass = "sfError",
            RequiredViolationMessage = "Postal code is a required field"
        };
        mainSection.Fields.Add(postalCodeField);
     
        #endregion
     
        // add section to view
        detailView.Sections.Add(mainSection);
     
        #endregion
     
        #region Categories and Tags Section
     
        // define new section
        var taxonSection = new ContentViewSectionElement(detailView.Sections)
        {
            Name = "TaxonSection",
            Title = "Categories and Tags",
            CssClass = "sfExpandableForm",
            ExpandableDefinitionConfig =
            {
                Expanded = false
            }
        };
     
        // add categories field to section
        var categories = DefinitionTemplates.CategoriesFieldWriteMode(taxonSection.Fields);
        categories.DisplayMode = displayMode;
     
        // add categories section to view
        taxonSection.Fields.Add(categories);
     
        // add tags field to section
        var tags = DefinitionTemplates.TagsFieldWriteMode(taxonSection.Fields);
        tags.DisplayMode = displayMode;
        tags.CssClass = "sfFormSeparator";
        tags.ExpandableDefinition.Expanded = true;
        tags.Description = "TagsFieldInstructions";
        taxonSection.Fields.Add(tags);
     
        // add tags section to view
        detailView.Sections.Add(taxonSection);
     
        #endregion
     
        #region More options Section
     
        // define new section
        var moreOptionsSection = new ContentViewSectionElement(detailView.Sections)
        {
            Name = "MoreOptionsSection",
            Title = "More Options",
            CssClass = "sfExpandableForm",
            ExpandableDefinitionConfig =
            {
                Expanded = false
            }
        };
     
        // Url field for insert view
        if (displayMode == FieldDisplayMode.Write)
        {
            var urlName = new MirrorTextFieldElement(moreOptionsSection.Fields)
            {
                Title = "URL",
                ID = "urlName",
                MirroredControlId = titleField.ID,
                DataFieldName = "UrlName",
                DisplayMode = displayMode,
                RegularExpressionFilter = DefinitionsHelper.UrlRegularExpressionFilter,
                WrapperTag = HtmlTextWriterTag.Li,
                ReplaceWith = "-"
            };
            var validationDef = new ValidatorDefinitionElement(urlName)
            {
                Required = true,
                MessageCssClass = "sfError",
                RequiredViolationMessage = "Url cannot be empty",
                RegularExpression = DefinitionsHelper.UrlRegularExpressionFilterForValidator,
                RegularExpressionViolationMessage = "Invalid Url"
            };
            urlName.ValidatorConfig = validationDef;
     
            moreOptionsSection.Fields.Add(urlName);
        }
     
        // add url section to view
        detailView.Sections.Add(moreOptionsSection);
     
        #endregion
     
        #region Sidebar
     
        #endregion
    }

  5. In the LocationsDefinitions class, implement the DefineLocationsBackendContentView method in the following way:

    public static ContentViewControlElement DefineLocationsBackendContentView(ConfigElement parent)
    {
        // initialize the content view; this is the element that will be returned to the page and holds all views of the admin panel
        var backendContentView = new ContentViewControlElement(parent)
        {
            ControlDefinitionName = BackendDefinitionName,
            ContentType = typeof(LocationItem),
            UseWorkflow = false
        };
     
        // GridView element serves as the "List View" for the item list. Grid columns are defined later
        var locationsGridView = new MasterGridViewElement(backendContentView.ViewsConfig)
        {
            ViewName = LocationsDefinitions.BackendListViewName,
            ViewType = typeof(MasterGridView),
            AllowPaging = true,
            DisplayMode = FieldDisplayMode.Read,
            ItemsPerPage = 50,
            SearchFields = "Title",
            SortExpression = "Title ASC",
            Title = "Locations",
            WebServiceBaseUrl = "~/Sitefinity/Services/Content/Locations.svc/"
        };
        backendContentView.ViewsConfig.Add(locationsGridView);
     
        #region Toolbar definition
     
        // Toolbar is the top menu with action buttons such as Create, Delete, Search, etc.
        var masterViewToolbarSection = new WidgetBarSectionElement(locationsGridView.ToolbarConfig.Sections)
        {
            Name = "Toolbar"
        };
     
        // "Create" Button for Toolbar
        var createLocationsWidget = new CommandWidgetElement(masterViewToolbarSection.Items)
        {
            Name = "CreateLocationsCommandWidget",
            ButtonType = CommandButtonType.Create,
            CommandName = DefinitionsHelper.CreateCommandName,
            Text = "Create Location",
            CssClass = "sfMainAction",
            WidgetType = typeof(CommandWidget)
        };
        masterViewToolbarSection.Items.Add(createLocationsWidget);
     
        // "Delete" button for Toolbar
        var deleteLocationsWidget = new CommandWidgetElement(masterViewToolbarSection.Items)
        {
            Name = "DeleteLocationsCommandWidget",
            ButtonType = CommandButtonType.Standard,
            CommandName = DefinitionsHelper.GroupDeleteCommandName,
            Text = "Delete",
            WidgetType = typeof(CommandWidget),
            CssClass = "sfGroupBtn"
        };
        masterViewToolbarSection.Items.Add(deleteLocationsWidget);
     
        // "Search" button for toolbar
        masterViewToolbarSection.Items.Add(DefinitionsHelper.CreateSearchButtonWidget(masterViewToolbarSection.Items, typeof(LocationItem)));
        locationsGridView.ToolbarConfig.Sections.Add(masterViewToolbarSection);
     
        #endregion
     
        #region Locations Grid
     
        // Define GridView mode
        var gridMode = new GridViewModeElement(locationsGridView.ViewModesConfig)
        {
            Name = "Grid"
        };
        locationsGridView.ViewModesConfig.Add(gridMode);
     
        #region Locations Grid Columns
     
        // Title column
        DataColumnElement titleColumn = new DataColumnElement(gridMode.ColumnsConfig)
        {
            Name = "Title",
            HeaderText = "Title",
            HeaderCssClass = "sfTitleCol",
            ItemCssClass = "sfTitleCol",
            ClientTemplate = @"<a sys:href='javascript:void(0);' sys:class=""{{ 'sf_binderCommand_edit sfItemTitle sf' + UIStatus.toLowerCase()}}"">
                <strong>{{Title}}</strong>
                <span class='sfStatusLocation'>{{Status}}</span></a>"
        };
        gridMode.ColumnsConfig.Add(titleColumn);
     
        ActionMenuColumnElement actionsColumn = new ActionMenuColumnElement(gridMode.ColumnsConfig)
        {
            Name = "Actions",
            HeaderText = "Actions",
            HeaderCssClass = "sfMoreActions",
            ItemCssClass = "sfMoreActions"
        };
        DefinitionsHelper.FillActionMenuItems(actionsColumn.MenuItems, actionsColumn, String.Empty);
        gridMode.ColumnsConfig.Add(actionsColumn);
     
        #endregion
     
        #endregion
     
        #region Dialogs definition
     
        #region Insert Item Dialog
     
        // Insert Item Parameters
        var parameters = string.Concat(
            "?ControlDefinitionName=",
            LocationsDefinitions.BackendDefinitionName,
            "&ViewName=",
            LocationsDefinitions.BackendInsertViewName);
     
        // Insert Item Dialog
        DialogElement createDialogElement = DefinitionsHelper.CreateDialogElement(
            locationsGridView.DialogsConfig,
            DefinitionsHelper.CreateCommandName,
            "ContentViewInsertDialog",
            parameters);
     
        // add dialog to Backend
        locationsGridView.DialogsConfig.Add(createDialogElement);
     
        #endregion
     
        #region Edit Item Dialog
     
        // "Edit Item" Parameters
        parameters = string.Concat(
            "?ControlDefinitionName=",
            LocationsDefinitions.BackendDefinitionName,
            "&ViewName=",
            LocationsDefinitions.BackendEditViewName);
     
        // "Edit Item" Dialog
        DialogElement editDialogElement = DefinitionsHelper.CreateDialogElement(
            locationsGridView.DialogsConfig,
            DefinitionsHelper.EditCommandName,
            "ContentViewEditDialog",
            parameters);
     
        // Add Dialog to Backend
        locationsGridView.DialogsConfig.Add(editDialogElement);
     
        #endregion
     
        #region Preview Item Dialog
     
        // "Preview Item" parameters
        parameters = string.Concat(
            "?ControlDefinitionName=",
            LocationsDefinitions.BackendDefinitionName,
            "&ViewName=",
            LocationsDefinitions.BackendPreviewName,
            "&backLabelText=", "BacktoItems", "&SuppressBackToButtonLabelModify=true");
     
        // Preview Item Dialog
        DialogElement previewDialogElement = DefinitionsHelper.CreateDialogElement(
            locationsGridView.DialogsConfig,
            DefinitionsHelper.PreviewCommandName,
            "ContentViewEditDialog",
            parameters);
     
        // Add Dialog to Backend
        locationsGridView.DialogsConfig.Add(previewDialogElement);
     
        #endregion
     
        #endregion
     
        #region Admin Forms Views
     
        #region Create Item Form View
     
        // bind create item view to web service
        var locationsInsertDetailView = new DetailFormViewElement(backendContentView.ViewsConfig)
        {
            Title = "Create Location",
            ViewName = LocationsDefinitions.BackendInsertViewName,
            ViewType = typeof(DetailFormView),
            ShowSections = true,
            DisplayMode = FieldDisplayMode.Write,
            ShowTopToolbar = true,
            WebServiceBaseUrl = "~/Sitefinity/Services/Content/locations.svc/",
            IsToRenderTranslationView = false,
            UseWorkflow = false
        };
     
        backendContentView.ViewsConfig.Add(locationsInsertDetailView);
     
        #endregion
     
        #region Edit Item Form View
     
        // bind Edit item form to web service
        var locationsEditDetailView = new DetailFormViewElement(backendContentView.ViewsConfig)
        {
            Title = "Edit Location",
            ViewName = LocationsDefinitions.BackendEditViewName,
            ViewType = typeof(DetailFormView),
            ShowSections = true,
            DisplayMode = FieldDisplayMode.Write,
            ShowTopToolbar = true,
            WebServiceBaseUrl = "~/Sitefinity/Services/Content/Locations.svc/",
            IsToRenderTranslationView = false,
            UseWorkflow = false
        };
     
        backendContentView.ViewsConfig.Add(locationsEditDetailView);
     
        #endregion
     
        #region Preview Item Form View
     
        // bind Preview Form to web service
        var locationsPreviewDetailView = new DetailFormViewElement(backendContentView.ViewsConfig)
        {
            Title = "Location Preview",
            ViewName = LocationsDefinitions.BackendPreviewName,
            ViewType = typeof(DetailFormView),
            ShowSections = true,
            DisplayMode = FieldDisplayMode.Read,
            ShowTopToolbar = true,
            ShowNavigation = true,
            WebServiceBaseUrl = "~/Sitefinity/Services/Content/Locations.svc/",
            UseWorkflow = false
        };
     
        backendContentView.ViewsConfig.Add(locationsPreviewDetailView);
     
        #endregion
     
        #endregion
     
        #region locations backend forms definition
     
        #region Insert Form
     
        LocationsDefinitions.CreateBackendSections(locationsInsertDetailView, FieldDisplayMode.Write);
        LocationsDefinitions.CreateBackendFormToolbar(locationsInsertDetailView, true, true);
     
        #endregion
     
        #region Edit Form
     
        LocationsDefinitions.CreateBackendSections(locationsEditDetailView, FieldDisplayMode.Write);
        LocationsDefinitions.CreateBackendFormToolbar(locationsEditDetailView, false, true);
     
        #endregion
     
        #region Preview Form
     
        CreateBackendSections(locationsPreviewDetailView, FieldDisplayMode.Read);
     
        #endregion
     
        #endregion
     
        return backendContentView;
    }

    For better understanding the code is structured in the following steps:

    1. Define the actual ContentViewControlElement object that represents the completed backend view.
    2. Add a MasterGridViewElement object to host the list view.
    3. In #region Module Main Toolbar definition, define buttons for create, delete, etc.
    4. In #region Locations Grid (List View), define the actual grid for listing items in the module.
    5. In #region Locations Grid Columns, define the data columns of the grid.
    6. In #region Dialog Window definitions, define dialog windows for the different admin modes (insert, edit, preview).
    7. In #region Admin Forms Views, define the form controls (insert, edit, preview) that are used inside the dialog windows.
    8. In #region Locations Backend Forms Definitions, call the CreateBackendFormToolbar and CreateBackendSections helper methods.

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