Field controls are client-side components that provide GUI for setting/modifying field values of a content. Thus, field controls are the basic building blocks of views that define how a content could be rendered.

Content build up of fields, and fields are presented with field controls when content are being presented on the ui (e.g. on the admin surface). Field controls provide user interfaces both for displaying and for editing field values.

Generic view controls

A content can be presented in 3 different modes depending on whether it is to be edited, to be browsed or to be created. Different views can be chosen for the content according to these 3 main scenarios.

A view control is a React component that defines the layout of the HTML block that represents a content. Views are built up of field controls - displaying values of content fields - embedded into custom HTML layout. The view defines the custom HTML to be rendered when the underlying content is displayed. As a content is built up of fields the view displays the content using field controls to provide a surface to display/modify the field values of the content. The view therefore depends on the content type of the specific content (since it defines the fields of the content) but a specific content can be displayed using various views.

To present a content using a view control in practice means that you may choose a view control to present the content with. For example you choose NewView set the repository of your app and a ContentType and you'll get an auto-generated form on the ui with which a content with the given type should be created. The fields that should be displayed are defined in the Content Type Definition with the property VisibleNew and generated into the typescript classes schema. The control mapper collects the fields that should be displayed on the current view and assignees the related field controls to build up the form.

...
<Field name="LongTextField" type="LongText">
  <DisplayName>Description</DisplayName>
    <Configuration>
      ...
      <VisibleNew>Show</VisibleNew>
      ...
    </Configuration>
</Field>
...

Below json is the part of the client-side schema that is auto-generated by the CTD with the GetSchema action:

...
{
    ContentTypeName: 'Folder',
    DisplayName: 'Folder',
    Description: 'Use folders to group content.',
    ...
    FieldSettings: [
      {
        Name: 'Description',
        FieldClassName: 'SenseNet.ContentRepository.Fields.LongTextField',
        DisplayName: 'Description',
        Description: 'Description of the content.',
        ReadOnly: false,
        Compulsory: false,
        OutputMethod: 0,
        VisibleBrowse: 0,
        VisibleEdit: 0,
        VisibleNew: 1,
        Type: 'LongTextFieldSetting',
      },
    ],
  },
...

Control mapping

There's a control mapper, that keeps connection between field settings in the schema and field control components, so it can auto-generate forms by the schema definition. Mapper knows which component should represent the current field, it knows if the field has any validation configs (maximum value, minimum value, etc), or it is readonly or required, and so on. It passes every info to the related field control generating the form that is needed.

...
.setupFieldSettingDefault<ChoiceFieldSetting>('ChoiceFieldSetting', (setting) => {
      switch (setting.DisplayChoice) {
        case 2:
          return FieldControls.CheckboxGroup
        case 0:
          return FieldControls.DropDownList
        case 1:
          return FieldControls.RadioButtonGroup
        default:
          if (setting.AllowMultiple) {
            return FieldControls.CheckboxGroup
          } else {
            return FieldControls.DropDownList
          }
      }
...