Aparência
A coluna appearance no rtSurvey permite que você personalize a apresentação visual e o comportamento das perguntas nas suas pesquisas. Este recurso melhora a experiência do usuário e pode melhorar significativamente a eficiência da coleta de dados. O rtSurvey suporta atributos de aparência padrão do XLSForm e os estende com opções adicionais.
Atributos de aparência padrão do XLSForm
O rtSurvey suporta os seguintes atributos de aparência padrão do XLSForm:
| Atributo de aparência | Tipos de perguntas | Descrição |
|---|---|---|
| multiline | text | Cria uma caixa de texto de várias linhas (melhor para clientes web) |
| minimal | select_one, select_multiple | Exibe opções em um menu suspenso |
| quick | select_one | Avança automaticamente para a próxima pergunta após a seleção (somente móvel) |
| no-calendar | date | Suprime a exibição do calendário (somente móvel) |
| month-year | date | Permite a seleção apenas de mês e ano |
| year | date | Permite a seleção apenas do ano |
| horizontal-compact | select_one, select_multiple | Exibe opções horizontalmente (somente web) |
| horizontal | select_one, select_multiple | Exibe opções horizontalmente em colunas (somente web) |
| likert | select_one | Apresenta opções como uma escala Likert |
| compact | select_one, select_multiple | Exibe opções lado a lado com preenchimento mínimo |
| quickcompact | select_one | Combina exibição compacta com avanço automático (somente móvel) |
| field-list | groups | Exibe o grupo inteiro em uma única tela (somente móvel) |
| label | select_one, select_multiple | Mostra rótulos de opção sem entradas |
| list-nolabel | select_one, select_multiple | Mostra entradas sem rótulos (use com label) |
| table-list | groups | Exibe perguntas em formato de tabela |
| signature | image | Habilita captura de assinatura (somente móvel) |
| draw | image | Permite desenho à mão livre (somente móvel) |
| map, quick map | select_one, select_one_from_file | Habilita seleção a partir de recursos do mapa |
Práticas recomendadas para usar aparência
- Consistência: Use atributos de aparência de forma consistente em toda a sua pesquisa para uma aparência uniforme.
- Móvel vs. web: Considere como as aparências serão renderizadas em diferentes dispositivos e plataformas.
- Desempenho: Tenha cuidado com atributos de aparência que podem diminuir o carregamento do formulário (por exemplo,
table-listpara grupos grandes). - Experiência do usuário: Escolha aparências que facilitem a entrada de dados e sejam mais intuitivas para os respondentes.
- Teste: Sempre teste seu formulário nos dispositivos de destino para garantir que as aparências funcionem conforme esperado.
Técnicas avançadas
Combinando aparências
Alguns atributos de aparência podem ser combinados para layouts mais complexos:
| type | name | label | appearance |
|------|------|-------|------------|
| select_one options | choice | Selecione um: | minimal compact |
Aparências dinâmicas
O rtSurvey permite alterações dinâmicas de aparência com base na lógica do formulário:
| type | name | label | appearance | relevant |
|------|------|-------|------------|----------|
| text | time | Insira a hora: | inline-[%H:%M] | ${show_time} = 'yes' |
Considerações sobre aplicativo móvel
- Algumas aparências (por exemplo,
quick,signature) são específicas para dispositivos móveis. - Teste minuciosamente no Android e iOS para garantir comportamento consistente.
Atributos de aparência estendidos do rtSurvey
Além das aparências padrão do XLSForm, o rtSurvey suporta as seguintes opções específicas da plataforma:
Controle de dados e exibição
| Atributo de aparência | Tipos de perguntas | Descrição |
|---|---|---|
invisible | qualquer | Oculta o campo da visualização enquanto ainda coleta ou calcula seu valor. Diferente do tipo hidden — o campo ainda participa da lógica. |
displaytitle | qualquer | Força a exibição do rótulo/título do campo mesmo quando seria suprimido. |
autopull | select_one, select_multiple | Busca automaticamente dados externos para preencher opções quando o formulário carrega ou um campo de gatilho muda. |
floating_hint | text, integer, decimal | Mostra o texto de dica como um rótulo flutuante acima do campo de entrada em vez de abaixo. |
calculate-button | calculate | Adiciona um botão visível que aciona o recálculo do campo sob demanda, em vez de calcular automaticamente. |
Layout
| Atributo de aparência | Tipos de perguntas | Descrição |
|---|---|---|
1screen | group | Força o grupo inteiro a ser exibido em uma única tela, independentemente do tamanho do grupo. |
columns(n) | select_one, select_multiple | Exibe opções em n colunas. Exemplo: columns(3) mostra três colunas de botões de rádio. |
gridformat<row=R col=C colspan=S align=center> | qualquer | Posiciona o campo em um layout CSS-grid na linha R, coluna C, abrangendo S colunas. Usado com advanced-extension/grid-layout. |
ignore-simplify | qualquer | Instrui o renderizador de formulário a pular a simplificação ou condensação automática do layout deste campo. |
Widgets
| Atributo de aparência | Tipos de perguntas | Descrição |
|---|---|---|
likert | select_one | Apresenta opções como uma linha de escala Likert (já na tabela padrão acima; confirmado como suportado). |
distress | select_one | Renderiza opções como o widget visual da Escala de Sofrimento Psicológico de Kessler (K10) com ícones emocionais. |
Integração de API
| Atributo de aparência | Tipos de perguntas | Descrição |
|---|---|---|
callapi | text, integer, decimal, select_one | Habilita integração de chamada de API para este campo. A coluna de cálculo deve conter uma expressão callapi(). Consulte Call API. |
callapi-verify(params) | text, integer, decimal | Aciona uma chamada de verificação de API usando parâmetros estáticos. O formulário bloqueia o progresso até que a API confirme o valor. |
callapi-verify(dynamicParams) | text, integer, decimal | Igual a callapi-verify, mas com parâmetros derivados de outros valores de campo em tempo de execução. |
Formato de data/hora inline
Para campos date, time e datetime, você pode especificar um formato de exibição personalizado usando uma string de formato anexada à aparência:
inline-[%d/%m/%Y]
inline-1line-[%d/%m/%Y %H:%M]
Os tokens de formato são os mesmos de format-date() e format-date-time(). Consulte Funções — Funções de data e hora.
Exemplo:
| type | name | label | appearance |
|---|---|---|---|
| datetime | event_time | Data e hora do evento | inline-[%d/%m/%Y %I:%M %p] |
| date | birth_date | Data de nascimento | inline-[%d/%m/%Y] |
Limitações conhecidas
- Aparências complexas podem não renderizar de forma idêntica em todas as plataformas.
- Algumas aparências avançadas do rtSurvey podem não ser suportadas no modo off-line.
Solução de problemas de aparência
- Aparência não aplicada: Verifique erros de digitação na coluna de aparência.
- Renderização inconsistente: Verifique a compatibilidade com o tipo de pergunta e a plataforma.
- Problemas de desempenho: Considere simplificar aparências complexas, especialmente para pesquisas grandes.