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
- A CSHTML file that contains the HTML code
- 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
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 | Required | 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 |
<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 | Required | 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 |
<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 | Required | 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 |
<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 | Required | Value Type |
---|---|---|---|
Field | The model property to bind | string | |
Placeholder | A text as a placeholder | string | |
Checked | Whether is checked or not | bool |
<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 |
<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>
<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 | Required | 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 | Required | 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>
<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 | Required | 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 |
<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 | Required | 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 |
<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 | Required | 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
<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 | Required | 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 |
<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 | Required | 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 |
<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 | Required | 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 |
<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 | Required | 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 |
<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
Similar to InputControl but readonly
<FormControl type="One.Core.UI.MVC.Forms.Controls.InfoControl, One.Core.UI.MVC"> <Title></Title> <ResourceKey></ResourceKey> <IsFullWidth>false</IsFullWidth> <Order>50</Order> <Field>DocEntry</Field> </FormControl>
PhoneControl
Similar to InputControl , but readonly and with a link to tel:
<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 |
<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 | Required | 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 |
<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>
Add Comment