Feedback Print

Rating

This field allows the developer to create a rate field to display the data previously added using stars (or any other image).

Interface de configuração do campo rating

Description of the attributes available for configuration.

Data type

Define the type of the field in the application. In this case we must select the type Rating.

Label

Define the application title that will be showed when the application is executed. The terminology used in the interface of your application is very important for the usability, and we need to use familiar terms for the final user, instead of use terms from the system.

Example, this field “rating” that is named cmp_rating however, the customer would have a better understanding if the label uses Product Rating.

Besides use a fixed text, the Label attribute allows the use of Langs to define the field title, allowing the internationalization of your application.

Subtitle

Define the subtitle that will be shown in the field below the ratings. Example: “Thank you for your feedback!”.

As in the Label, the subtitle attribute also allows the use of Langs for internationalization of your application.

Amount of icons

Define the number of icons that will be displayed in the field. The value set in this attribute must be according to the way the evaluation will be realized.

To evaluate using Stars normally it is used five stars, so , we must to inform 5 in this attribute. After we set the images that will be displayed in the attributes Enabled icon and Disabled icon the result will be the same as in the example:

Campo rating com estrelas

To use Like/Dislike for example we must inform 1 in the amount of icons, so only one image will be displayed and will change according to the click. In this case, the storage in the database will be 1 for like (enabled icon) and 0 for dislike (disabled icon). You can see the field configured below as like/dislike:

Example with Like/Dislike

Enabled icon

Define the icon that will be shown for the amount selected. Following the like/dislike example, in this option, we must insert the Like imageLike. We must do the same for a star evaluation, where for default we must insert the stars filled Estrela preenchida.

Disabled icon

Define the icon that will be shown for the not selected icons. In this attribute, we set an image to represent the opposite of the previous images set in the Enabled icon.

Still referring the example of the Like/Dislike, in this attribute we must set the Dislike Dislike.

As in the stars example, we must insert the image with the empty stars Unfilled star.

SQL Type

Inform the type of the field in the database.

Configuração da Visualização

You can set CSS values ​​for the field individually. Thus, for example, you can highlight one field of the others in the application. As CSS field properties, when changed, they are added to a class created automatically by ScriptCase for each application field.

Individual field CSS settings, when inserted, override theme settings (CSS of applications (Themes)) selected for application.

The settings are divided into three property blocks, these blocks are:

CSS of Title

This makes it possible to change the CSS properties of the field’s Label.

In the example below, You can see the difference of field title configurations. While the fields provider and Category have the same formatting, inherits the theme of the application, the field product evaluation have a different formation of of others, from the changes made in the CSS of the field.

CSS change in field label

CSS of field

Changes the CSS properties of the <td> where the input object (where the user enters data for insertion into a form) is positioned. In the image below, you can see where the change is applied.

Field with changes to Field CSS properties, changing background color and horizontal alignment

CSS Changed Field

CSS of Input object

Changes the CSS properties in the Input of field object, where the user type the data in a form.

Field with changes to CSS properties of Input Object, changing background color and input source color

field changed with CSS

CSS properties

The available configuration options are basically the same for each of the configuration blocks above.

Title view setup interface on form

description of available configuration attributes

Source

Changes the font of the text according to the fonts selected using the font-family property.

In this option, some types of fonts are provided to you (as shown below). List of fonts available in the configuration interface

Size

Changes the font size of the text using the property font-size in the field class.

You need to select the available value from our list, the measure used for this property is the pixel.

Font Color

Define the font color used by the property color in the field class.

Background color

Define the background color using the property background-color in the field class.

The colors that will be used in the two color properties listed above, Font color and Background color, can be entered via the color palette - ![Color palette icon][palette] - available next to the field or manually entered values ​​in the accepted formats that are: Hexadecimal, RGB, RGBA, HSL, HSLA or o Color name.

Color palette
By clicking on the color palette icon -! [Color palette icon] [palette] - next to the field, a window will open with some default colors.

When you select one of the colors, a value in hexadecimal format (HEX) will be entered, representing the chosen color.

Hexadecimal
Acronym for hexadecimal, this code is composed of the pound sign (#) plus six digits. The first two define the intensity of the color red, the middle two are green and the last two are blue.

Color representation

This code is represented by #000000.

In this representation system #000000 represents the color black and #ffffff represents the color white.

RGB / RGBA Acronym for Red, Green and Blue. This code is represented by RGB (255,255,255).

Color representation

The first three numbers defined with intensity of red color, the middle three numbers are green and the last three numbers are blue.

HSL / HSLA

Color representation

Color name
You need to enter the name of the color you want to use. This name must be entered in English and the color must be within the list of browser supported colors you will use.

Example: Entering color name

Some sites provide a color list with each of the above values.

This property allows you to specify colors in different ways using different ways of value assignment

You can also enter values ​​directly in the field without using our colors palette. This property lets you specify as colors different ways to assign values ​​to CSS properties that support colors.

Bold

Applies bold style to the font.

Underline

Lets you apply the underlined style to the font.

Border style

Defines the border font style.

Border Collapse

Defines the border collapse.

Border size

Changes the size of the title border.

Border color

Chooses the border color , using a color palette to apply to the title.

Horizontal alignment

Position the filter label at desired location (left,rigth,center e justify).

Vertical alignment

Position the label of the filter in the wanted location baseline, sub, super, top, text-top, middle, bottom, text-bottom).

Not available in Input Object CSS

Width

To set the width of the title.

Height

To set the height of the title.

Allow the developer to set up instructions and hints about the field’s use, allowing the developer to help the users about the system usage.

Help Configuration Interface.

Description of the settings attributes.

Help Description

In this area, you can set up a text that will be shown in the application according to the type of help selected below.

Help Type

Pop-up - Display a default icon ! beside the field. To display the message just click in the icon that a Pop-up will be displayed with the help text.

Help Display Type Configuration Interface.

Hint - Display a default icon ! beside the field. When the mouse is above the icon a help text will be displayed.

Help Display Type Configuration Interface.

The icon displayed when selecting the types Hint or Pop-up vary according to the theme that is being used in the application. This icon can be modified in the CSS Buttons.

Text - Display a text inside of a <span></span> beside the field.

Help Display Type Configuration Interface.

Help button position

Allow to set up where the help button will be displayed in the field, there are two options:

Beside: The help icon will be displayed beside the field.
Column: The help icon will be displayed beside the label of the field.