Products Module - Change New/Edit Item Template

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

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:

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

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

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

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

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

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