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

Forums / Sitefinity SDK / Products Module - Change New/Edit Item Template

Products Module - Change New/Edit Item Template

8 posts, 0 answered
  1. Phill Hodgkinson
    Phill Hodgkinson avatar
    362 posts
    Registered:
    10 Nov 2004
    17 Jan 2011
    Link to this post
    Hi there,

    I'm wondering if someone can point me in the the right direction on how to change the Backend Template for a New/Edit Item, specifically for the Products module. Currently the module has a very large content area, but unless all products are assumed to be books this area is not needed or at the very least is a duplicate of "whatsinthebox" description. What I'd prefer to have is the content area as a small area, maybe 200px in height and then a series of Image Selectors so that the Content Editor can easily select a MainImage, ThumbnailImage, PreviewImage, AltImage etc from either the Gallery or preferably the File system (although I know the later isn't possible with RadEdtior so I assume selecting from file system still doesn't exist). 

    Is there an easy way to point the New/Edit content item designer in the backend to a usercontrol to use as a template? If so, how would image selectors be added? Any help here would be greatly appreciated.

    Regards,
    Phill
  2. Dido
    Dido avatar
    149 posts
    Registered:
    24 Sep 2012
    20 Jan 2011
    Link to this post
    Hi Phill Hodgkinson,

     We use definitions for the Backend UI. One of our architects and senior developer, Ivan Osmak, is in the process of writing a series of posts about definitions and other new concepts.

    In nutshell, go to ProductsDefinitions.CreateBackendSections, find the region "Main section", and you will come across this code:

    var contentField = new HtmlFieldElement(mainSection.Fields)
    {
        ID = "contentFieldControl",
        DataFieldName = "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);
     
    var summaryField = new TextFieldDefinitionElement(mainSection.Fields)
    {
        ID = "whatsInTheBoxFieldControl",
        DataFieldName = "WhatIsInTheBox",
        DisplayMode = displayMode,
        Title = Res.Get<ProductsResources>().WhatIsInTheBox,
        CssClass = "sfFormSeparator",
        WrapperTag = HtmlTextWriterTag.Li,
        ResourceClassId = typeof(ProductsResources).Name,
        Rows = 5
    };
    summaryField.ExpandableDefinitionConfig = new ExpandableControlElement(summaryField)
    {
        Expanded = false,
        ExpandText = Res.Get<ProductsResources>().ClickToAddSummary
    };
    summaryField.ValidatorConfig.Required = false;
    mainSection.Fields.Add(summaryField);

    You will notice that certain CSS classes are applied to the RadEditor-s. Now, these are the initial values. Actual values are read from configuration.

    If you go to Administration/Settings->Advanced/ContentView/Controls/ProductsBackend/Views/ProductsBackendInsert or ProductsBackendEdit/Sections/MainSection/Fields/Content or WhatIsInTheBox/ , you will notice that you have the ability to change the look and field of those editors.

    You could try applying a CSS class that changes the RadEditor-s size.

    Kind regards,
    Dido
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Phill Hodgkinson
    Phill Hodgkinson avatar
    362 posts
    Registered:
    10 Nov 2004
    28 Jan 2011
    Link to this post
    Hi Dido,

    I had put this to the side for a while but am back to working on it again. I've figured out how to add a specific and unique CssClass to my content area. The part I'm missing is how to I include a custom css style sheet in the backend that has my new class definitions? Is there an Administration > Settings option to point to additional css files for the backend?

    Thanks in advance for your help.

    Regards,
    Phill
  4. George
    George avatar
    28 posts
    Registered:
    24 Sep 2012
    03 Feb 2011
    Link to this post
    Hello Phill Hodgkinson,

    You can try to add external CSS files through the CSS widget, which you can see when editing a backend page. To edit a backend page you should go to Administration -> Backend Pages, and click on the page you want to edit. Then find the CSS widget categorized under "Scripts and Styles" and drag it to the page. Use the designer of the widget to point to your .css file.

    All the best,
    George
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Phill Hodgkinson
    Phill Hodgkinson avatar
    362 posts
    Registered:
    10 Nov 2004
    03 Feb 2011
    Link to this post
    Hi George,

    Thanks for the response. Unfortunately this option doesn't work for my scenario. I need this css to be available to the controls of my custom module (based on the Products Module). Doing as you mentioned puts the css in the head of the parent page but all the controls for the products module are in an iFrame so they don't have access to the style definitions of the parent. The other issue here is that I'd like to have this css added when the module installs so that there isn't an extra step to get it up and running.

    Any other ideas on how I can get either inline css or link to a css file working in a custom module?

    Thanks again.
    Phill
  6. George
    George avatar
    28 posts
    Registered:
    24 Sep 2012
    07 Feb 2011
    Link to this post
    Hi Phill Hodgkinson,

    You can reference an external CSS file within the IFrame used in the RadEditor in:
    Administration -> Settings -> Advanced -> Appearance -> EditorContentAreaCssFile, but you should mind that this is a global setting.

    The shortest way to reference the css file is to put it right in the template. There are two templates in the Products module: DetailsView.ascx and CustomSettingsDesignerView.ascx . There you can directly reference your external CSS file.

    If the suggestions above do not work for you, I would ask you to send us a sample project (could be the Products module) with screenshots what controls exactly you want to style with external CSS. Then I'll send you back the solution.

    Kind regards,
    George
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Phill Hodgkinson
    Phill Hodgkinson avatar
    362 posts
    Registered:
    10 Nov 2004
    07 Feb 2011
    Link to this post
    Hi George,

    Your first tip for changing EditorContentAreaCssFile doesn't actually exist in my Sitefinity Settings. Even if it did, that's not what I'm trying to change. That file defines the css of content in the editor window where I want to change the height of the editor. For me my product's are best illustrated by images with only a short description yet when a user goes to the edit/new product page they're presented with a very large (relative to the required content) editor area. I want to be able to set the height of this area. I can add another css class but have no way of adding the definition for that class. The two templates you refer to in the Products module are not used by the Edit/New product screen in the backend.

    Any other suggestions? Again this seems unnecessarily difficult compared to how it used to be in 3.x. 

    Thanks again,
    Phill
  8. George
    George avatar
    28 posts
    Registered:
    24 Sep 2012
    11 Feb 2011
    Link to this post
    Hi Phill Hodgkinson,

    I have attached the template of the DetailForm used in the DetailFormViewElement which you have in the definitions of the view. What you have to do is to reference your own external CSS file in this template and then add the template as external TemplatePath.

    Let's say your module is called ProductsModule, the text field for setting the TemplatePath could be reached at Administration -> Settings -> Advanced -> ContentView -> Controls -> ProductsBackend -> Views -> ProductsBackendInsert and there in the field TemplatePath put the path to your embedded customized DetailView.ascx. 

    Kind regards,
    George
    the Telerik team

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