Control the markup of form fields

Overview

You use form field templates to change the appearance of the form fields in Sitefinity CMS. Every form field has built-in templates that are packaged in the same assembly.

With MVC forms, you can override the default form field template by placing the physical file - either a CSS file, JavaScript, HTML, or other - in a specific location inside the SitefinityWebApp project structure. Sitefinity CMS searches for this location and, if it finds any of these files, uses them to replace the default form field template. The location depends on the built-in ASP.NET MVC view engines. By default, ASP.NET MVC comes with WebFormViewEngine and RazorViewEngine.

The following procedure describes how to change the built-in form field template depending on the view engine you are using.

By default, all MVC-oriented logic must reside in the Mvc folder in the SitefinityWebApp project. This folder is created automatically by Sitefinity CMS in your web application. The new MVC form fields appear in the Sitefinity CMS toolbox

Procedure

To modify the default template of the Textbox field that uses the RazorViewEngine:

1. In Visual Studio, open your SitefinityWebApp project and click Mvc » Views.

2. Create a new folder and name it TextField.

   NOTE: The name of the folder must correspond to the name of the form field whose template you want to change. For example, if you need to change the template of the Submit button field, you must name the folder SubmitButton.

3. Open the context menu of the TextField folder and add a new MVC 5 View Page file with Razor syntax and name it Write.Default.cshtml.

   NOTE: The name of the file must be Write.Default  because the TextField controller renders a view named Write.Default  when a form field is displayed in write mode, that is when the website user can input information. For more information, see Naming conventions.

   NOTE: If you have existing widget template in your project’s ResourcePackages directory, it will take precedence over this file. For more information, see Priorities for resolving views.

4. Enter a sample text, for example, enter Testing new template.

5. Build the solution and run it.

6. In Sitefinity CMS backend, create a new MVC form.

7. In it, place the Textbox form field, which is already present in the toolbox section.

As a result, the Testing new template text is displayed.

Control the display mode of fields

When you set the value of the FormControlDisplayMode attribute of the form, keep in mind the behavior of the ViewMode and DisplayMode field attributes:

• When FormControlDisplayMode is set to Write or has no set value, the Read or Write field settings remain enforced and are thus usable.
• When FormControlDisplayMode is set to Read, all Read or Write field settings are ignored and operate in Read mode only. In such cases, fields that have been manually set by a developer to Write are not rendered. For example, Submit buttons that are set to Write by default are not rendered.
• Fields that have differing values of their FormControlDisplayMode and FormView or DisplayMode attributes are not rendered.

Use read-only template with text fields

To display the text field, using its read-only template, perform the following:

1. Add the form widget to a page.
2. Associate the form widget with the created form.
3. Click Edit » Advanced » Model.
4. Set ViewModel to Read.
5. Click Save.