Use custom fields in widget templates

Overview

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.

Add custom fields to widget 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.

Customize the default custom field template

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.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?