Use custom fields in widget templates

Once you create a custom field associated to a particular content type, content editors can enter information in this field while creating content of this type in the backend. For more information, see Custom fields.

To display the custom field and the information it represents on the frontend of your website, you need to add the field to the widget template that you use to display that content type. For example, if you have a custom field Country in your News module, you need to add the Country field to News widget template. Widget templates are located in the MVC/Views folder of the resource package your website is using. For more information, see Resource packages.

Custom fields for built-in modules work the same way as the fields of dynamic modules since dynamic modules are comprised entirely of custom fields. Once you create a dynamic content type, a List and a Detail view templates for this content type are generated under Design » Widget templates. These templates consist of HTML markup and Razor code that renders the content of the custom field.  For each type of custom field, for example, short text, long text, related data, and so on, there is a default custom field template. You use these templates to visualize the custom fields on the templates of built-in and dynamic widgets.

You can find all default custom fields templates in Default custom fields templates.

Once you create a custom field for a content type, the field is accessible via the model of the content widget. Thus, to add the custom field to this widget’s template, you reference the field through the Fields property of the Item, for example @Model.Item.Fields.Country. Depending on the type of field you created, you add the default custom field template, listed in Default custom fields templates. The following sample demonstrates how to add a Country custom field to a News module.

In the code above:

• You include the using namespaces 
• The newly added custom field is surrounded by @Start <field_title> field@ and @End <field_title> field@ comments, so that you can better navigate through the markup in case there are other custom fields added.
• You use the Model.Item.Fields.Country to designate that you are including the Country custom field. When using another type of custom field, you add the relevant name, for example, Model.Item.Fields.Address for an Address custom field.

Sometimes you want to change the default custom field template, so that each time a widget template for a dynamic content type is generated, a custom field is rendered with a particular markup. For example, you want to customize the template of the ShortTextField custom field, so that it has a specific markup whenever you use in any content widget template.

Say you want to change the date format that the Date custom field uses. To do this:

1. Copy the DateField template from the Default custom fields templates.
2. Place the template in the following folder in the root of your project: WidgetTemplates/Fields/Templates.
   The Templates folder contains the default custom field templates.
3. Open the DateField.cshtml file and, to change the format of the DateTime field, enter the following:
   
   

Тhis way the next time you generate a dynamic content type that contains a Date field, the template for this field will be pulled from your project, as opposed to taking the template from Sitefinity.

The following sections list the default templates for all custom fields types. You use the default templates to add the custom fields to content widgets templates and display the fields on the frontend. For more information, see Use custom fields in widget templates.

NOTE: When using any of the templates below, you need to replace NameOfField with the name of the custom field.

IMPORTANT: Keep in mind that the default custom fields templates can be updated. For the latest version of the templates, see the GitHub repository.

Short text

Long text (text area)

Long text (editor)

Choices (radio buttons and dropdown)

Yes/No

Date and time

Number

Flat classification

No template.

Hierarchical classification (multi)

Hierarchical classification (single)

Address

Related image (multi)

Related image (single)

Related video (multi)

Related video (single)

Related content - news, blogs, events, dynamic types, and so on (multi)

Related content - news, blogs, events, dynamic types, and so on (single)

Related pages (multi)

Related pages (single)