View source for Field Control Templates

[[Category:Fields]]
{{FeatureInfo
|editions=wcm,ecm,comm
|fromversion=6.0
|wikicomplete=100%
|interest=enduser,builder
}}
 
{| style="margin-left:2em;" align="right"
| __TOC__
|}

=Overview=
Field Controls are ASP.Net controls that provide the UI for setting or modifying field values of a content. These are the building blocks of the [[Content View]], that defines the layout of the content. To display the fields of the content, both in edit view and browse view, we need to present a template for each.

{{Screenshot|Contentpicker.png|Field Controls provide UI for Fileds}}

=Generic Field control=
Each [[Field]] is defined by a generic field control as default to be rendered. Default setting given by the developer of the Field can be overridden by setting it the Field Setting’s ControlHint property in the [[Content Type Definition]] of the displayed content.
There are common properties defined in the field controls: like filed name, control mode, frame mode. A basic validation logic can be stored in the field itself in the [[Content Type Definition]], but also can be held by the field control.


=Field Control Templates=
Field Controls are the basic building blocks of [[Content View]] – views that define the HTML layout of Content when presented. The HTML layout generated by a Field Control is either defined by its implementation or an ascx template. These templates can be defined globally or locally. Most built-in Field Controls support templated operation. Globally accessible Field Control Templates used by the various Field Controls are placed in the/Root/Global/fieldcontroltemplates folder. All fields, templates are defined to here, are representing with a folder named after the filedname, and have a Browse.ascx and an Edit.ascx views under the folders, which are used by Control Mode. Also skin-related templates can be set the same way at /Root/Skins/mySkin/fieldcontroltemplates and the usage of these templates will be skin-dependent. Moreover, templates can also be defined locally, different for each Field Control instance that is used in a Content View.

{{Screenshot|Shorttextfield.png|Templated Field Control}}

=Field Control modes=
A Field Control can be rendered in several modes. There is switch that defines the layout of the control and another one that controls the behavior of the Field Control:

'''Frame Mode''' defines if a Field Control is rendered with a frame containing the Name and Description of the Field, or without it – just the control itself. When it is set to “ShowFrame”, a frame containing Field metadata is rendered around the control. When it’s set to “NoFrame” the control is rendered by itself.


<source lang="asp">
<sn:DisplayName ID="Name" runat="server" FieldName="DisplayName" ControlMode="Edit" FrameMode="ShowFrame" AlwaysUpdateName="true" />
</source>


<source lang="asp">
<sn:ShortText ID="DisplayName" runat="server" FieldName="DisplayName" FrameMode="NoFrame" ControlMode="Edit"></sn:ShortText>
</source>


'''Control Mode''' switches the behavior of control. As the Field Control can either provide a UI to allow modifications to the underlying Field's value, or it just renders the Field value in browse mode. Simply to display the Field value without providing means to modify the value. When Control Mode is set to ”Edit” the control is editable, otherwise when it is set to “Browse” it presents the Field value in a browse-only mode. When these properties are not set in a Content View, these mode-switches fall back to the corresponding properties of the containing Content View.


<source lang="asp">
<sn:DropDown ID="DropDown" runat="server" FieldName="MyDropdown" ControlMode="Edit"/>
</source>


<source lang="asp">
<<sn:LongText runat="server" ID="DescriptionField" FieldName="Description" ControlMode="Browse" />
</source>



=Most Common Field Controls=
'''[[ShortText Field Control]]:''' handles [[ShortText Field]], and provides an interface to display/modify short text data. With ShortText field control textual data can be displayed or edited up to 450 characters. (Longer text will be truncated on save!) Ideal for storing simple descriptions, but also can contain complex HTML formatted text to display custom visualized data.

'''[[LongText Field Control]]:''' handles [[LongText Field]], and provides an interface to display/modify text data. With LongText Field Control textual data can be displayed or edited without length restrictions. Ideal for editing simple descriptions, but also can handle complex HTML formatted text to display custom visualized data
{{Screenshot|Longtextfield.png|Longtext Field}}

'''[[Number Field Control]]:''' responsible for displaying or editing decimal (fixed-point) numbers. With Number Field Controls any kind of numeric data can be displayed and edited.

'''[[Boolean Field Control]]:''' handles [[Boolean Field]] and provides a checkbox to modify a value to be true or false. With the Boolean field control boolean data can be displayed or edited. The value can be displayed with a CheckBox or as a simple text. As it is Boolean, the value of it can only be true or false

'''[[DateTime Field]] Control:''' handles DateTime Fields and provides an easy way to select the date you want to store. The browse-template for DatePicker field:


<source  lang="asp">
<%@  Language="C#" EnableViewState="false" %>
<%@ Import Namespace="SNControls=SenseNet.Portal.UI.Controls" %>
<%@ Import Namespace="SNFields=SenseNet.ContentRepository.Fields" %>
<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="SenseNet.Portal.UI" %>

<span class='<%# "sn-date-" + UITools.GetFieldNameClass(Container) %>'><%# DataBinder.Eval(Container, "Data") %></span>
<script>
    $(function () {
        SN.Util.setFriendlyLocalDate('<%# "span.sn-date-" + UITools.GetFieldNameClass(Container) %>'
            ,'<%= CultureInfo.CurrentUICulture %>'
            ,'<%# ((DateTime)((SNControls.FieldControl)Container).GetData()).ToString(CultureInfo.GetCultureInfo("en-US")) %>'
            ,'<%= CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern.ToUpper() %>'
            ,'<%# (((SNControls.DatePicker)Container).Mode != SNFields.DateTimeMode.Date).ToString().ToLower() %>');
    });
</script>
</source>


The edit-template for DatePicker filed:


<source lang="asp">
<%@  Language="C#" %>
<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="SenseNet.Portal.UI" %>
<%@ Import Namespace="SNControls=SenseNet.Portal.UI.Controls" %>
<%@ Import Namespace="SNFields=SenseNet.ContentRepository.Fields" %>
<%@ Import Namespace="SenseNet.ContentRepository.Storage" %>
<%@ Import Namespace="SenseNet.Portal.UI" %>

<sn:ScriptRequest ID="ScriptRequest1" runat="server" Path='<%# ((SNControls.DatePicker)Container).Mode == SNFields.DateTimeMode.None ? string.Empty : "$skin/scripts/jqueryui/minified/jquery-ui.min.js" %>' />
<sn:ScriptRequest ID="ScriptRequest2" runat="server" Path='<%# ((SNControls.DatePicker)Container).GetjqueryLanguageScriptPath() %>' />
<sn:ScriptRequest ID="ScriptRequest3" runat="server" Path='$skin/scripts/sn/SN.Util.js' />
<sn:ScriptRequest ID="ScriptRequest5" runat="server" Path='$skin/scripts/moment/moment.min.js' />
<sn:ScriptRequest ID="ScriptRequest4" runat="server" Path='$skin/scripts/ODataManager.js' />

<sn:CssRequest ID="CssRequest1" runat="server" CSSPath='<%# ((SNControls.DatePicker)Container).Mode == SNFields.DateTimeMode.None ? string.Empty : "$skin/styles/jqueryui/jquery-ui.css" %>' />

<asp:PlaceHolder ID="InnerDateHolder" runat="server">
    <%=GetGlobalResourceObject("FieldControlTemplates", "Date")%><asp:TextBox ID="InnerControl" runat="server" CssClass='<%# "sn-ctrl sn-ctrl-text sn-ctrl-date sn-datepicker-" + UITools.GetFieldNameClass(Container) %>' Style="width: 100px;"></asp:TextBox>
</asp:PlaceHolder>
<asp:PlaceHolder ID="InnerTimeHolder" runat="server">
    <%=GetGlobalResourceObject("FieldControlTemplates", "Time")%>
</asp:PlaceHolder>
<asp:TextBox ID="InnerTimeTextBox" runat="server" CssClass='<%# "sn-ctrl sn-ctrl-text sn-ctrl-time-" + UITools.GetFieldNameClass(Container) %>' Style="width: 100px;"></asp:TextBox>
<span class='<%# "sn-iu-desc sn-ctrl-time-" + UITools.GetFieldNameClass(Container) %>'></span>
<asp:PlaceHolder ID="InnerTimZoneOffsetHolder" runat="server">
    <asp:TextBox ID="InnerTimeZoneOffsetTextBox" runat="server" CssClass='<%# "sn-ctrl sn-ctrl-text sn-ctrl-timezoneoffset-" + UITools.GetFieldNameClass(Container) %>' Style="display: none;"></asp:TextBox>
</asp:PlaceHolder>
<asp:Label ID="DateFormatLabel" runat="server" CssClass="sn-iu-desc" /><br />
<asp:Label ID="TimeFormatLabel" runat="server" CssClass="sn-iu-desc" />

<script type="text/javascript" language="javascript">
    $(function () {
        if (<%# ((SNControls.DatePicker)Container).Mode != SNFields.DateTimeMode.None ? "true" : "false" %>) {
            var datePickerConfig = <%# ((SNControls.DatePicker)Container).Configuration %>;
            SN.Util.configureDatePicker('<%# UITools.GetFieldNameClass(Container) %>', datePickerConfig, <%# ((SNControls.DatePicker)Container).Mode == SNFields.DateTimeMode.DateAndTime ? "true" : "false" %>);           
        }
    }); 
</script>
</source>


{{Screenshot|Datetimefield.png|DateTime Field}}

'''[[ReferenceGrid Field Control]]:''' handles [[Reference Field]] and provides an easy-to-use interface to manage references. The references are shown in a simple grid. One can add new references by clicking on “Add...” button. References can be removed by clicking the red “X” button next to each content, or by clicking the “Clear” button one can clear all references. The Reference Grid uses the Content Picker for adding new references, which is a customizable popup dialog.

'''[[Binary Field Control]]:''' handles [[Binary Field]] and provides an interface to modify binary. With Binary Field Control, depending on the configuration, the binary data of a Content can be added or modified. The control is rendered as a textarea where you can edit the binary manually or as a fileupload control allowing you uploading a new file. By default an upload control is rendered. A textarea is rendered when: the displayed Content is a Content Type, or when has an extension that is included in the web.config's EditSourceExtensions entry of the <portalSettings> section,or when the IsText property in the underyling Binary Fields’s Fields Setting is set to true.
{{Screenshot|Binaryfield.png|Binary Field}}

'''[[DropDown Field Control]]:''' displays a drop-down list for selecting an option from a single-selection [[Choice Field]]. When the underlying Choice Field is configured to allow extra value an extra textbox is rendered next to the dropdown control.
{{Screenshot|Select.png|Select Field}}

=Related links=
*[[Table_of_Contents#Fields]]
*[[Table_of_Contents#Field_Controls]]
*[[Content View]]
*[[Content Type Definition]]


=References=