+1-888-365-2779
Try Now
More in this section

Forums / Sitefinity SDK / Css for new Sitefinity Admin controls

Css for new Sitefinity Admin controls

15 posts, 0 answered
  1. TIOS
    TIOS avatar
    48 posts
    Registered:
    22 Mar 2006
    17 Dec 2010
    Link to this post
    Hi,

    Just started following the jobs sample and now have my own custom module.  My next question is with the old version you were able to go into the generic content templates and copy the css so you got the same look and feel for your custom controls as sitefinity.  How do you go about doing this with Sitefinity 4 beta.....

    Thanks,
    Chris
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    17 Dec 2010
    Link to this post
    Hi Chris,

    You need to create a custom definition for the module you have with the fields you are going to have. The styles will be loaded by the ModuleBase class.

    sample code.

    namespaceTelerik.Sitefinity.Modules.CustomModule
    {
        /// <summary>
        /// This is a static class used to initialize the properties for all ContentView control views
        /// of supplied by default for the CustomModule.
        /// </summary>
        internalstaticclassCustomModuleCustomModuleDefinition
        {
            #region Backend CustomModuleDefinition
            staticCustomModuleCustomModuleDefinition()
            {
                // Ensure CustomModule module is initialized.
                SystemManager.GetApplicationModule(CustomModule.ModuleName);
            }
      
            /// <summary>
            /// Defines the ContentView control for CustomModule on the backend
            /// </summary>
            /// <param name="parent">The parent configuration element.</param>
            /// <returns>A configured instance of <see cref="ContentViewControlElement"/>.</returns>
            internalstaticContentViewControlElement DefineCustomModuleBackendContentView(ConfigElement parent)
            {
                // define content view control
                var backendContentView = newContentViewControlElement(parent)
                {
                    ControlDefinitionName = BackendDefinitionName,
                    ContentType = typeof(MyContentItem)
                };
      
                // *** define views ***
      
                #region CustomModule backend list view
      
                // this is our list view where we are going to use RadGrid control
                var CustomModuleGridView = newMasterGridViewElement(backendContentView.ViewsConfig)
                {
                    ViewName = CustomModuleCustomModuleDefinition.BackendListViewName,
                    ViewType = typeof(MasterGridView),
                    AllowPaging = true,
                    DisplayMode = FieldDisplayMode.Read,
                    ItemsPerPage = 50,
                    ResourceClassId = typeof(CustomModuleResources).Name,
                    SearchFields = "Title",
                    SortExpression = "Title ASC",
                    Title = "CustomModuleTitle",
                    WebServiceBaseUrl = "~/Sitefinity/Services/Content/CustomModuleItemService.svc/"
                };
      
                #region Toolbar definition
      
                WidgetBarSectionElement masterViewToolbarSection = newWidgetBarSectionElement(CustomModuleGridView.ToolbarConfig.Sections);
      
                var createCustomModuleWidget = newCommandWidgetElement(masterViewToolbarSection.Items)
                {
                    Name = "CreateCustomModuleWidget",
                    ButtonType = CommandButtonType.Create,
                    CommandName = CustomModuleDefinitionHelper.CreateCommandName,
                    Text = "CreateItem",
                    ResourceClassId = typeof(CustomModuleResources).Name,
                    CssClass = "sfMainAction",
                    WidgetType = typeof(CommandWidget),
                    PermissionSet = SecurityConstants.Sets.General.SetName,
                    ActionName = SecurityConstants.Sets.General.Create
                };
                masterViewToolbarSection.Items.Add(createCustomModuleWidget);
      
               // do the same for delete
               // masterViewToolbarSection.Items.Add(deleteCustomModuleWidget);
      
                
               CustomModuleGridView.ToolbarConfig.Sections.Add(masterViewToolbarSection);
      
                #endregion
      
             
      
                var translationsContextBarSection = newLocalizationWidgetBarSectionElement(CustomModuleGridView.ContextBarConfig.Sections)
                {
                    WrapperTagKey = HtmlTextWriterTag.Div,
                    CssClass = "sfContextWidgetWrp",
                    MinLanguagesCountTreshold = CustomModuleDefinitionHelper.LanguageItemsPerRow
                };            
      
                translationsContextBarSection.Items.Add(newCommandWidgetElement(translationsContextBarSection.Items)
                {
                    Name = "ShowMoreTranslations",
                    CommandName = CustomModuleDefinitionHelper.ShowMoreTranslationsCommandName,
                    ButtonType = CommandButtonType.SimpleLinkButton,
                    Text = "ShowAllTranslations",
                    ResourceClassId = typeof(LocalizationResources).Name,
                    WidgetType = typeof(CommandWidget),
                    IsSeparator = false,
                    CssClass = "sfShowHideLangVersions",
                    WrapperTagKey = HtmlTextWriterTag.Div
                });
      
                translationsContextBarSection.Items.Add(newCommandWidgetElement(translationsContextBarSection.Items)
                {
                    Name = "HideMoreTranslations",
                    CommandName = CustomModuleDefinitionHelper.HideMoreTranslationsCommandName,
                    ButtonType = CommandButtonType.SimpleLinkButton,
                    Text = "ShowBasicTranslationsOnly",
                    ResourceClassId = typeof(LocalizationResources).Name,
                    WidgetType = typeof(CommandWidget),
                    IsSeparator = false,
                    CssClass = "sfDisplayNone sfShowHideLangVersions",
                    WrapperTagKey = HtmlTextWriterTag.Div
                });
      
                CustomModuleGridView.ContextBarConfig.Sections.Add(translationsContextBarSection);
      
                #endregion
      
                #region Grid View Mode
      
                var gridMode = newGridViewModeElement(CustomModuleGridView.ViewModesConfig)
                {
                    Name = "Grid"
                };
                CustomModuleGridView.ViewModesConfig.Add(gridMode);
      
                DataColumnElement titleColumn = newDataColumnElement(gridMode.ColumnsConfig)
                {
                    // this will bind the title automatically
                    Name = "Title",
                    HeaderText = Res.Get<Labels>().Title,
                    ClientTemplate = @"<a sys:href='javascript:void(0);' sys:class=""{{ 'sf_binderCommand_edit sfItemTitle sf' + UIStatus.toLowerCase()}}"">
                        <strong>{{Title}}</strong>
                        <span class='sfStatusLocation'>{{LifecycleStatus.Message}}</span></a>"
                };
                gridMode.ColumnsConfig.Add(titleColumn);
      
               
                CustomModuleDefinitionHelper.FillActionMenuItems(actionsColumn.MenuItems, actionsColumn, typeof(CustomModule).Name);
                gridMode.ColumnsConfig.Add(actionsColumn);
      
                DataColumnElement authorColumn = newDataColumnElement(gridMode.ColumnsConfig)
                {
                    Name = "Author",
                    HeaderText = Res.Get<Labels>().Author,
                    ClientTemplate = "<span>{{Author}}</span>",
                    HeaderCssClass = "sfRegular",
                    ItemCssClass = "sfRegular"
                };
                gridMode.ColumnsConfig.Add(authorColumn);
      
                DataColumnElement dateColumn = newDataColumnElement(gridMode.ColumnsConfig)
                {
                    ///.format('dd MMM, yyyy hh:mm:ss')
                    Name = "Date",
                    HeaderText = Res.Get<Labels>().Date,
                    ClientTemplate = "<span>{{ (DateCreated) ? DateCreated.sitefinityLocaleFormat('dd MMM, yyyy hh:mm:ss'): '-' }}</span>",
                    HeaderCssClass = "sfDate",
                    ItemCssClass = "sfDate"
                };
                gridMode.ColumnsConfig.Add(dateColumn);
      
                #endregion
      
                #region DecisionScreens definition
      
                DecisionScreenElement dsElement = newDecisionScreenElement(CustomModuleGridView.DecisionScreensConfig)
                {
                    Name = "NoItemsExistScreen",
                    DecisionType = DecisionType.NoItemsExist,
                    MessageType = MessageType.Neutral,
                    Displayed = false,
                    Title = "WhatDoYouWantToDoNow",
                    MessageText = "NoContentItems",
                    ResourceClassId = typeof(CustomModule).Name
                };
      
                CommandWidgetElement actionCreateNew = newCommandWidgetElement(dsElement.Actions)
                {
                    Name = "Create",
                    ButtonType = CommandButtonType.Create,
                    CommandName = CustomModuleDefinitionHelper.CreateCommandName,
                    Text = "CreateItem",
                    ResourceClassId = typeof(CustomModule).Name,
                    CssClass = "sfCreateItem",
                    PermissionSet = SecurityConstants.Sets.General.SetName,
                    ActionName = SecurityConstants.Sets.General.Create
                };
                dsElement.Actions.Add(actionCreateNew);
      
                
      
                CustomModuleGridView.DecisionScreensConfig.Add(dsElement);
      
                #endregion
      
                #region Dialogs definition
      
                var parameters = string.Concat(
                    "?ControlDefinitionName=",
                    CustomModuleDefinition.BackendDefinitionName,
                    "&ViewName=",
                    CustomModuleDefinition.BackendInsertViewName);
                DialogElement createDialogElement = CustomModuleDefinitionHelper.CreateDialogElement(
                    CustomModuleGridView.DialogsConfig,
                    CustomModuleDefinitionHelper.CreateCommandName,
                    "ContentViewInsertDialog",
                    parameters);
                CustomModuleGridView.DialogsConfig.Add(createDialogElement);
      
                parameters = string.Concat(
                    "?ControlDefinitionName=",
                    CustomModuleDefinition.BackendDefinitionName,
                    "&ViewName=",
                    CustomModuleDefinition.BackendEditViewName);
                DialogElement editDialogElement = CustomModuleDefinitionHelper.CreateDialogElement(
                    CustomModuleGridView.DialogsConfig,
                    CustomModuleDefinitionHelper.EditCommandName,
                    "ContentViewEditDialog",
                    parameters);
                CustomModuleGridView.DialogsConfig.Add(editDialogElement);
      
                parameters = string.Concat(
                    "?ControlDefinitionName=",
                    CustomModuleDefinition.BackendDefinitionName,
                    "&ViewName=",
                    CustomModuleDefinition.BackendPreviewViewName);
                DialogElement previewDialogElement = CustomModuleDefinitionHelper.CreateDialogElement(
                    CustomModuleGridView.DialogsConfig,
                    CustomModuleDefinitionHelper.PreviewCommandName,
                    "ContentViewEditDialog",
                    parameters);
                CustomModuleGridView.DialogsConfig.Add(previewDialogElement);
      
                stringpermissionsParams = string.Concat(
                    "?moduleName=", CustomModuleDefinition.ModuleName,
                    "&typeName=", typeof(MyContentItem).AssemblyQualifiedName,
                    "&title=", Res.Get<CustomModule>().PermissionsForCustomModule);
                DialogElement permissionsDialogElement = CustomModuleDefinitionHelper.CreateDialogElement(
                    CustomModuleGridView.DialogsConfig,
                    CustomModuleDefinitionHelper.PermissionsCommandName,
                    "ModulePermissionsDialog",
                    permissionsParams);
                CustomModuleGridView.DialogsConfig.Add(permissionsDialogElement);
      
                stringversioningParams = string.Concat(
                    "?ControlDefinitionName=",
                    CustomModuleDefinition.BackendDefinitionName,
                    "&moduleName=", CustomModuleDefinition.ModuleName,
                    "&typeName=", typeof(MyCustomItem).AssemblyQualifiedName,
                    "&title=", Res.Get<CustomModule>().PermissionsForCustomModule,
                    "&backLabelText=", Res.Get<CustomModule>().BackToItems,
                    "&"+ CustomModuleDefinition.ComparisonViewHistoryScreenQueryParameter + "="+ CustomModuleDefinition.VersionCompariosonView);
      
                DialogElement versioningDialogElement = CustomModuleDefinitionHelper.CreateDialogElement(
                    CustomModuleGridView.DialogsConfig,
                    CustomModuleDefinitionHelper.HistoryCommandName,
                    "VersionHistoryDialog",
                    versioningParams);
                CustomModuleGridView.DialogsConfig.Add(versioningDialogElement);
      
                stringversioningGridParams = string.Concat(
                "?ControlDefinitionName=",
                CustomModuleDefinition.BackendDefinitionName,
                "&moduleName=", CustomModuleDefinition.ModuleName,
                "&typeName=", typeof(MyCustomItem).AssemblyQualifiedName,
                "&title=", Res.Get<CustomModule>().PermissionsForCustomModule,
                "&backLabelText=", Res.Get<CustomModule>().BackToItems,
                "&"+ CustomModuleDefinition.ComparisonViewHistoryScreenQueryParameter + "="+ CustomModuleDefinition.VersionCompariosonView);
      
                DialogElement versioningGridDialogElement = CustomModuleDefinitionHelper.CreateDialogElement(
                CustomModuleGridView.DialogsConfig,
                CustomModuleDefinitionHelper.HistoryGridCommandName,
                "VersionHistoryDialog",
                versioningGridParams);
                CustomModuleGridView.DialogsConfig.Add(versioningGridDialogElement);
      
                parameters = string.Concat(
                    "?ControlDefinitionName=",
                    CustomModuleDefinition.BackendDefinitionName,
                    "&ViewName=",
                    CustomModuleDefinition.BackendVersionPreviewViewName);
                DialogElement previewVersionDialogElement = CustomModuleDefinitionHelper.CreateDialogElement(
                    CustomModuleGridView.DialogsConfig,
                    CustomModuleDefinitionHelper.VersionPreviewCommandName,
                    "ContentViewEditDialog",
                    parameters);
                CustomModuleGridView.DialogsConfig.Add(previewVersionDialogElement);
      
                #endregion
      
                #region Links definition
      
                var url = RouteHelper.ResolveUrl(
                    CustomModuleDefinitionHelper.GetBaseUrl(CustomModule.CommentsPageId),
                    UrlResolveOptions.Rooted | UrlResolveOptions.RemoveTrailingSlash);
                LinkElement viewComments = newLinkElement(CustomModuleGridView.LinksConfig)
                {
                    Name = "viewComments",
                    CommandName = CustomModuleDefinitionHelper.CommentsCommandName,
                    NavigateUrl = url
                };
                CustomModuleGridView.LinksConfig.Add(viewComments);
      
                url = RouteHelper.ResolveUrl(
                    CustomModuleDefinitionHelper.GetBaseUrl(SiteInitializer.AdvancedSettingsNodeId),
                    UrlResolveOptions.Rooted | UrlResolveOptions.RemoveTrailingSlash);
                url += "/CustomModule";
                LinkElement viewSettings = newLinkElement(CustomModuleGridView.LinksConfig)
                {
                    Name = "viewSettings",
                    CommandName = CustomModuleDefinitionHelper.SettingsCommandName,
                    NavigateUrl = url
                };
                CustomModuleGridView.LinksConfig.Add(viewSettings);
      
                CustomModuleDefinitionHelper.CreateNotImplementedLink(CustomModuleGridView);
      
                #endregion
      
                backendContentView.ViewsConfig.Add(CustomModuleGridView);
      
                #endregion    
      
                #region CustomModule backend details view
      
                var CustomModuleEditDetailView = newDetailFormViewElement(backendContentView.ViewsConfig)
                {
                    Title = "EditItem",
                    ViewName = CustomModuleDefinition.BackendEditViewName,
                    ViewType = typeof(DetailFormView),
                    ShowSections = true,
                    DisplayMode = FieldDisplayMode.Write,
                    ShowTopToolbar = false,
                    ResourceClassId = typeof(CustomModule).Name,
                    WebServiceBaseUrl = "~/Sitefinity/Services/Content/CustomModuleItemService.svc/",
                    IsToRenderTranslationView = true
                };
      
                backendContentView.ViewsConfig.Add(CustomModuleEditDetailView);
      
                #region Versioning Comparioson Screen
                var versionComparisonView = newComparisonViewElement(backendContentView.ViewsConfig)
                {
                    Title = "VersionComparison",
                    ViewName = CustomModuleDefinition.VersionCompariosonView,
                    ViewType = typeof(VersionComparisonView),
                    DisplayMode = FieldDisplayMode.Read,
                    ResourceClassId = typeof(CustomModule).Name,
                };
      
                backendContentView.ViewsConfig.Add(versionComparisonView);
      
                versionComparisonView.Fields.Add(newComparisonFieldElement(versionComparisonView.Fields) { FieldName = "Title", Title = "lTitle", ResourceClassId = typeof(CustomModule).Name });
                versionComparisonView.Fields.Add(newComparisonFieldElement(versionComparisonView.Fields) { FieldName = "Content", Title = "lContent", ResourceClassId = typeof(CustomModule).Name });
      
      
                versionComparisonView.Fields.Add(newComparisonFieldElement(versionComparisonView.Fields) { FieldName = "Author", Title = "Author", ResourceClassId = typeof(CustomModule).Name });
                versionComparisonView.Fields.Add(newComparisonFieldElement(versionComparisonView.Fields) { FieldName = "SourceName", Title = "SourceName", ResourceClassId = typeof(CustomModule).Name });
                
      
                #endregion
      
                var CustomModuleDetailView = newDetailFormViewElement(backendContentView.ViewsConfig)
                {
                    Title = "CreateNewItem",
                    ViewName = CustomModuleDefinition.BackendInsertViewName,
                    ViewType = typeof(DetailFormView),
                    ShowSections = true,
                    DisplayMode = FieldDisplayMode.Write,
                    ShowTopToolbar = false,
                    ResourceClassId = typeof(CustomModule).Name,
                    WebServiceBaseUrl = "~/Sitefinity/Services/Content/CustomModuleItemService.svc/",
                    IsToRenderTranslationView = false
                };
      
                backendContentView.ViewsConfig.Add(CustomModuleDetailView);
      
                var previewLocalization = newDictionary<string, string>()
                {
                    { "ItemVersionOfClientTemplate", Res.Get<VersionResources>().ItemVersionOfClientTemplate },
                    { "PreviouslyPublished", Res.Get<VersionResources>().PreviouslyPublishedBrackets },
                    { "CannotDeleteLastPublishedVersion", Res.Get<VersionResources>().CannotDeleteLastPublishedVersion }
                };
                var previewExternalScripts = CustomModuleDefinitionHelper.GetExtenalClientScripts(
                    "Telerik.Sitefinity.Versioning.Web.UI.Scripts.VersionHistoryExtender.js, Telerik.Sitefinity",
                    "OnDetailViewLoaded");
                var CustomModuleHistoryPreviewDetailView = newDetailFormViewElement(backendContentView.ViewsConfig)
                {
                    Title = "EditItem",
                    ViewName = CustomModuleDefinition.BackendVersionPreviewViewName,
                    ViewType = typeof(DetailFormView),
                    ShowSections = true,
                    DisplayMode = FieldDisplayMode.Read,
                    ShowTopToolbar = false,
                    ResourceClassId = typeof(CustomModule).Name,
                    ExternalClientScripts = previewExternalScripts,
                     WebServiceBaseUrl = "~/Sitefinity/Services/Content/CustomModuleItemService.svc/",
                    ShowNavigation = true,
                    Localization = previewLocalization
                };
      
                backendContentView.ViewsConfig.Add(CustomModuleHistoryPreviewDetailView);
      
                var CustomModulePreviewDetailView = newDetailFormViewElement(backendContentView.ViewsConfig)
                {
                    Title = "EditItem",
                    ViewName = CustomModuleDefinition.BackendPreviewViewName,
                    ViewType = typeof(DetailFormView),
                    ShowSections = true,
                    DisplayMode = FieldDisplayMode.Read,
                    ShowTopToolbar = false,
                    ResourceClassId = typeof(CustomModule).Name,
                    ExternalClientScripts = previewExternalScripts,
                    ShowNavigation = true,
                    WebServiceBaseUrl = "~/Sitefinity/Services/Content/CustomModuleItemService.svc/"
      
                };
      
                backendContentView.ViewsConfig.Add(CustomModulePreviewDetailView);
      
                #region CustomModule backend forms definition
      
                #region Insert Form
                CustomModuleCustomModuleDefinition.CreateBackendSections(CustomModuleInsertDetailView);
                CustomModuleDefinitionHelper.CreateBackendFormToolbar(CustomModuleInsertDetailView, typeof(CustomModule).Name, true);
                #endregion
      
                #region Edit Form
      
                CustomModuleDefinition.CreateBackendSections(CustomModuleEditDetailView);
                CustomModuleDefinitionHelper.CreateBackendFormToolbar(CustomModuleEditDetailView, typeof(CustomModule).Name, false);
      
                #endregion
      
                #region Preview History Form
                CreateBackendSections(CustomModuleHistoryPreviewDetailView, FieldDisplayMode.Read);
                CustomModuleDefinitionHelper.CreateHistoryPreviewToolbar(CustomModuleHistoryPreviewDetailView, typeof(CustomModule).Name);
              
                #endregion
      
                #region Preview Form
                CreateBackendSections(CustomModulePreviewDetailView, FieldDisplayMode.Read);
                //TODO: add the preview screen toolbar widgets -->Edit,etc...
      
                #endregion
      
                #endregion
      
                #endregion
      
                returnbackendContentView;
            }
      
            #endregion
      
            #region Frontend CustomModuleDefinition
      
            /// <summary>
            /// Defines the ContentView control for CustomModule on the frontend
            /// </summary>
            /// <param name="parent">The parent configuration element.</param>
            /// <returns>A configured instance of <see cref="ContentViewControlElement"/>.</returns>
            internalstaticContentViewControlElement DefineCustomModuleFrontendContentView(ConfigElement parent)
            {
                // define content view control
                var controlDefinition = newContentViewControlElement(parent)
                {
                    ControlDefinitionName = CustomModuleDefinition.FrontendDefinitionName,
                    ContentType = typeof(MyCustomItem)
                };
      
                // *** define views ***
      
                #region CustomModule backend list view
      
                var CustomModuleListView = newContentViewMasterElement(controlDefinition.ViewsConfig)
                {
                    ViewName = CustomModuleDefinition.FrontendListViewName,
                    ViewType = typeof(MasterListView),
                    AllowPaging = true,
                    DisplayMode = FieldDisplayMode.Read,
                    ItemsPerPage = 20,
                    ResourceClassId = typeof(CustomModule).Name,
                    FilterExpression = CustomModuleDefinitionHelper.PublishedOrScheduledFilterExpression,
                    SortExpression = "PublicationDate DESC"
                };
      
                controlDefinition.ViewsConfig.Add(CustomModuleListView);
      
                #endregion
      
                #region CustomModule backend details view
      
                var CustomModuleDetailsView = newContentViewDetailElement(controlDefinition.ViewsConfig)
                {
                    ViewName = CustomModuleDefinition.FrontendDetailViewName,
                    ViewType = typeof(DetailsSimpleView),
                    ShowSections = false,
                    DisplayMode = FieldDisplayMode.Read,
                    ResourceClassId = typeof(CustomModule).Name
                };
      
                controlDefinition.ViewsConfig.Add(CustomModuleDetailsView);
      
                #endregion
      
                returncontrolDefinition;
            }
      
            #endregion
      
            #region Helper methods
      
            privatestaticvoidCreateBackendSections(DetailFormViewElement detailView)
            {
                CreateBackendSections(detailView, FieldDisplayMode.Write);
            }
      
            /// <summary>
            /// Creates the backend sections.
            /// </summary>
            privatestaticvoidCreateBackendSections(DetailFormViewElement detailView, FieldDisplayMode displayMode)
            {
                #region Version Section
                if(displayMode == FieldDisplayMode.Read)
                {
                    var versionSection = newContentViewSectionElement(detailView.Sections)
                    {
                        Name = "Sidebar",
                        CssClass = "sfItemReadOnlyInfo"
                    };
      
                    var versionField = newVersionNoteControlDefinitionElement(versionSection.Fields)
                    {
      
                        Title = Res.Get<CustomModule>().lTitle,
                        ResourceClassId = typeof(CustomModule).Name,
                        FieldName = "Comment",
                        WrapperTag = HtmlTextWriterTag.Li,
                        DisplayMode = displayMode
      
                    };
                    versionSection.Fields.Add(versionField);
                    detailView.Sections.Add(versionSection);
                }
                #endregion
      
                #region Toolbar section
      
                if(detailView.ViewName == CustomModuleDefinition.BackendEditViewName)
                {
                    var toolbarSection = newContentViewSectionElement(detailView.Sections)
                    {
                        Name = CustomModuleDefinitionHelper.ToolbarSectionName
                    };
      
                    var languageListFieldElement = newLanguageListFieldElement(toolbarSection.Fields)
                    {
                        ID = "languageListField",
                        FieldType = typeof(LanguageListField),
                        ResourceClassId = typeof(CustomModule).Name,
                        Title = Res.Get<CustomModule>().Language,
                        DisplayMode = displayMode,
                        FieldName = "languageListField",
                        DataFieldName = "AvailableLanguages"
                    };
                    toolbarSection.Fields.Add(languageListFieldElement);
      
                    detailView.Sections.Add(toolbarSection);
                }
      
                #endregion
      
                #region Main section
      
                var mainSection = newContentViewSectionElement(detailView.Sections)
                {
                    Name = "MainSection",
      
                };
      
                var titleField = newTextFieldDefinitionElement(mainSection.Fields)
                {
                    ID = "titleFieldControl",
                    DataFieldName = "Title",
                    DisplayMode = displayMode,
                    Title = Res.Get<CustomModuleResources>().lTitle,
                    CssClass = "sfTitleField",
                    ResourceClassId = typeof(CustomModuleResources).Name,
                    WrapperTag = HtmlTextWriterTag.Li,
                };
                
                mainSection.Fields.Add(titleField);
      
                #endregion
      
               
      
      
                #region Status
      
                CustomModuleDefinitionHelper.AddStatusFieldSectionDefinition(detailView, typeof(CustomModuleResources).Name, displayMode);
                #endregion
            }
      
            #endregion
      
            #region Constants
      
               // define all public or static constraints here
            #endregion
        }
    }

    each definition element can have a css class that you can set by making a reference to Telerik.Sitefinity.Resources.Themes.Default.CSS.Layout.css The CssClass is a property of the base FieldDefinitionElement that represents a configuration element within a configuration file for each field definition.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. TIOS
    TIOS avatar
    48 posts
    Registered:
    22 Mar 2006
    17 Dec 2010
    Link to this post
    Erk and I thought it was going to be a simple case of just adding some css to what i've just wrote! :)

    Think i'm going to get what i have working first then convert it as im also doing a intrasite module convert & vb.net -> c# port at the same time!

    Thanks for the fast response!
  4. TIOS
    TIOS avatar
    48 posts
    Registered:
    22 Mar 2006
    17 Dec 2010
    Link to this post
    Ok just got the basics all working in my test control so wanted to look at doing this.  Bit confused where this goes does this go in my PublicControls/AuctionsOver?

    You don't have a sample jobs app or something else that shows a full working model?

    Thanks,
    Chris
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    17 Dec 2010
    Link to this post
    Hello Chris,

    We are working on a sample module with public controls that will be available for downloading within two weeks. The module will have public controls and it will be similar to the Products module that we have for 3.x edition.

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. TIOS
    TIOS avatar
    48 posts
    Registered:
    22 Mar 2006
    17 Dec 2010
    Link to this post
    Ok thanks think i'll plod on just getting the code working then it's effectively to restyle it, just trying to workout the equivlant of CreateHostViewCommand("ViewName", itemId.ToString(), Nothing).

    Thanks,
    Chris
  7. Saad
    Saad avatar
    98 posts
    Registered:
    10 Oct 2008
    05 Jan 2011
    Link to this post
    Can anyone give me a sample of this? I simply cant design admin forms based on my modules (document libraries fields). And also, I want to have a same look n feel all through admin section for both predefined modules and as well as custom modules.
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    05 Jan 2011
    Link to this post
    Hi,

    As you can see from the code above, each widget element has a CssClass  property where we set a class name that we get from an embedded resource. Each widget element uses its own css, so could you tell me which control appearance you want to mimic?

    All the best,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. Saad
    Saad avatar
    98 posts
    Registered:
    10 Oct 2008
    05 Jan 2011
    Link to this post
    I have fields like Name(string), DateofBirth(DateTime) and uploaded content  defined in my document library.
    I just wanted to have list of items (like Documents & Files). And add new or each item editable giving me popup (like Add New Page).
  10. Saad
    Saad avatar
    98 posts
    Registered:
    10 Oct 2008
    07 Jan 2011
    Link to this post
    Anyone?
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Jan 2011
    Link to this post
    Hello,

    You can use ItemsGrid bound with a web service which will give you similar appearance.

    <sfLists:ItemsGrid ID="flatTaxa" runat="server"
            ServiceBaseUrl="~/Sitefinity/Services/MyService/MyUsers.svc/"
            DataKeyNames="Id"
            BindOnSuccess="true"
            VisibleToolbars="Top"
            WrapperTagName="div"
            WrapperTagCssClass="rgTopOffset sfLetterMarked"
            CommandTagWrapperName="span"
            DefaultSortExpression="Title ASC"
            DeleteMultipleConfirmationMessage="<%$Resources:Labels, ItemsAreAboutToBeDeleted %>"
            DeleteSingleConfirmationMessage="<%$Resources:Labels, AreYouSureYouWantToDeleteItem %>">
            <ToolboxItems>
                <sitefinity:CommandToolboxItem runat="server" ContainerId="toolbar" CommandName="create" CommandType="CreateButton" WrapperTagName="li" WrapperTagCssClass="sfMainAction" />
                <sitefinity:CommandToolboxItem runat="server" ContainerId="toolbar" CommandName="groupDelete" Text="<%$Resources:Labels, Delete %>" WrapperTagName="li" />
                <sitefinity:CommandToolboxItem runat="server" ContainerId="toolbar" CommandName="bulkEdit" Text="<%$Resources:Labels, TagsBulkEdit %>" WrapperTagName="li" />
            </ToolboxItems>
            <Links>
                <sfDialog:LinkDefinition CommandName="viewItems" />
            </Links>
            <Dialogs>
                <sfDialog:DialogDefinition OpenOnCommandName="create" Name="UserData" CssClass="sfMaximizedWindow" />
                 
            </Dialogs>   
            <Items>
                <sfLists:ItemDescription HeaderText="<%$ Resources:Labels, Date %>" Name="Date " IsSearchField="false" ItemCssClass="sfTitleCol" HeaderCssClass="sfTitleCol">
                    <a href="#" class="sf_binderCommand_edit sfItemTitle">
                        {{Date}}
                    </a>
                </sfLists:ItemDescription>
                
            </Items>
         </sfLists:ItemsGrid>

    Another option is using a definitions as I showed you in another post.  We will have a sample with a custom module for the official release, so you will be able to see how this could be done in details.

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  12. TIOS
    TIOS avatar
    48 posts
    Registered:
    22 Mar 2006
    12 Jan 2011
    Link to this post
    Sweet now that makes it even easier is this in RC2 mind you doesnt matter if not as final will be out soon!
  13. Saad
    Saad avatar
    98 posts
    Registered:
    10 Oct 2008
    16 Jan 2011
    Link to this post
    Can anyone please provide a small example of how to use this class mentioned by Ivan? And where does configuration file of fields definition resides?
  14. Saad
    Saad avatar
    98 posts
    Registered:
    10 Oct 2008
    18 Jan 2011
    Link to this post
    Can anybody over here tell me how and where to use this big class? I just need to have a little push that how does it work!

    I really cant any way to have my module have top panel, sidebar etc as like other default modules.
  15. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    20 Jan 2011
    Link to this post
    Hello,

    Please download the Product samples module and backend and fronthend themes that we have in our SDK.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
15 posts, 0 answered