Tema
Catálogo de widgets
Todos os widgets disponíveis, com o nome que aparece na palete, o identificador interno, o tamanho com que são criados e os eventos que emitem.
Esta página é gerada a partir do registo de widgets da aplicação — se um widget existe no produto, existe aqui.
Tabela geral
| Widget | Tipo | Tamanho inicial | Notas | Eventos |
|---|---|---|---|---|
| Texto | label | 160 x 24 | — | — |
| Caixa de texto | textbox | 240 x 58 | campo de entrada | onChange |
| Texto longo | textarea | 260 x 110 | campo de entrada | onChange |
| Número | numberbox | 160 x 58 | campo de entrada | onChange |
| Sim/Não | checkbox | 180 x 48 | campo de entrada | onChange |
| Lista pendente | dropdown | 240 x 58 | campo de entrada | onChange |
| Data | datepicker | 200 x 58 | campo de entrada | onChange |
| Cor | colorpicker | 220 x 58 | campo de entrada, fora da palete | onChange |
| Ficheiro | fileupload | 240 x 58 | campo de entrada, fora da palete | onChange |
| Botão | button | 128 x 36 | — | onClick |
| Linha | line | 240 x 8 | — | — |
| Breadcrumb | breadcrumb | 360 x 28 | — | — |
| Link | link | 160 x 24 | — | onClick |
| Painel | panel | 360 x 240 | contentor | — |
| Abas | tabs | 480 x 300 | contentor | onTabChange |
| Barra fixa | bar | 1280 x 56 | contentor | — |
| Markdown | markdown | 400 x 200 | — | — |
| Imagem | image | 240 x 160 | — | — |
| Tabela | table | 560 x 320 | — | onRowClick, onDataLoaded, onRowDoubleClick |
| Lista | list | 360 x 400 | — | onRowClick, onDataLoaded |
| Cartões | cards | 560 x 420 | — | onRowClick, onDataLoaded |
| KPI | kpi | 560 x 140 | — | — |
| Progresso vs limite | progress | 420 x 150 | — | — |
| Gráfico | chart | 480 x 320 | — | onClick |
Dois tipos (colorpicker e fileupload) existem no runtime mas não aparecem na palete do editor.
Eventos
Cada evento só pode ser usado nos widgets que o declaram. O conteúdo indicado é o que chega ao código do evento.
| Evento | Conteúdo | Widgets |
|---|---|---|
onChange | value: unknown | textbox, textarea, numberbox, checkbox, dropdown, datepicker, colorpicker, fileupload |
onClick | — | button, link, chart |
onTabChange | tab: string | tabs |
onRowClick | row: Record<string, unknown>, index: number | table, list, cards |
onDataLoaded | — | table, list, cards |
onRowDoubleClick | row: Record<string, unknown>, index: number | table |
Ver Eventos e código para como se escrevem.
Ficha de cada widget
As propriedades listadas são as que o widget tem quando é criado; o valor entre parênteses é o valor inicial. Além destas, todos os widgets têm o bloco de Aspecto — ver Estilos e tema.
Texto
Um texto fixo ou ligado a um campo. O widget mais usado num ecrã.
| Tipo | label |
| Tamanho inicial | 160 x 24 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | — |
| Eventos | — |
Propriedades: text (Label), binding
Caixa de texto
Campo de texto de uma linha.
| Tipo | textbox |
| Tamanho inicial | 240 x 58 px |
| Contentor | — |
| Campo de entrada | sim |
| Título e descrição | — |
| Eventos | onChange |
Propriedades: label (Campo), placeholder, binding, labelPosition (top)
Texto longo
Campo de texto de várias linhas.
| Tipo | textarea |
| Tamanho inicial | 260 x 110 px |
| Contentor | — |
| Campo de entrada | sim |
| Título e descrição | — |
| Eventos | onChange |
Propriedades: label (Texto), placeholder, binding, rows (4), labelPosition (top)
Número
Campo numérico.
| Tipo | numberbox |
| Tamanho inicial | 160 x 58 px |
| Contentor | — |
| Campo de entrada | sim |
| Título e descrição | — |
| Eventos | onChange |
Propriedades: label (Número), placeholder, binding, labelPosition (top)
Sim/Não
Caixa de verificação (sim/não).
| Tipo | checkbox |
| Tamanho inicial | 180 x 48 px |
| Contentor | — |
| Campo de entrada | sim |
| Título e descrição | — |
| Eventos | onChange |
Propriedades: label (Sim/Não), binding
Lista pendente
Lista pendente. As opções podem ser fixas ou vir de um conjunto de dados; suporta pesquisa, selecção múltipla e modo de árvore.
| Tipo | dropdown |
| Tamanho inicial | 240 x 58 px |
| Contentor | — |
| Campo de entrada | sim |
| Título e descrição | — |
| Eventos | onChange |
Propriedades: label (Lista), placeholder, binding, labelPosition (top), optionsSource (static), options, enumName, enumValues, datastore, valueField, labelField, searchable (false), multiple (false), tree (false), treeMode (parent), parentField, childrenField
Data
Seletor de data.
| Tipo | datepicker |
| Tamanho inicial | 200 x 58 px |
| Contentor | — |
| Campo de entrada | sim |
| Título e descrição | — |
| Eventos | onChange |
Propriedades: label (Data), mode (date), binding, labelPosition (top)
Cor
Seletor de cor. Não aparece na palete.
| Tipo | colorpicker |
| Tamanho inicial | 220 x 58 px |
| Contentor | — |
| Campo de entrada | sim |
| Título e descrição | — |
| Eventos | onChange |
Propriedades: label (Cor), binding, labelPosition (top)
Ficheiro
Campo de escolha de ficheiro. Não aparece na palete.
| Tipo | fileupload |
| Tamanho inicial | 240 x 58 px |
| Contentor | — |
| Campo de entrada | sim |
| Título e descrição | — |
| Eventos | onChange |
Propriedades: label (Ficheiro), binding, labelPosition (top)
Botão
Botão. Sozinho não faz nada — o que faz está no evento onClick.
| Tipo | button |
| Tamanho inicial | 128 x 36 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | — |
| Eventos | onClick |
Propriedades: text (Botão)
Linha
Uma linha horizontal ou vertical, para separar blocos.
| Tipo | line |
| Tamanho inicial | 240 x 8 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | — |
| Eventos | — |
Propriedades: orientation (horizontal)
Breadcrumb
Trilho de navegação entre ecrãs.
| Tipo | breadcrumb |
| Tamanho inicial | 360 x 28 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | — |
| Eventos | — |
Propriedades: items, separator (/), currentText, binding
Link
Ligação para outro ecrã do dashboard ou para um endereço externo.
| Tipo | link |
| Tamanho inicial | 160 x 24 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | — |
| Eventos | onClick |
Propriedades: label (Link), kind (screen), screenId, params, url, newTab (false), underline (true)
Painel
Contentor com título opcional. Os widgets largados dentro passam a ser seus filhos.
| Tipo | panel |
| Tamanho inicial | 360 x 240 px |
| Contentor | sim |
| Campo de entrada | — |
| Título e descrição | sim |
| Eventos | — |
Abas
Contentor com abas. Cada filho pertence a uma aba; só a activa aparece.
| Tipo | tabs |
| Tamanho inicial | 480 x 300 px |
| Contentor | sim |
| Campo de entrada | — |
| Título e descrição | sim |
| Eventos | onTabChange |
Propriedades: tabStyle (boxed), tabs (lista)
Barra fixa
Faixa presa ao topo ou ao fundo do ecrã, que não acompanha o scroll.
| Tipo | bar |
| Tamanho inicial | 1280 x 56 px |
| Contentor | sim |
| Campo de entrada | — |
| Título e descrição | — |
| Eventos | — |
Propriedades: position (top)
A largura é sempre a do ecrã — só a altura conta.
Markdown
Texto formatado em Markdown: títulos, listas, tabelas, negrito, ligações.
| Tipo | markdown |
| Tamanho inicial | 400 x 200 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | sim |
| Eventos | — |
Propriedades: content
Imagem
Imagem vinda de um endereço, de um anexo do dashboard ou de um campo dos dados.
| Tipo | image |
| Tamanho inicial | 240 x 160 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | sim |
| Eventos | — |
Propriedades: source (url), url, asset, binding, fieldKind (url), fit (cover), alt
Tabela
Tabela com colunas configuráveis, paginação, ordenação e formatação por coluna.
| Tipo | table |
| Tamanho inicial | 560 x 320 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | sim |
| Eventos | onRowClick, onDataLoaded, onRowDoubleClick |
Propriedades: title, datastore, columns
Lista
Lista de registos, um por linha, com os campos escolhidos.
| Tipo | list |
| Tamanho inicial | 360 x 400 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | sim |
| Eventos | onRowClick, onDataLoaded |
Propriedades: title, datastore, fields
Cartões
Registos em cartões, com imagem opcional e número de colunas configurável.
| Tipo | cards |
| Tamanho inicial | 560 x 420 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | sim |
| Eventos | onRowClick, onDataLoaded |
Propriedades: title, datastore, fields, imageField, columns (3)
KPI
Um ou mais indicadores lado a lado, cada um com rótulo, ícone, cor e formatação própria.
| Tipo | kpi |
| Tamanho inicial | 560 x 140 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | sim |
| Eventos | — |
Propriedades: indicators (lista), datastores
Tem vários conjuntos de dados (um por indicador, se for preciso).
Progresso vs limite
Um valor comparado com um limite, com limiares de cor.
| Tipo | progress |
| Tamanho inicial | 420 x 150 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | sim |
| Eventos | — |
Propriedades: label (Indicador vs limite), value (0), limit (100), limitLabel (vs limite de x), unit, decimals (0), overIsGood (false), thresholds (lista), datastores
Tem vários conjuntos de dados.
Gráfico
Gráfico. O tipo escolhe-se numa lista de catorze; os campos mapeiam-se para eixo, valores e série.
| Tipo | chart |
| Tamanho inicial | 480 x 320 px |
| Contentor | — |
| Campo de entrada | — |
| Título e descrição | sim |
| Eventos | onClick |
Propriedades: title, datastore, chartType (bar), mapping, chartOpts