Text

View video

General Settings

This type of field allows the developer to create quickly inputs to insert and update data, where the final user can inform its data to be allocated in its database.

Type of Data

Defines the type of the field in the application. In this case we should select Text.

Label

Defines the title that will be displayed in the field when the application is executed. The terminology used in the interface is fundamental to the system have a good usability, whe should use names and familiar terms to the final user of the application, instead of using terms from the system.

For example, this text field that has the name customerid, the client would have a much better understanding of the functionality of the field when we define the label as Customer Name.

Not only a fixed text, the Label attribute allows the use of langs to define the field’s title, making it possible to use your application in a multi language project.

Label below field

Defines the message to be displayed below the field.

Watermark

Informing a text to the Watermark it will be displayed in the input a text as an example that can be informed in the field. The result after set will be this:

Initial Value(type)

Allows the initial definition to the field when the form is in insert mode. It is possible to choose between two options:

Defined Value: When this option is selected, the Initial Value attribute will be available, where we should inform the field’s initial value. For example, my initial value is Arlindo, when a new register is inserted, the field Seller Name will be initialized as Arlindo.

System Data: When this option is selected, the initial value will be the actual date of your computer’s system.

Amount of Characters

Allows to set the width of the text field’s input that varies with the amount of characters informed. Although, if the amount of characters typed are greater than the setting, the text will be pushed to the left, to keep the maximum amount of characters as defined.

Show HTML Content

When this option is active every HTML, CSS and JavaScript content that are in the database will be displayed with the main value.

Validation Image

When this option is active, a image will be displayed next to the informed field if the field is according to the settings defined by the developer.

In the example below, the field was set to receive at least 5 characters, see what happens when informed only 4 characters:

However if informed 5 or more characters the field will be displayed as:

Password Field

When this option is active, the text field will be converted to the format used in password fields. For example:

View password characters

By enabling this option, a button will be displayed in the password field so that the password is displayed when clicked.

Save Variable

Allows to save a session variable(global variable) with the field’s value, to be used in others applications.

For example, in the login form the username can be saved in session and displayed on the header of others applications.

Variable Name

In this attribute we should define the name of the session variable, active in the previous item, that will receive the field’s value.

We should inform only the variable’s name, - var_rating.

The method to use its value is global variable.

Field Mask

Defines the field mask. There are two types of mask described in the table below:

For example, it is possible to set the mast to display a telephone number:

It will be show with this format on runtime:

It is also possible to set the field mask like those examples:

Field mask examples:

Telephone number

Validate with mask

When this option is active it is possible to insert the data with the mask set in the Field Mask option.

Complete to the left

When this option is used, the value defined will be added on the left of the information inserted in the field if the value is lower than the maximum set in the Maximum Size option.

Field size in database

Defines the field’s size related to the size set in the database. This value is already set automatically by default when the application is generated.

Hidden Field

When this option is active, the field will be hidden in the application on runtime.

Label Field

When this option is active, the field will be altered to only a label where the info will be displayed, where updates or inserts will not be possible.

Save HTML tags

When this option is active, it allows to HTML tags in the field to be inserted with the data, instead of being interpreted.

Text input in JavaScript

When this option is active, it will be show every JavaScript content inserted in the database with its main value.

This option can only be used using the Editable grid view.

Browser autocomplete

Specifies whether the field will allow the browser’s autocomplete feature. By default, autocomplete is enabled for fields.

• When disabled, the field will allow the browser’s autocomplete.
• When enabled, the field’s autocomplete will be blocked.

Disable Field

Allows the developer to disable the field, so the user can not type a value according with the option defined by the developer.

The available options are: No - Initial value of the attribute, this option does not disable the field.
Update Mode - This option only disables the field when editing existing registers.
Insert Mode - This option only disables the field when inserting new registers.
Insert / Update Mode - This option disables the field when editing exciting registers or when inserting new registers.

HTML Type

HTML object used to display the field in the form.

SQL Type

Informs the type of the field in the database.

Field Behavior

Use autocomplete:

Field automatically turns into autocomplete according to existing values in the database.

Use Select2

Uses the new component for data selection, allowing searches within the select comboBox.

Width for the Select2

Sets a width for the area in the Select2.

Amount of characters

Sets the amount of characters to start the search.

Amount of rows

Sets the maximum number of rows to list the search result.

Width:

Defines a width in pixels for a result box.

Search options:

Defines the validation that will be made to fetch the search result.

Start equals to: Will return the records with the same start value as in the database.
Any part: Will return the records when exist the character in any part of the record.
End equals to: Will return the records with the same final value as in the database.

Position between values:

Defines the position that objects will be displayed.

Text Between Values

Text that will appear when using a filter condition between two values.

OnChange Submit:

Submit search on this field changing.

Show Condition:

To show or not the search condition. It only works if the search has at least one condition.

Display Settings

The Display Settings allows to define the CSS for the fields individually. For each Display Settings of Scriptcase, exists the same attributes available for this interface.

• CSS of the Title
  • Font : Allows to choose the font type, that will be applied to the application field title.
  • Font Size : Allows to choose the the font size, that will be applied to the application field title.
  • Font Color :Allows to choose a color for the font from the color pallet.
  • Background Color : Allows to define the color for the field, the color can be selected from the color pallet.
  • Bold : Applies the bold style to the font.
  • Underline : Applies the underline style to the font.
  • Border Size : Applies the border size to the title of the field.
  • Border Color : Allows to choose a color for the border, using a color pallet to apply to the title.
  • Horizontal Alignment : Allows to position the label of the field in the desired position (left,right,center and justify).
  • Vertical Alignment : Allows to position the label of the field in the desired position (baseline, sub, super, top, text-top, middle, bottom, text-bottom).
  • Width : To define a width for the title of the field.
  • Height : To define a height for the title of the field.
• CSS of the Field
  • Font : Allows to choose the font type, that will be applied to the application field.
  • Font Size : Allows to choose the the font size, that will be applied to the application field.
  • Font Color :Allows to choose a color for the font from the color pallet.
  • Background Color : Allows to define the color for the field, the color can be selected from the color pallet.
  • Bold : Applies the bold style to the font.
  • Underline : Applies the underline style to the font.
  • Border Size : Applies the border size to the field.
  • Border Color : Allows to choose a color for the border, using a color pallet to apply to the field.
  • Horizontal Alignment : Allows to position the field in the desired position (left,right,center and justify).
  • Vertical Alignment : Allows to position the field in the desired position (baseline, sub, super, top, text-top, middle, bottom, text-bottom).
  • Width : To define a width for the field.
  • Height : To define a height for the field.
• CSS of the Input Object
  • Font : Allows to choose the font type, that will be applied to the Input Object. For example: Radio, Select, Text, etc
  • Font Size : Allows to choose the the font size, that will be applied to the application field.
  • Font Color :Allows to choose a color for the font from the color pallet.
  • Background Color : Allows to define the color for the Input Object, the color can be selected from the color pallet.
  • Bold : Applies the bold style to the font.
  • Underline : Applies the underline style to the font.
  • Border Size : Applies the border size to the Input Object.
  • Border Color : Allows to choose a color for the border, using a color pallet to apply to the Input Object.
  • Horizontal Alignment : Allows to position the Input Object in the desired position (left,right,center and justify).
  • Vertical Alignment : Allows to position the Input Object in the desired position (baseline, sub, super, top, text-top, middle, bottom, text-bottom).
  • Width : To define a width for the Input Object.
  • Height : To define a height for the Input Object.

Help Settings

This feature allows that the instructions are documented to be used for the generated application, this helps the end user to understand better how the system works.

• Help Description : Allows to inform a text that will present to the user when he positions the mouse over the field.
• Help Type
  • Pop-Up : Selecting the pop-up type, it will display an icon beside the field that when clicked, you will view a pop-up with help description.

  Help type - Pop-up configuration Interface.

  • Hint : Passing the cursor over the field, you will view a hint with the help description.

  Help type - Hint configuration Interface.

  • Text : It will display the help description beside the field.

  Help type - Text configuration Interface.