Ir para o conteúdo

Tipos de Controle

Controles são conjuntos definidos de dados que são exibidos em um painel no Vinyl, e Tipo de controle determina como os dados serão exibidos e, mais especificamente, sua aparência. Embora a maioria dos tipos de controle exija a seleção de um objeto de dados, alguns não. As diferentes opções para um tipo de controle são as seguintes:

Nome Descrição
Preenchimento automático Ao editar um campo, uma lista suspensa com outras entradas na coluna aparecerá. Se um objeto de dados específico for usado para a lista, ele poderá ser especificado selecionando-o no menu suspenso Agrupar por, caso contrário o controle assumirá como padrão os itens da coluna. Existem três opções de filtro para a lista:
  • Qualquer: todas as entradas contendo o caractere digitado serão exibidas.
  • Exato: somente as entradas que correspondam exatamente ao texto inserido no campo serão exibidas.
  • Começa com: Somente entradas que começam com o texto digitado no campo serão exibidas.
Botão Os botões podem ser usados para acionar um evento, para vincular a uma nova página dentro do aplicativo ou para vincular a uma URL externa.
Grupo de botões Um elemento de controle gráfico com guias que permite ao usuário escolher apenas uma de um conjunto predefinido de opções. Semelhante ao tipo de controle de rádio. Este tipo de controle requer uma fonte para extrair os valores de chave e título. Veja abaixo mais informações sobre o tipo de controle de grupo de botões.
Caixa de seleção Exibe um campo de caixa de seleção. A caixa de seleção está vinculada a uma coluna de fonte de dados booleana/bit. A caixa de seleção aparecerá preenchida se o valor for 1/verdadeiro e vazia se for 0/falso. Desde o Vinyl 3.3.34892, se a opção Inverter estiver habilitada, a caixa de seleção fica vazia se o valor for 1/verdadeiro e preenchida se for 0/falso. Colunas booleanas normalmente são definidas para não permitir valores nulos e o padrão é 0.
ColorPicker Exibe uma caixa com a cor apropriada de um determinado código de cor hexadecimal. Por exemplo, uma coluna de tabela com o código hexadecimal #000000 exibirá uma caixa preta. Quando uma linha do seletor de cores é editada, uma roda de cores é aberta.
Data Ao criar um controle Data, os usuários podem escolher se o controle exibirá a data, a hora ou ambos. A opção padrão é Detectar, que determinará o subtipo de controle com base no tipo de dados lógicos da coluna de dados. Quando um controle Data é editado em um aplicativo, um calendário aparecerá e permitirá que os usuários selecionem uma data. Para controles de data com hora e data habilitadas, clicar no ícone Hora exibirá um relógio.
Controle Dinâmico Um Controle Dinâmico pode alterar seu tipo com base nos dados que recebe. Isto é especialmente útil para formulários que usam vários tipos de entrada. Tipos de controle compatíveis com controle dinâmico:
  • Lista
  • Texto
  • Área de texto
  • Numérica
  • Caixa de seleção
  • Botões - requer a configuração do valor do subtipo de controle dinâmico
  • Data - requer a configuração do valor do subtipo de controle dinâmico
  • ColorPicker
  • HTML
  • Senha
  • Rádio
Incorporar Incorpora um arquivo de uma URL que está em uma coluna da tabela (pode ser um objeto binário/painel de linha única).
Arquivo Permite que um arquivo seja carregado. A coluna de objeto de dados na qual um tipo de controle File é criado precisa ser binária para que esse tipo de controle funcione corretamente.
Para referência, consulte o tutorial do Contêiner de arquivo genérico.
Grupo Selecionar Grupo permite ao usuário criar um grupo para o painel, onde os controles selecionados podem ser colocados em agrupamentos lógicos.
HTML O tipo de controle HTML possui vários modelos que podem ser usados para concluir diversas tarefas. Por exemplo, o modelo Painel Centralizado criará uma página que permite ao usuário inserir uma imagem e escrever uma breve descrição. Full Panel Image insere uma imagem da tabela usando codificação HTML. O modelo do Google Maps pega um endereço na tabela de dados e o exibe por visualização de mapa ou por visualização de rua. Os valores do mapa também podem ser usados para exibir um Street View do Google. O LinkedIn permite vincular a um perfil do LinkedIn.
Ícone Seleciona uma imagem a ser exibida junto com outros controles no painel.
Imagem Exibe uma imagem do banco de dados Vinyl. Pode ser formatado como 'ícone' ou 'foto' no Image Purpose, dependendo da saída desejada.
Linha Exibe uma linha horizontal fina quando adicionada a um painel. O tipo de controle de linha foi projetado principalmente para uso em um painel de linha única em Vinyl. O valor Largura para o Tipo de controle de linha define a largura horizontal da linha na tela. Se você deixar Largura nula ou em branco (mas não 0), a linha ocupará 100% do espaço alocado. Se você fornecer um valor numérico de largura, como 25, ele ocupará 25 "Zudy's" do espaço alocado.
Lista Permite que um usuário selecione em uma lista de valores válidos. O Objeto de Dados de Origem é a tabela ou objeto de negócios que contém os valores necessários para a lista suspensa, bem como a Chave e o Título necessários para o Controle.
Numérico Exibe números.
Senha Criptografa o texto alterando-o para pontos.
Barra de progresso Insere uma barra de progresso, que pode ser usada para ilustrar visualmente o progresso de uma tarefa ou processo. A visibilidade do status de um sistema ou processo é importante para os usuários com um bom design de UI/UX, pois fornece feedback sobre o que está acontecendo. Veja abaixo mais informações sobre o tipo de controle da barra de progresso.
Rádio Um elemento de controle gráfico que permite ao usuário escolher apenas uma de um conjunto predefinido de opções. Este tipo de controle requer uma fonte para extrair os valores de chave e título e está disponível para painéis de placa, painéis de pista e tipos de painel padrão.
Espaço Insere espaços em branco visuais, sem precisar fazer isso em HTML. Este recurso foi projetado principalmente para uso em um painel de linha única em Vinyl.
Texto Exibe texto. Este texto também pode ser usado para acionar um evento: excluir ou salvar, vincular a uma nova página dentro do aplicativo ou vincular a uma URL externa.
Área de texto Exibe o texto em um contêiner de tamanho maior e permite quebras de linha.
Modelo Tipo de controle que possui vários modelos diferentes que podem ser usados para realizar diversas tarefas, incluindo HTML e JSON.

Desde o Vinyl 3.3.34892, a configuração Edge Case > Sort Column permite que um usuário classifique os dados em qualquer controle em uma coluna que não seja sua coluna de origem.

Barra de Progresso

Um tipo de controle Barra de progresso pode ser usado para indicar visualmente a um usuário do Vinyl o quão avançado ele está em um processo, ou o progresso ou a conclusão de uma tarefa específica. Por exemplo, você pode exibir uma barra de progresso para indicar o quão completas estão as informações que você está tentando capturar no momento. A porcentagem preenchida em uma determinada barra de progresso depende da necessidade de um valor do banco de dados que esteja entre 0 e 1, onde 1 = 100% (0,4 seria exibido como 40%).

A Barra de Progresso suporta os seguintes Subtipos:

  • Stacked = exibe o rótulo e o valor percentual abaixo da barra
  • Barra normal = exibe a porcentagem dentro da barra

Você pode formatar a forma como o texto aparece na barra de progresso usando Format String (disponível em Edge Case) e pode personalizar ainda mais o controle usando Styles.

stackedprogressbar.png

Grupo de Botões

O tipo de controle Grupo de botões obtém dados como os controles de rádio fazem hoje, mas produz botões que podem ser clicados para definir o valor correspondente. Eles suportarão o Modo Excel e aparecerão como botões se o fizerem (semelhante à forma como as caixas de seleção salvam automaticamente o valor quando clicadas se você usar o Modo Excel). Alguns estilos são controlados por temas que você pode aplicar ao campo.

Grupo de botões