Form Controls

Each control has a different type and each control consists of 3 components:

A C# class that defines the control and its properties as well as a CSHTML view path that is rendered. All controls inherit from the class FormControl and usually override a few methods

C# class of a control

using OneCore.Extensions;
using System;

namespace One.Core.UI.MVC.Forms.Controls
{
    /// <summary>
    /// Input Control
    /// </summary>
    public class InputControl : FormControl
    {
        #region Private

        private string _field;
        private string _regexValidation;
        public const string INPUT_VIEW_PATH = "~/Views/Forms/Controls/InputControlView.cshtml";

        #endregion
        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        public override string GetRenderControlViewPath()
        {
            return INPUT_VIEW_PATH;
        }

        #region Fields

        public string Field
        {
            get { return _field; }
            set
            {
                if (String.IsNullOrWhiteSpace(value))
                    throw new ArgumentException("InputControl-> Field is Empty", value);
                _field = value;

            }
        }

        public String Placeholder { get; set; }
        public string Error { get; set; }
        public string ErrorClass { get; set; }
        public string DefaultStaticValue { get; set; }
        public bool UrlEncode { get; set; }
        public int? MaxLength { get; set; }
        //If True, the control will become disabled if it has a value after the reflection
        public bool DisabledIfHasValue { get; set; }
        public bool MarkRed { get; set; } = false;
        public bool Sanitize { get; set; } = true;
        public string RegexValidation
        {
            get { return _regexValidation; }
            set
            {
                _regexValidation = value;
            }
        }
        public string AjaxUpdateUrl { get; set; }
        #endregion

        #region Ctor
        /// <summary>
        /// 
        /// </summary>
        public InputControl()
        {
            this.IsReadOnly = false;
            this.Required = false;
            this.FormControlType = ControlType.TextBox;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="field"></param>
        /// <param name="placeholder"></param>
        /// <param name="error"></param>
        /// <param name="required"></param>
        /// <param name="regexValidation"></param>
        public InputControl(string field, string placeholder, string error, bool required, string regexValidation)
        {
            if (String.IsNullOrWhiteSpace(field))
                throw new ArgumentException("InputControl->Field is Empty", field);


            this.Placeholder = placeholder;
            this.Error = error;
            this.Required = required;
            this.RegexValidation = regexValidation;
        }
        #endregion

        public override string GetUniqueKey()
        {
            return Field.Replace('.', '_');
        }

        public string GetEmailValidation()
        {
            // return this.IsEmail ? RegexValidation = "^([a-z0-9!#$%&\u0027*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&\u0027*+/=?^_`{|}~-]+)*@@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\s*;?\\s*)+$" : null;
            // /^ (([^<> ()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            //return this.IsEmail ? RegexValidation = "/^ (([^<> ()[\u005C]\\.,;:\u005Cs@\"]+(\u005C.[^<>()[\u005C]\\.,;:\u005Cs@\"]+)*)|(\".+\"))@((\u005C[[0-9]{1,3}\u005C.[0-9]{1,3}\u005C.[0-9]{1,3}\u005C.[0-9]{1,3}\u005C])|(([a-zA-Z\u005C-0-9]+\u005C.)+[a-zA-Z]{2,}))$/" : null;
            return null;
        }

        public override void UpdateEntity(object source, object destination)
        {
            var sourceValue = source.GetPropertyValue(Field);
            destination.SetPropertyValue(Field, sourceValue);
        }

        public override bool HasValue
        {
            get { return !string.IsNullOrEmpty(Model.GetPropertyValue(Field)?.ToString()); }
        }
        public bool IsEmail { get; set; }
        public bool IsOnlyUppercase { get; set; }
        public string TextMask { get; set; }
        public bool IsResourceCode { get; set; } = false;
        //Properties for Cascading
        public string SubscriptionField { get; set; }

        public string SubscriptionFieldSearchKey { get; set; }

        public string CascadingValue { get; set; }
    }
}

A CSHTML file that contains the HTML code

CSHTML view of a control

@using OneCore.Extensions
@using One.Core.Extensions
@using OneCore.WebHelper
@using OneCore.Framework.Services.Resources
@model One.Core.UI.MVC.Forms.Controls.InputControl
@{
    var formName = ViewData["FormName"];
    var finalValue = string.Empty;
    var rawvalue = Model.Model != null ? OneCore.Extensions.ReflectionExtensions.GetPropertyValue(Model.Model, Model.Field) : null;
    if (rawvalue != null)
    {
        finalValue = rawvalue.ToString();
        if (!string.IsNullOrEmpty(finalValue) && Model.DisabledIfHasValue)
        {
            Model.Disable = true;
        }

        if (Model.IsResourceCode)
        {
            var englishValue = Languages.CurrentResourceManager.GetStaticResourceKey(finalValue, "", "en-US");
            finalValue = Languages.Translate(finalValue, englishValue);
        }

    }
    else if (!string.IsNullOrEmpty(Model.DefaultStaticValue))
    {
        finalValue = Model.DefaultStaticValue;
    }
    var controlKey = Model.GenerateKey();
    var performsAjaxUpdate = !string.IsNullOrEmpty(Model.AjaxUpdateUrl);
    //finalValue = Model.Sanitize ? finalValue.Replace("\\", "\\\\")?.Sanitize() : finalValue.Replace("\\", "\\\\");
}
@*<input style="width: 100%" class="respo-input-line @(Model.MarkRed ? "uncertain-results" : "") @(Model.IsOnlyUppercase ? "text-uppercase" : "")" control-uid="@Model.ControlUId" id="input-@controlKey" data-bind="value: @Model.GetUniqueKey()" value="" @(Model.IsReadOnly ? " readonly='readonly' " : "") @(Model.Required ? " required " : "") @(Model.IsEmail ? " isemail " : "") @(!string.IsNullOrEmpty(Model.TextMask) ? "data-mask=" + Html.Raw(Model.TextMask) : "")>*@
<input style="width: 100%"
       type="text"
       class="respo-input-line @(Model.MarkRed ? "uncertain-results" : "") @(Model.IsOnlyUppercase ? "text-uppercase" : "")"
       control-uid="@Model.ControlUId"
       id="input-@controlKey"
       data-bind='value: @Model.GetUniqueKey(), valueUpdate: "afterkeydown"'
       value=""
        @Html.Raw(Model.IsReadOnly ? " readonly='readonly' " : "") 
        @Html.Raw(Model.Required ? " required " : "") 
        @Html.Raw(Model.IsEmail ? " isemail " : "")
        @Html.Raw(Model.Required ? " title=''" : "")>

<script>
    var text@(controlKey) = new TextBox({
        controlId: 'input-@controlKey',
        controlName: 'text@(controlKey)',
        isDisabled: @Model.Disable.ToJS(),
        field: @Model.GetUniqueKey().ToJS(),
        rawValue: @finalValue.ToJS(),
        encode: @Model.UrlEncode.ToJS(),
        regexValidation: @((Model.RegexValidation ?? "").ToJS()),
        fieldId: @Model.SubscriptionField.ToJS(),
        cascValue: @Model.CascadingValue.ToJS(),
        maxLength: @Model.MaxLength.ToJS(),
        isOnlyUpperCase: @Model.IsOnlyUppercase.ToJS(),
        SubscriptionFieldSearchKey: @Model.SubscriptionFieldSearchKey.ToJS(),
        performsAjaxUpdate: @performsAjaxUpdate.ToJS(),
        ajaxUpdateUrl: @Model.AjaxUpdateUrl.ToJS(),
         }).AddTo(@formName, @Model.Field.ToJS());
    @if (!string.IsNullOrEmpty(Model.TextMask))
    {
        @:$("#input-@controlKey").mask(@Model.TextMask.ToJS());
    }
</script>

A JavaScript file that contains client-side logic, for example methods to bind them with other controls or a usage of an external library, such as Kendo, for some more complicated controls

JavaScript class of the control

/// <reference path="baseControl.js" />

class TextBox extends BaseControl {
    constructor(options) {
        super(options);

        this.FieldName = options.field;
        this.rawValue = options.rawValue;
        this.encode = options.encode;
        this.regexValidation = options.regexValidation;
        this.fieldId = options.fieldId;
        this.cascValue = options.cascValue;
        this.maxLength = options.maxLength;
        this.isOnlyUpperCase = options.isOnlyUpperCase;
        this.SubscriptionFieldSearchKey = options.SubscriptionFieldSearchKey;
        this.RegexValidator = null;
        this.IsRegexValidatorJsonObject = false;
        this.performsAjaxUpdate = options.performsAjaxUpdate;
        this.ajaxUpdateUrl = options.ajaxUpdateUrl;

        let validationModel = null;
        if (this.maxLength !== null && this.maxLength > 0) {
            validationModel = {
                maxLength: {
                    params: this.maxLength,
                    message: ClientLangManager.GetResource("OD0000029", "You cannot enter more than") + " " + this.maxLength + " " + ClientLangManager.GetResource("OD0000030", "characters in this field.")
                }
            }
        }

        if (this.regexValidation) {
            if (validationModel == null)
                validationModel = {};
            try {
                let params = new RegExp(this.regexValidation, 'gu');
                validationModel.pattern = {
                    params: params,
                    message: ClientLangManager.GetResource("OD0006310", "Please enter a valid ") + this.GetLabelName()
                };
            }
            catch (err) {
                try {
                    let params = new RegExp(this.regexValidation, 'g');
                    validationModel.pattern = {
                        params: params,
                        message: ClientLangManager.GetResource("OD0006310", "Please enter a valid ") + this.GetLabelName()
                    };
                    console.log(`Error in form personalization for field ${this.FieldName} and regex ${this.regexValidation} no unicode flag is used because regex isn't valid. Please check through regex101, Javascript flavor, 'gu' regex flags for errors`);
                }
                catch {
                    console.log(err);
                    console.log(`Error in form personalization regex of control ${this.FieldName} ${this.regexValidation} is not valid. Please check through regex101 for errors`);
                    this.regexValidation = null;
                    options.regexValidation = null;
                }
            }


        }

        if (this.encode)
            this.ApplyFieldOnModel(this.FieldName, unescape(this.rawValue), validationModel);
        else
            this.ApplyFieldOnModel(this.FieldName, this.rawValue, validationModel);

        if (this.performsAjaxUpdate) {
            const self = this;
            this.ApplyChangeOnModel(this.FieldName, function () { self.PerformAjaxUpdate() });
        }
    }

    Disable() {
        this.GetControl().attr("disabled", "disabled");
    }

    Enable() {
        this.GetControl().removeAttr("disabled");
    }

    OnAfterApplyBinding() {
        if (this.regexValidation) {
            try {
                this.RegexValidator = new RegExp(this.regexValidation, 'gu');
            }
            catch (err) {
                try {
                    this.RegexValidator = new RegExp(this.regexValidation, 'g');
                }
                catch (er) {
                    this.RegexValidator = null;
                }
            }
        }
        this.Initialize();
    }

    Initialize() {
        if (this.fieldId) {
            this.Form.SubscribeToField(this.fieldId, this.OnParentChangeValue);
            // do not know why this used. left just in case
            this.Form.GetValueOfSubscribedField(this.fieldId);
        }
    }

    OnParentChangeValue(newValue) {
        if (this.cascValue) {
            if (newValue === this.cascValue) {
                this.Enable();
            } else {
                this.Disable();
            }
        }
    }

    /**
    * Gets the value of the model object and unencodes if nessecary
    * @method GetValue
    * @memberOf BaseControl
    * @return string
    */
    GetValue() {
        let res = {};
        let value = this.Model[this.FieldName]();

        if (value == null)
            return { [this.FieldName]: null };
        else if (typeof value !== 'string')
            value = "";

        if (this.encode)
            res[this.FieldName] = escape(value.trim());
        else if (this.isOnlyUpperCase)
            res[this.FieldName] = value.trim().toUpperCase();
        else
            res[this.FieldName] = value.trim();
        
        return res;
    }

    PerformAjaxUpdate() {
        if (this.ajaxUpdateUrl !== '') {
            this.PerformAjaxCall(this.ajaxUpdateUrl, this.Form.GetFormData());
        }
    }
}

The C# classes of all the available form controls exist at One.Core.UI.MVC/Forms/Controls directory.

The CSHTML views of all the available form controls exist at OneDealer.MVC/Views/Forms/Controls directory.

The JavaScript files of all the available form controls exist at OneDealer.MVC/Scripts/Forms/Controls directory,

A form control consists of the following basic elements:

Name	Description	Value Type
Title	The title of the control	string
ControlUId	A Unique Id for the control. (Usually used in client side)	string
ResourceKey	The resource key for the translation of the Title	string
ControlClass	css class for the control	string
ContainerClass	css class for the container of the control	string
Visible	It it will be displayed or not	bool
IsSystemRequired	If the value of the control is required by the system. (It can not be overwritten in the personlization)	bool
Required	if the value of the control is required. (It can be overwritten in personalization)	bool
IsReadOnly	If the control is in read only state	bool
Disable	if the control is in disable state	bool
IsFullWidth	if the width of the control is in full width	bool
Order	An indicator regarding the order that will be displayed	int

Form Control Types

Control Type	Description	OD Fully Qualified Assembly Name
InputControl	A textbox control	One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC
DropDownStatic	A dropdown control with static values	One.Core.UI.MVC.Forms.Controls.DropDownStatic, One.Core.UI.MVC
CheckboxControl	A checkbox control	One.Core.UI.MVC.Forms.Controls.CheckboxControl, One.Core.UI.MVC
DatePickerControl	A Date picker control	One.Core.UI.MVC.Forms.Controls.DatePickerControl, One.Core.UI.MVC
DateTimePickerControl	A Date and Time picker control	One.Core.UI.MVC.Forms.Controls.DateTimePickerControl, One.Core.UI.MVC
DropDownModelSource	A drop down control with remote datasource	One.Core.UI.MVC.Forms.Controls.DateTimePickerControl, One.Core.UI.MVC
NumericTextboxControl	A textbox control for numeric input	One.Core.UI.MVC.Forms.Controls.NumericTextboxControl, One.Core.UI.MVC
SwitchControl	A switch control	One.Core.UI.MVC.Forms.Controls.SwitchControl, One.Core.UI.MVC
FileUploadControl	A control to upload files	One.Core.UI.MVC.Forms.Controls.FileUploadControl, One.Core.UI.MVC
MapControl	A control to display map	One.Core.UI.MVC.Forms.Controls.MapControl, One.Core.UI.MVC
GridListSelection	A Grid List control, alternative to dropdown , if there are many records. It has the same capabilities to a Grid List Page	One.Core.UI.MVC.Forms.Controls.IntInputControl, One.Core.UI.MVC
EmailControl	A textbox control for email. It provides also email validation / verification	One.Core.UI.MVC.Forms.Controls.EmailControl, One.Core.UI.MVC
LinkControl	A control which displays link	One.Core.UI.MVC.Forms.Controls.LinkControl, One.Core.UI.MVC
InfoControl	A control which displays a read only text	One.Core.UI.MVC.Forms.Controls.InfoControl, One.Core.UI.MVC
PhoneControl	A read only control with link to phone value	One.Core.UI.MVC.Forms.Controls.PhoneControl, One.Core.UI.MVC
PhoneCountryControl	A control with formatted phone values by country	One.Core.UI.MVC.Forms.Controls.PhoneCountryControl, One.Core.UI.MVC
PictureControl	A control to display picture	One.Core.UI.MVC.Forms.Controls.PictureControl, One.Core.UI.MVC
TextareaControl	A textare control	One.Core.UI.MVC.Forms.Controls.TextareaControl, One.Core.UI.MVC
TimePickerControl	A Time picker control	One.Core.UI.MVC.Forms.Controls.TimePickerControl, One.Core.UI.MVC
GridControl	A kendo grid control	One.Core.UI.MVC.Forms.Controls.GridControl, One.Core.UI.MVC

Tabs

<Tab type="One.Core.UI.MVC.Pages.OneDealer.TabPage.OneDealerFormTab, One.Core.UI.MVC">
          <Title>Form Tab</Title>
          <TabIndex>10</TabIndex>
          <FormContainer>
            <Common>
              <PageDataProvider type="OneDealer.IncadeaDemo.BusinessLayer.Models.IncadeaModelDataPageBinderProvider, OneDealer.IncadeaDemo.BusinessLayer">
                <IncadeaDataProvider>
                  <!--<Url>/incadeaapi/get_aftersales_data/{request[vehicleCode]}</Url>-->
                  <Url>/ListDataItem?TestInt=1</Url>
                  <RequestType>GET</RequestType>
                </IncadeaDataProvider>
              </PageDataProvider>
            </Common>
            <FormName>VehicleForm</FormName>
            <Sections>
              <FormSection>
                <Title>General data</Title>
                <SectionID>GENERALDATA</SectionID>
                <Controls>
                  <FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
                    <Title>String</Title>
                    <Field>TestString</Field>
                  </FormControl>
                  <FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
                    <Title>Bool</Title>
                    <Field>TestBool</Field>
                  </FormControl>
                  <FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
                    <Title>Char</Title>
                    <Field>TestChar</Field>
                  </FormControl>
                  <FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
                    <Title>Int</Title>
                    <Field>TestInt</Field>
                  </FormControl>
                  <FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
                    <Title>Long</Title>
                    <Field>TestLong</Field>
                  </FormControl>
                  <FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
                    <Title>Float</Title>
                    <Field>TestFloat</Field>
                  </FormControl>
                  <FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
                    <Title>Double</Title>
                    <Field>TestDouble</Field>
                  </FormControl>
                  <FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
                    <Title>DateTime</Title>
                    <Field>TestDateTime</Field>
                  </FormControl>
                  <FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
                    <Title>TimeSpan (Minutes)</Title>
                    <Field>TestTimeSpan.TotalMinutes</Field>
                  </FormControl>
                </Controls>
              </FormSection>
            </Sections>
          </FormContainer>
        </Tab>

Available controls

InputControl

Name	Description	Value Type
Field	The model property to bind	string
Placeholder	A placeholder text	string
Error	A message in case of an error	string
ErrorClass	A css class in case of an error	string
MaxLength	The allowed max length	int
RegexValidation	A Regular expression for client validation	string
IsOnlyUppercase	If is allowed only Uppercase characters	bool
TextMask	An expression for masking the input	string

Tabs

<FormControl type="One.Core.UI.MVC.Forms.Controls.InputControl, One.Core.UI.MVC">
    <Title>Branch</Title>
    <IsReadOnly>true</IsReadOnly>
    <Disable>false</Disable>
    <IsFullWidth>false</IsFullWidth>
    <Order>90</Order>
    <Required>false</Required>
    <Field>BranchInfo</Field>
	<ResourceKey>Branch</ResourceKey>
</FormControl>

DropDownStatic

Name	Description	Value Type
Field	The model property to bind	string
DataTextField	The model property to bind for text
DataValueField	The model property to bind for value
DropDownListItems	A list of items to show	ListItem

ListItem

Name	Description
Text	The text to display
Value	The actual value
ResourceKey	The key for the translation of the text
Selected	If the item is selected
Disabled	if the item is disabled

Tabs

<FormControl type="One.Core.UI.MVC.Forms.Controls.DropDownStatic, One.Core.UI.MVC">
          <Title>Drive Side</Title>
          <IsReadOnly>false</IsReadOnly>
          <Disable>false</Disable>
          <IsFullWidth>false</IsFullWidth>
          <Order>50</Order>
          <Required>false</Required>
          <DropDownListItems>
            <ListItem>
              <Text>L</Text>
              <Value>1</Value>
              <Selected>true</Selected>
            </ListItem>
            <ListItem>
              <Text>R</Text>
              <Value>2</Value>
              <Selected>false</Selected>
            </ListItem>
          </DropDownListItems>
          <DataTextField>Text</DataTextField>
          <DataValueField>Value</DataValueField>
          <Field>DriveSide</Field>
          <ResourceKey>OD0000313</ResourceKey>
</FormControl>

CheckboxControl

Name	Description	Value Type
Field	The model property to bind	string
Placeholder	A text as a placeholder	string
Checked	Whether is checked or not	bool

Tabs

<FormControl type="One.Core.UI.MVC.Forms.Controls.CheckboxControl, One.Core.UI.MVC">
    <Title>VIP</Title>
    <Order>30</Order>
    <Required>false</Required>
    <Field>IsVip</Field>
	<ResourceKey></ResourceKey>
</FormControl>

DatePickerControl , DateTimePickerControl & TimePickerControl

Name	Description	Required	Value Type
Field	The model property to bind		string
Format	An expression for formatting		string

DatePickerControl

<FormControl  type="One.Core.UI.MVC.Forms.Controls.DatePickerControl, One.Core.UI.MVC">
    <Title>First Registration Date</Title>
    <ResourceKey>OD0000285</ResourceKey>
    <Required>true</Required>
    <Order>60</Order>
    <Field>FirstRegistrationDate</Field>
	<Format>dd-MM-yyyy</Format>
</FormControl>

DateTimePickerControl

<FormControl  type="One.Core.UI.MVC.Forms.Controls.DateTimePickerControl, One.Core.UI.MVC">
    <Title>Scheduled Entry Date</Title>
    <ResourceKey>OD0003487</ResourceKey>
    <IsReadOnly>false</IsReadOnly>
    <Disable>false</Disable>
    <IsFullWidth>false</IsFullWidth>
    <Order>25</Order>
    <Required>false</Required>
    <Field>ScheduledEntryDate</Field>
	<Format>dd-MM-yyyy HH:mm</Format>
</FormControl>

DropDownModelSource

Name	Description	Value Type
Field	The model property to bind	string
ModelSourceText	The model property to bind for the text	string
ModelSourceValue	The model property to bind for the value	string
DropDownDataRequestModel	The element for the remote datasource	XML Element

DropDownDataRequestModel

Name	Description	Value Type
Interface	The model property to bind	string
Method	If it will display arrows for increase/decrease	string
ConstructorArguments	Declare here the arguments that the method needs to be executed, in a comma seperated expression	string

Constructor Arguments for GetDropDownData

For the method GetDropDownData

if the ConstructorArguments is contained by only one item then the performed request is as a GET request, using that item as the url
example: <ConstructorArguments>/ListDataPaged</ConstructorArguments>
if the ConstructorArguments is contained by more than one items then the performed request is as POST request and the first parameter is the URL and the others is one POST PARAMETER with value an array of strings
example: <ConstructorArguments>/FetchVehiclesBy,VehicleModels,Families</ConstructorArguments>

DropDownModelSource

<FormControl type="One.Core.UI.MVC.Forms.Controls.DropDownModelSource, One.Core.UI.MVC">
    <Title>DropDownModelSource</Title>
    <Field>TestDropDownModelSource</Field>
    <ModelSourceText>TestString</ModelSourceText>
    <ModelSourceValue>TestInt</ModelSourceValue>
	<DropDownDataRequestModel>
        <Interface>OneDealer.IncadeaDemo.BusinessLayer.Interfaces.IIncadeaActionController, OneDealer.IncadeaDemo.BusinessLayer</Interface>
        <Method>GetDropDownData</Method>
    	<ConstructorArguments>/ListDataPaged</ConstructorArguments>
	</DropDownDataRequestModel>
</FormControl>

NumericTextboxControl

Name	Description	Value Type
Field	The model property to bind	string
ShowArrows	If it will display arrows for increase/decrease	string
Format	An expression for formatting	string
Decimals	Number of decimals to show	int
Min	Min Value	int
Max	Max Value	int
MaxLength	Max length	int

NumericTextboxControl

<FormControl type="One.Core.UI.MVC.Forms.Controls.NumericTextboxControl, One.Core.UI.MVC">
	<Title>Advance Payment</Title>
	<Order>2</Order>
	<Required>true</Required>
	<ResourceKey>OD0001400</ResourceKey>
	<Decimals>2</Decimals>
	<Format>#.00</Format>
	<Field>DownPayment</Field>
</FormControl>

SwitchControl

Name	Description	Value Type
Field	The model property to bind	string
IsIntControl	If the value is Integer (1/0)	bool
Checked	Whether is checked or not	bool

SwitchControl

<FormControl type="One.Core.UI.MVC.Forms.Controls.SwitchControl, One.Core.UI.MVC">
    <Title>Postal</Title>
    <IsReadOnly>false</IsReadOnly>
    <Disable>false</Disable>
    <WidthType>P25</WidthType>
    <IsFullWidth>false</IsFullWidth>
    <Order>3</Order>
    <Required>true</Required>
    <Field>DPF3</Field>
	<ResourceKey></ResourceKey>
</FormControl>

FileUploadControl

Name	Description	Value Type
Field	The model property to bind	string
ShowCurrentPreview	If it will show a preview of the current file	bool
ShowUploadPreview	If it will show a preview of the uploaded file	bool
FilePath	The file path to save the file	string
UploadMultipleFiles	If it is allowed to upload multiple files	bool
AllowedExtensions	allowed extensions to upload	Item

*Item is a xml array of string values

FileUploadControl

<FormControl type="One.Core.UI.MVC.Forms.Controls.FileUploadControl, One.Core.UI.MVC">
    <Title>Upload Logo</Title>
    <ResourceKey>OD0004756</ResourceKey>
    <IsReadOnly>false</IsReadOnly>
    <Disable>false</Disable>
    <IsFullWidth>true</IsFullWidth>
    <ShowCurrentPreview>true</ShowCurrentPreview>
    <Order>3</Order>
    <Required>false</Required>
    <UploadMultipleFiles>false</UploadMultipleFiles>
    <Field>LogoURL</Field>
    <FilePath>/Content/images/backgrounds/</FilePath>
    <AllowedExtensions>
        <Item>.jpg</Item>
        <Item>.jpeg</Item>
        <Item>.gif</Item>
    	<Item>.png</Item>
	</AllowedExtensions>
</FormControl>

MapControl

Name	Description	Value Type
Block	The block property field to bind	string
LatitudeField	The Latitude property field to bind	string
LongitudeField	The Longitude property field to bind	string
CountyField	The County property field to bind	string
CountryField	The Country property field to bind	string
CountryNameField	The CountryName property field to bind	string
StreetField	The Street property field to bind	string
StreetNoField	The Street No property field to bind	string
ZipCodeField	The Zip Code property field to bind	string
CityField	The City property field to bind	string
FullAddressField	The Full Address property field to bind	string
Placeholder	A text as placeholder	string

MapControl

<FormControl type="One.Core.UI.MVC.Forms.Controls.MapControl, One.Core.UI.MVC">
    <Title>Bill to</Title>
    <ResourceKey>COMM00004</ResourceKey>
    <IsReadOnly>true</IsReadOnly>
    <Disable>true</Disable>
    <IsFullWidth>false</IsFullWidth>
    <Order>1</Order>
    <Required>false</Required>
    <LatitudeField>BillToLatitude</LatitudeField>
    <LongitudeField>BillToLongitude</LongitudeField>
    <FullAddressField>BillToAddress</FullAddressField>
	<ZipCodeField>BillToZipCode</ZipCodeField>
</FormControl>

GridListSelectionSourceControl

Name	Description	Value Type
Field	The model property to bind	string
FieldReturnKey	The property name of the model to return as a key	string
FieldReturnValue	The property name of the model to return as a value	string
GridTitle	The title of the grid list	string
GridCssClassIcon	The fa icon of the grid list	string
GridListSelectionSourceModel	The definition for the remote datasource	XML Element

GridListSelectionSourceModel

Name	Description	Required	Value Type
Type	The type of the data provider		OneDealer.IncadeaDemo.BusinessLayer.Models.IncadeaGridListSelectionSourceModel, OneDealer.IncadeaDemo.BusinessLayer
IncadeaDataProvider	The data provider as described in earlier sections

GridListSelection

<FormControl type="One.Core.UI.MVC.Forms.Controls.MapControl, One.Core.UI.MVC">
    <Title>Bill to</Title>
    <ResourceKey>COMM00004</ResourceKey>
    <IsReadOnly>true</IsReadOnly>
    <Disable>true</Disable>
    <IsFullWidth>false</IsFullWidth>
    <Order>1</Order>
    <Required>false</Required>
    <LatitudeField>BillToLatitude</LatitudeField>
    <LongitudeField>BillToLongitude</LongitudeField>
    <FullAddressField>BillToAddress</FullAddressField>
	<ZipCodeField>BillToZipCode</ZipCodeField>
</FormControl>

EmailControl

Name	Description	Value Type
Field	The model property to bind	string
IsListSetup	if it has a predefined list of emails	bool
SetupKey	The setup key that will display the list of the emails	string
DisableEmailValidation	If the email validation is active. If it is active it will search in the setup key "EmailValidationActive"	bool

EmailControl

<FormControl type="One.Core.UI.MVC.Forms.Controls.EmailControl, One.Core.UI.MVC">
    <Title>Email</Title>
    <ControlUId>EmailUID</ControlUId>
    <IsReadOnly>false</IsReadOnly>
    <Disable>false</Disable>
    <IsFullWidth>false</IsFullWidth>
    <Order>5</Order>
    <Required>true</Required>
    <Field>EMail</Field>
    <IsEmail>true</IsEmail>
    <SetupKey>ODDefEmail</SetupKey>
	<ResourceKey>COMM00012</ResourceKey>
</FormControl>

LinkControl

Name	Description	Value Type
Field	The model property to bind	string
ElementTitle	The anchor text	string
ElementTitleResourceKey	The key for the translation of the anchor text	string
Url	the url to display	string
ParameterProperty	The property field as a parameter to the url	string
OpenInIframe	If it will open in a iframe	bool

LinkControl

<FormControl type="One.Core.UI.MVC.Forms.Controls.LinkControl, One.Core.UI.MVC">
    <Title></Title>
    <ControlUId>DataPrivacyHistoryUIID</ControlUId>
    <ResourceKey></ResourceKey>
    <ElementTitle>Data Privacy History</ElementTitle>
    <ElementTitleResourceKey>OD0006331</ElementTitleResourceKey>
    <IsFullWidth>false</IsFullWidth>
    <Order>50</Order>
    <Field>DocEntry</Field>
    <Url>/BusinessPartner/BPCPDataPrivacyHistory?DocEntry=</Url>
	<ParameterProperty>DocEntry</ParameterProperty>
</FormControl>

InfoControl

PhoneControl

Similar to InputControl , but readonly and with a link to tel:

PhoneControl

<FormControl type="One.Core.UI.MVC.Forms.Controls.PhoneControl, One.Core.UI.MVC">
    <Title>Phone</Title>
    <ResourceKey></ResourceKey>
    <IsFullWidth>false</IsFullWidth>
    <Order>50</Order>
    <Field>PhoneNumber</Field>
</FormControl>

PhoneCountryControl

Name	Description	Required	Value Type
Field	The model property to bind		string
RegexValidation	An regular expression for validation		string

PhoneCountryControl

<FormControl type="One.Core.UI.MVC.Forms.Controls.PhoneCountryControl, One.Core.UI.MVC">
    <Title>Telephone 2</Title>
    <IsReadOnly>false</IsReadOnly>
    <Disable>false</Disable>
    <IsFullWidth>false</IsFullWidth>
    <Order>1</Order>
    <Required>false</Required>
    <Field>Tel2</Field>
	<ResourceKey>WorkPhone</ResourceKey>
</FormControl>

TextareaControl

Name	Description	Value Type
Field	The model property to bind	string
Placeholder	A text as a placeholder	string
IsNotHtmlControl	If it is a HTML Control (WYSIWYG Editor)	bool
ShowTools	Show editor tools	bool

TextareaControl

<FormControl type="One.Core.UI.MVC.Forms.Controls.TextareaControl, One.Core.UI.MVC">
    <Title>Notes</Title>
    <ResourceKey>OD0003154</ResourceKey>
    <IsReadOnly>false</IsReadOnly>
    <Disable>false</Disable>
    <IsFullWidth>true</IsFullWidth>
    <Order>60</Order>
    <Required>false</Required>
	<Field>Notes</Field>
</FormControl>

Page tree

OneDealer Form Controls

Form Controls

Form Control Types

Available controls

InputControl

DropDownStatic

ListItem

CheckboxControl

DatePickerControl , DateTimePickerControl & TimePickerControl

DropDownModelSource

DropDownDataRequestModel

NumericTextboxControl

SwitchControl

FileUploadControl

MapControl

GridListSelectionSourceControl

GridListSelectionSourceModel

EmailControl

LinkControl

InfoControl

PhoneControl

PhoneCountryControl

TextareaControl