MaskInput
A MaskInput object is an object that is used when an end user wants to enter a value in a specific format. The number of characters is certain; It is a special data entry object that allows information such as tc identity number, telephone number, IBAN to be entered in the appropriate format.
While the active screen is a form in the authoring interface, the Toolbox panel lists form objects. The object is added to the form by drag/drop from the toolbox panel.
Clicking on the object displays the "General" and "Events" tabs in the Property Viewer panel, and the properties of the object can be viewed and edited.
General
Design
'Name' - The name of the object to be used by the system. Inside another object and on the code side, the object is accessed by the value written in the namespace.
Caption
'Title' - The part where the label text of the object is edited.
'Position' - The part of the object label that regulates whether it is positioned on the left, right or above the object.
>Choices Available : Left, Right, Top, Bottom
'Width' - This is where the width of the label field is set.
'Height' - This is the part where the height of the label field is set.
'Font' - The part of the text in the label area where the font, font, font size and color are set.
'Ellipsis' - The portion where the label text is set to appear for the part of the text that does not fit, whether the ellipsis (...) appears.
'Visible' - The part where the label field is set to be hidden or visible.
'Show Colon' - Colon next to label text (:) is the part where the expression is set to appear or not.
'Horizontal Align' - Label text; This is the portion where right-just, left-just, or center-justify settings are performed.
>Choices Can Be Made: Left, Center, Right
'Vertical Align' - Label text; This is the portion where the Justify, Snap Down, or Center settings are performed.
>Choices Available : Top, Middle, Bottom
'Mark Char' - To make the object stand out, enter *, ! is the area where characters such as can be entered.
'Mark Position' - The part where the character designated as the mark character is set to be shown at the beginning or end of the label text.
>Choices Can Be Made: AtFirst, AtLast
Appearance
'Visible' - This is the part where the object is hidden and made visible. When this field is active, the object is visible on the form. When the field is made passive, the object becomes invisible.
'Client Visible' - When the object is not visible when the form is first opened, when it is desired to make the object visible, to make the object visible when a certain condition is met, this field is made passive so that the object is invisible on the client side. When the condition set by the code or the Rules Manager is met, the object can be made visible again. When server visibility is inactive, the client cannot intervene, but the server can intervene when client visibility is inactive.
'Enabled' - The active mode of the object is set from this field. When this feature is active, data entry can be provided to the object and the object can be edited. When the feature is passive, the object is in non-editable mode and appears passive.
'Client Enabled' - When the form is first opened, the object is not active, when a certain condition is met, etc., this field is made inactive so that the object is not active on the client side. Once the condition set by the code or the Rules Manager is met, the object can be activated again. When server activity is inactive, the client cannot intervene, but the server can intervene when client activity is inactive.
'Background Color' - The area used to give the object a background color.
'Title' - Hovering over the object with the cursor while the form is open in the interface, the text typed in this field is shown as a hint. It is a feature used to direct the end user when detailed information about the object is desired.
'ClassName' - The field where object visibility can be changed by defining a class written in the CSS file of the form
'Value' - The default data representation can be set on the object with the value to be entered in the field.
'Placeholder' - A property used to display the data information requested to be entered by the end user into the object for informational purposes within the object. When the end user views the object, they see the referring text typed in this field, and the router text disappears when they focus on the object and begin entering values.
'TextAlign' - The field used to determine where to align the expression entered into the object. Left-align, center-align, right-align selections can be made.
>Choices Can Be Made: Left, Center, Right
'Size Type' - The area where the object size can be determined.
>Choices Can Be Made : Small, Middle, Large
Behavior
'ReadOnly' - This is where the object is set to be in edit mode. When this feature is enabled, the object does not allow data entry, it is in read-only mode. The property must be passive for data entry to be allowed into the object.
'Tab Index' - By entering numeric values in this field, it is determined in which order the tab button is pressed to focus between the form objects. When filling out the form, instead of clicking the cursor on the object where the data is to be entered, the tab button is pressed to focus directly on the indexed objects in a certain order. This is a feature that increases the speed of filling out forms.
'Required' - The field in which it is determined whether data entry is required on the object. When this feature is activated, it is not possible to advance/save the form without entering data into the object.
'Mask' - This is the area in which the desired format to be entered into the object is specified. In this field, the character of the format defined in the "Mask Format Character" field is entered, specifying the desired data input structure to the object.
> For example; "(0262) 341 43 14" When you want to enter a phone number in this field; In the mask field, the phrase "(0262) 999 99" is written. The 9 found here means that a number from 0 to 9 will be entered.
The mask is defined in this way and the object is clicked by clicking the "Preview" button on the Toolbar or by opening the corresponding form in the web interface. When the object is clicked, the fixed expression "(0262)" becomes visible, which cannot be deleted or changed. The end users are expected to enter the remaining digits of the phone number.
> When prompted to enter an Iban number in the format "TR11 1111 1111 1111 1111 111 11" In the mask field, the phrase "TR99 9999 9999 9999 9999 999 99" is written.
The mask is defined in this way and the object is clicked by clicking the "Preview" button on the Toolbar or by opening the corresponding form in the web interface. Clicking on the object makes the fixed "TR" expression visible, which cannot be deleted or changed. The end user is expected to enter the remaining digits of the Iban information.
INFO
If the constant expression contains the number 9; For example, when you want to enter only a date from the year 2019, the fixed character 9 is preceded by a "\" so that the "9" written to the characters requested to enter the number 0-9 in the mask field is not confused with the "9" character that is intended to be given as a constant.
> In the format "11-11-2019", only when it is desired to make a date entry for the year 2019; In the mask field, "99-99-201\9" is written.
The mask is defined in this way and the object is clicked by clicking the "Preview" button on the Toolbar or by opening the corresponding form in the web interface. When the object is clicked, "-" at the end of the first 2 digits and "-2019" at the end of the next two digits are visible, these expressions cannot be deleted or changed.
'Mask Format Char' is the field where the formats to be used in the mask field and the character definitions that refer to these formats are made. The Mask Character, which refers to the format defined here, is used in the Mask field.
Formats offered by the system by default;
| Mask character | Format | Description |
|---|---|---|
| 9th | [0-9] | A format that allows only the number 0-9 to be entered in an object.<br/>The number of times "9" is written in the mask field, the more 0-9 digits are expected to be entered. |
| a | [A-Za-z] | A format that allows only letters to be entered into an object. Both uppercase and lowercase letters are allowed.<br/>The number of times "a" is written in the mask field, the more letters are expected to be entered. |
| * | [A-Za-z0-9] | A format that allows the entry of uppercase and lowercase letters and numbers into an object.<br/>The number of times "*" is typed in the mask field, the more letters or numbers are expected to be entered. |
Data Definition Language
'Field Name' - The field in the database of the system that determines the name of the column it will create for the object. In the "Name" section, the object can be given another name and the column name to be created for the object in the database table can be created as a different name.
'Allow Null' - This section indicates whether the database field to be created for the object will allow null values.
'Size' - The size that the object will hold in the database field is determined in this field.
CAUTION
The Text and Size properties are not available in the interface due to the object structure.
Events
The events owned by the object are located in the "Events" tab in the Property Viewer panel. Each event is triggered at different runtime moments, performing its own unique operations. Code written by the developer to these events is also executed at the time the corresponding event is triggered.
Double-clicking on the events in the "Client" field redirects the screen to the form code editor named "Formadı.ts" where TypeScript coding can be done and the method block for the clicked event is automatically created.
Double-clicking on the events in the "Server" field redirects the screen to the form code editor named "Jersey.cs" where C# coding can be done and the method block for the clicked event is automatically created.
The developer can construct any code block within these methods. Next to the event whose method is created on the code side by clicking from the Events tab, the method name information is automatically generated and the relationship between the event and the method is specified.
Formed methods;