Feedback Print

Rating

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

Interface de configuração do campo rating

Description of the attributes availables 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:

Imagem de exemplo com link e 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 Estrela sem preenchimento.

SQL Type

Inform the type of the field in the database.

Configuração da Visualização

Permite definir valores de CSS para o campo individualmente. Desta forma, por exemplo, podemos destacar um campo dos demais na aplicação.
As propriedades CSS do campo, quando alteradas, são adicionadas à uma classe criada automaticamente pelo Scriptcase para cada campo da aplicação.

As configurações individuais do CSS dos campos, quando informadas, sobrepõem as configurações do tema(CSS das Aplicações (Temas)) selecionado para a aplicação.

As configurações de visualização são divididas em três blocos de propriedades, estes blocos são:

CSS do Título

Que possibilita a alteração das propriedades do CSS da Label(Título) do campo.

No exemplo abaixo, podemos visualizar a diferença nas configurações do titulo do campo.
Enquanto os campos Fornecedor e Categoria possuem a mesma formatação, herdada do tema da aplicação, o campo Avaliação do Produto possui uma formatação diferente dos demais, proveniente das alterações realizadas no CSS do campo.

Alteração de CSS da label do campo

CSS do Campo

Que altera as propriedades do CSS da <td> onde o Objeto Input(onde informamos os dados para inserção em um formulário) está posicionado. Na imagem abaixo, podemos visualizar onde as alterações são aplicadas.

Campo com alterações nas propriedades do CSS do Campo, alterando a cor de fundo e o alinhamento horizontal

Campo com alteração no CSS

CSS do Objeto Input

Que altera as propriedades do CSS no Objeto Input do campo, onde digitamos os dados em um formulário.

Campo com alterações nas propriedades do CSS do Objeto Input, alterando a cor de fundo e cor da fonte do input

Campo com alteração no CSS

Propriedades CSS

As opções de configuração disponíveis são basicamente as mesmas para cada um dos blocos de configuração mencionados acima.

Interface de configuração da visualização do titulo no formulário

Descrição dos atributos da configuração disponíveis

Fonte

Altera a fonte do texto de acordo com as fontes selecionadas, utilizando a propriedade font-family.

Nesta opção, disponibilizamos alguns tipos de fontes(conforme imagem abaixo).
Lista de fontes disponíveis na interface de configuração

Tamanho

Altera o tamanho da fonte do texto utilizando a propriedade font-size na classe do campo.

Devemos selecionar o valor disponível em nossa lista, a medida utilizada para esta propriedade é o pixel.

Cor da fonte

Define a cor da fonte utilizado a propriedade color na classe do campo.

Cor de fundo

Define a cor de fundo, utilizado a propriedade background-color na classe do campo.

As cores que serão utilizadas nas duas propriedade de cores listadas acima, Cor da fonte e Cor de fundo, podem ser informadas por meio da paleta de cores - Ícone da paleta de cores - disponível ao lado do campo ou informado manualmente os valores nos formatos aceitos que são: Hexadecimal, RGB, RGBA, HSL, HSLA ou o Nome da Cor.

Paleta de Cores
Ao clicar no ícone da paleta de cores - Ícone da paleta de cores - ao lado do campo, uma janela será aberta com algumas cores predeterminadas.

Ao selecionar uma das cores, será inserido um valor no formato hexadecimal(HEX), que representa a cor escolhida.

Hexadecimal
Sigla para hexadecimal, este código é composto do sinal de cerquilha (#) mais seis dígitos.
Os dois primeiros definem a intensidade da cor vermelha; os dois do meio dizem respeito ao verde e os dois últimos, ao azul.

Representação de cores

Este código é representado por #000000.

Nesse sistema de representação o #000000 representa a cor preta e o #ffffff representa a cor branca.

RGB / RGBA Sigla que representa Vermelho (Red), o Verde (Green) e o Azul (Blue).
Este código é representado por RGB(255,255,255).

Representação de cores

Os três primeiros números definem a intensidade da cor vermelha; os três números do meio dizem respeito ao verde e os três últimos números representam o azul.

HSL / HSLA

Representação de cores

Nome das Cores
Devemos informar o nome da cor que desejamos utilizar. Este nome deve ser informado em inglês e a cor deve está dentro da lista de cores suportadas pelo navegador que iremos utilizar.

Exemplo: Informando nome da cor

Alguns sites disponibilizam uma lista de cores com cada um dos valores citados acima.

especificar as cores de diferêntes maneirasutilizando diferentes maneiras de atribuição de valores

Esta propriedade possibilita

É possível também informar valores diretamente no campo, sem a utilização da nossa paleta de cores.
Esta propriedade permite especificar as cores de diferentes maneiras de se atribuir valores para as propriedades CSS que admitem cores

Negrito

Permite aplicar o tipo negrito na fonte.

Sublinhado

Permite aplicar o tipo sublinhado na fonte.

Estilo da Borda

Define o estilo da fonte.

Collapse da Borda

Define o collapse da borda.

Tamanho da Borda

Permite aumenta o tamanho da borda do título.

Cor da Borda

Permite escolher a cor da borda, utilizando uma paleta de cores para ser aplicada no título.

Alinhamento Horizontal

Permite posicionar o label do filtro no local desejado (left,rigth,center e justify).

Alinhamento Vertical

Permite posicionar o label do fitro no local desejado (baseline, sub, super, top, text-top, middle, bottom, text-bottom).

Não disponível no CSS do Objeto Input

Largura

Para definir a largura do título.

Altura

Para definir a altura do título.

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.

Interface de configuração da ajuda.

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.

Interface de configuração do tipo de exibição da ajuda.


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

Interface de configuração do tipo de exibição da ajuda.

The icon displayed when selecting the types Hint or Popup 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.

Interface de configuração do tipo de exibição da ajuda.

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.