- acceptOnlyNumbers (boolean)
- actions (objeto)
- align (string)
- breakline (boolean)
- class (integer)
- dataSource (object)
- dataSourceFilter (array)
- defaultTab (string)
- descriptionOrder (integer)
- dateFormat (string)
- dateTime-dateFormat (string)
- datetime-dateOrder (string)
- datetime-preset (string)
- endLabel: (string)
- expandingProperty (string)
- breadcrumbProperty (string)
- fieldGroup (string)
- fieldGroups (array)
- filterProperties (objeto)
- floatingControl (objeto)
- focused (boolean)
- hideEmptyValue (boolean)
- id (string)
- itemsPerPage (string)
- isVisible (boolean)
- label (string)
- maxlength (integer)
- mask (object)
- name (string)
- order (string)
- placeholder (string)
- primaryProperty (string)
- parentProperty (string)
- order (string)
- readOnly (boolean)
- readOnlyOnEdit (boolean)
- searchIn (string)
- separator (string)
- sequenceInList (integer)
- showDescriptionOrder (boolean)
- showHeader (boolean)
- showMenu (boolean)
- showOnList (boolean)
- showOnForm (boolean)
- showSelectAs (string)
- startLabel: (string)
- validations (object)
- valueToTrue (string)
- valueToFalse (string)
acceptOnlyNumbers (boolean)
Como o nome diz, isso deveria permitir somente números em um campo quando true, mas não consegui fazer funcionar, aparentemente o jeito correto e funcional é com mask!.
Testado, Não Funcionou.
Exemplo:
{
"acceptOnlyNumbers": true
}
actions (objeto)
Parcialmente Testado
Adiciona um botão no footer da página, que chama um evento javascript ao ser clicado. 
Exemplo:
"actions": [
{
"id": "",
"name": "acao",
"label": "Fazer Algo",
"showAsAction": "never",
"events": [
{
"id": "",
"name": "ActionEvent",
"code": ""
}
]
}
]
Se você coloca um icone para o botão com
icon, ele imediatamente se alinha ao centro. Ainda não sei o que oshowAsActionfaz tho, tanto oalwaysquanto oneveraparecem na tela então vai saber ¯_(ツ)_/¯
align (string)
Não Testado
Exemplo:
{
"align": true
}
breakline (boolean)
Testado
Faz com que o campo seja exibido em uma nova linha/parágrafo. (Por padrão cada tela tem a largura máxima 12, caso o breakline for inexistente ou false, os campos sempre serão alinhados horizontalmente até que o espaço seja completamente ocupado. Caso seja true ele é forçado a ser movido para uma nova linha.)
Exemplo:
{
"breakline": true
}
class (integer)
Testado
Largura de um campo na tela, pode ter valores até 12 (tamanho máximo da tela).
Exemplo:
{
"class": 12
}
dataSource (object)
Fonte de dados (literalmente no nome). Porém quero me lembrar de que dá pra usar tanto os caminhos de dataSources definidos pelo framework, como fis#/crud/fitipoctreceberlial com os atributos rest e lazyLoad, quanto dados definidos localmente.
Só é necessário que uma das colunas retornadas pelo datasource existam como campo no grid pra que os dados sejam recebidos na tela. Exemplo:
{
"dataSource": {
"rest": true,
"name": "fis#/crud/tipoctreceber",
"lazyLoad": true
}
}
Quando exibindo dados de um dataSource em um grid, são necessários: Um campo com um dos valores retornados. e um order. Porém, quando usando um caminho de dataSource crud em um campo, é necessário um filterProperties.
ou usando o sub-atributo data {} para definir dados localmente! Útil quando se se sabe as opções que devem ser carregadas, como “Sim” ou “Não”. E os sub-sub atributos value e description definem o valor e o nome exibido.
"dataSource": {
"data": [
{
"value": "S",
"description": "Sim"
},
{
"value": "N",
"description": "Não"
}
]
}
mas aparentemente tu tem que meter um
{
"valueField": "value",
"descriptionField": "description"
}
com os atributos lá no campo pra decidir o que vai aparecer se não fica em branco.
dataSourceFilter (array)
Parcialmente Testado
O filtro aplicado na sua tela (sempre um grid) pra decidir que dados vão ou não aparecer. É uma array com objetos definindo um filtro especifico que normalmente leva três atributos: name, operator e value.
"dataSourceFilter": [
{
"name": "IDCONTCCUS",
"operator": "IN",
"value": "R"
},
{
"name": "IDTIPOCONT",
"operator": "=",
"value": "A"
}
]
É muito simples. O filtro procura nos dados da tela, linhas cujo campo (name), seja relacionado de forma (operator) à algum valor (value).
No exemplo:
{
"name": "CDEMPRESA",
"operator": "=",
"value": "01"
}
Só serão exibidas linhas cujo valor de CDEMPRESA seja IGUAL (=) à 01.
Entre os operadores (
operator) que se podem usar estão:
- =: Valor IGUAL.
- IN: Valor se encontra entre os valores. e.g: se o valor está dentro de uma array.
- ORDER_BY:
- <>:
Lembrando que dentro de value é possível passar valores dinâmicos, contanto que tudo esteja dentro de @;
defaultTab (string)
Testado
Qual a tab/guia/janela padrão que aparece ao carregar num template widget/tabbedWidget.html.
{
"defaultTab": "NomeDaTab"
}
descriptionOrder (integer)
Testado
A ordem na qual o titulozinho que aparece no swipe quando se expande a linha do grid. Tem um nome pro que eu quero dizer mas eu esqueci :p Mentira, achei que era um breadcrumb mas não sei se conta.
{
"descriptionOrder": 1
}
dateFormat (string)
Pacialmente Testado
O formato que você quer que o seu campo de data/calendário mostre um valor. Pode ser só ano YYYY, ano simplificado YY, mês MM, mês + ano MM/YY. Sempre separado por barra (/).
{
"dateFormat": "YYYY"
}
dateTime-dateFormat (string)
Pacialmente Testado
{
"datetime-dateFormat": "yy"
}
datetime-dateOrder (string)
{
"datetime-dateOrder": "YYYY"
}
“datetime-preset”: “date”,
datetime-preset (string)
{
"datetime-preset": "date"
}
endLabel: (string)
Testado
Título da segunda data (final) a ser escolhida em um campo de período/intervalo Veja também: endLabel
Exemplo:
{
"endLabel": "Data 1"
}
expandingProperty (string)
Não Testado
Algo relacionado a tree widget template, vou testar ainda
breadcrumbProperty (string)
Não Testado
Algo relacionado a tree widget template, vou testar ainda
fieldGroup (string)
Testado
Fazer com que um campo seja parte de um grupo de campos.
{
"fieldGroup": "grupo_1"
}
Lembrando que se deve usar o mesmo name do fieldGroup em que se quer adicionar o campo.
fieldGroups (array)
Testado
Dá pra criar grupos de campos nos menus. Menus colapsáveis ou não.
"fieldGroups": [
{
"id": "1234564321434560987634685",
"name": "grupo_1",
"label": "Grupo",
"collapsible": true,
"opened": false
}
]
Lembrando que ele NÃO aparece a menos que tenha pelo menos um campo com o atributo fieldGroup com o name desse menu
Se usa
collapsiblepara definir se o menu é dinâmico/colapsável (pode ser aberto e fechado).
Se usa
openedpara defenir se o menu aparece aberto ou fechado quando o widget carrega.
filterProperties (objeto)
MEU DEUS DO CÉU QUE ISSO
O filter properties é um jeito de filtrar dados de um dataSource em um campo. Por partes:
- O filterProperties não precisa de uma ID.
- Um label não é necessário no filterProperties, mas caso tenha ele tem prioridade e SUBSTITUI o label do campo pai.
- Atributos como
valueField,descriptionField,showSelectAse atédataSourcenormalmente se encontram DENTRO DO FILTER PROPERTIES, não sei se é necessário ou só boas práticas mas alguns desses campos funcionam pro filtro dentro ou fora dofilterProperties. Na dúvida vou colocar dentro.- É literalmente um campo por si próprio, pra exibir os dados de um dataSource no filtro vocÊ precisa dos campos dentro do
fields. Os campos, necessitam do"showOnList": true, se não, não vão aparecer ao expandir."searchableFields": []É NECESSÁRIO, sem ele, o campo se mata."valueField": ""também É NECESSÁRIO, como é em qualquer select.
"filterProperties": {
"template": "zh-select-autocomplete#field/select-autocomplete.html",
"searchableFields": [
"CDFILIAL",
"NMFILIAL"
],
"valueField": "CDFILIAL",
"dataSource": {
"rest": true,
"name": "fis#/crud/filial",
"lazyLoad": true
},
"fields": [
{
"label": "Código",
"name": "CDFILIAL",
"showOnList": true,
"template": "field/text-edit.html"
},
{
"label": "Nome",
"name": "NMFILIAL",
"showOnList": true,
"template": "field/text-edit.html"
}
]
}
Exemplo mais básico que consegui sem quebrar, filtra o dataSource
filiale usa os camposCDFILIALeNMFILIALpara código e nome do país respectivamente.
floatingControl (objeto)
Testado
Se usa para definir que botões vão aparecer ou não no menu flutuante em baixo na direita (?)
Os botões são:
pdfAction,xlsAction, ecsvActionpara as opções de exportação em pdf, xls e csv respectivamente. Quando todos foremfalse, o botão de exportaçãonão aparece no menu.
searchActionpara o botão de busca. Porém deixá-lo como
falsenão remove ele do menu a menos quefilterdocustomizationActiontambém sejafalse!
customizationActioné um objeto para os botões que mudam o layout da tela.filterpara o filtro,layoutpara o layout/esquema, e
viewpara a visão.
Exemplo:
"floatingControl": {
"pdfAction": false,
"xlsAction": false,
"searchAction": true,
"csvAction": true,
"customizationAction": {
"filter": true,
"layout": true,
"view": false
}
}
focused (boolean)
Testado
Quando ativado (true), o campo vai inicar com foco.
Exemplo:
{
"focused": true
}
hideEmptyValue (boolean)
Testado
Quando ativado (true), este atributo oculta a primeira opção vazia ("") em campos select-native.
Exemplo:
{
"hideEmptyValue": true
}
id (string)
Testado
ID único que todos os campos, eventos e widgets têm.
Exemplo:
{
"id": "123456789012345946"
}
itemsPerPage (string)
Testado
Quantas linhas dos dados o grid vai mostrar, automaticamente coloca também um botão ‘Carregue Mais’, porém ele tá bugado* parece.
*o suposto bug é que o ‘Carregue mais’ só traz mais n linhas ao ser clicado somente uma vez, n sendo o valor de “itemsPerPage”. Pelo menos no meu teste.
Exemplo:
{
"itemsPerPage": 2
}
isVisible (boolean)
Testado
Visivel ou não. Exemplo:
{
"isVisible": false
}
label (string)
Testado
O título do campo que aparece em cima. Exemplo:
{
"label": "Nome do Campo"
}
maxlength (integer)
Testado
Número máximo de caracteres em um campo. Por algum motivo é tudo minusculo. Exemplo:
{
"maxlength": 10
}
mask (object)
Parcialmente Testado
Define se o framework deve ou não aplicar mascara no valor de algum campo.
Exemplo:
{
"mask": {
"type": "zerofill",
"params": {
"left": true,
"maxlength": 4
}
}
}
OS TIPOS. SÃO ELAS:
- zerofill: Preenche espaços vazios com 0, recebe como params: left, right. PORÉM, não sei se eu que sou burro e não entendi o padrão mas:
Quando
"left": true
- Preenche com zeros à esquerda até que o valor tenha o número total de dígitos especificado por
maxlength.- Não adiciona vírgulas. Entrada:
1-> Saída:001Entrada:42-> Saída:042
Quando
"right": true
- Preenche com zeros à direita até que o valor atinja o
maxlength, com uma vírgula antes dos zeros.- O valor original é mantido antes da vírgula. Aqui, o valor depois da vírgula sempre terá o comprimento igual ao
maxlength. Entrada:1-> Saída:1,000Entrada:45-> Saída:45,000—
Se tanto "left" quanto "right" estiverem ausentes, o padrão é "left".
- number: Faz com que um campo aceite apenas números. recebe como params: allowNegative e allowEmpty. Mas nenhum deles fez nada num campo normal lollllllllll.
- float: Literalmente converte o valor do campo em float point. Nesse aqui o allowNegative funciona! Pode se usar também o precision pra definir o número de casas decimais após a vírgula (o padrão é dois 1 -> 1,00), além de thousands: '.' pra definir que simbolo separa 1000 e decimal: ',' pro símbolo que separa casas decimais.
"mask": {
"type": "float",
"params": {
"symbol": " ",
"precision": 2,
"thousands": "+",
"decimal": ">",
"operator": "="
}
}
Haha 
- datetime: Converte o valor digitado em formato de data. dd/mm/yyyy. Straightforward, não consegui achar nenhum parâmetro específico.
- fix: Mascára personalizada pelo que eu entendi, caso precise recolher dados de forma específica como CEP ou número de telefone. Se usa mask mais uma vez como param: eg: "mask": "99999-999"
"mask": {
"type": "fix",
"params": {
"mask": "99999-999"
}
}
Nesse caso 12345678 vira 12345-678.
name (string)
Testado
O equivalente ao ID do HTML padrão. É o nome pelo qual o javascript vai conseguir localizar o campo no documento e acessá-lo/modificá-lo. Exemplo:
{
"name": "CDFILIAL"
}
order (string)
Não Testado
Por qual campo ordernar as linhas de um grid, lembrar de usar sempre que popular uma tabela com um dataSource.
Exemplo:
{
"order": "CDFILIAL"
}
CDFILIAL é um dos campos que devem ser exibidos em um grid, o order está dizendo que os dados serão populados com base nessa coluna.
placeholder (string)
Testado
Placeholder apenas. Indicador de que dados devem ser colocados em um campo. Exemplo:
{
"placeholder": "Digite aqui algo."
}
primaryProperty (string)
Não Testado
Algo relacionado a tree widget template, vou testar ainda
parentProperty (string)
Não Testado
Algo relacionado a tree widget template, vou testar ainda
order (string)
Não Testado
Por qual campo ordernar as linhas de um grid, lembrar de usar sempre que popular uma tabela com um dataSource.
Exemplo:
{
"order": "CDFILIAL"
}
CDFILIAL é um dos campos que devem ser exibidos em um grid, o order está dizendo que os dados serão populados com base na ordem dos dados dessa coluna.
readOnly (boolean)
Testado
Quando ativado (true), o campo NÃO pode ser alterado. Útil para bloquear campos que dependem de outros campos serem preenchidos primeiro, por exemplo.
Exemplo:
{
"readOnly": true
}
readOnlyOnEdit (boolean)
Testado
Quando ativado (true), o campo NÃO pode ser alterado na tela de edição, porém no filtro normal ele continua alterável.
Exemplo:
{
"readOnlyOnEdit": true
}
searchIn (string)
Não Testado
Exemplo:
{
"searchIn": "beginning"
}
separator (string)
Testado, porém sem resultado.
Qual o caractere que separa os campos em um campo de data, talvez? O padrão é “/”, mesmo sem especificar. Porém tentando usar isso não consegui fazer funcionar, ele mostra uma barra independente do que eu coloco lá. Inclusive todas as referências a esse atributo que eu achei nos repositorios simplesmente tem “/” como valor! Bizarro.
Exemplo:
{
"separator": "/"
}
sequenceInList (integer)
Parcialmente Testado
Se usa pra definir a posição em que um campo aparece na lista do grid. (Inclusive dinamicamente!!!), muito útil se está trabalhando com colunas dinâmicas. Um dia eu descubro exatamente como funciona.
Exemplo:
{
"sequenceInList": 2
}
Alterar dinâmicamente:
field.sequenceInList; // retorna a posição da coluna
field.sequenceInList = 2; // define a posição da coluna como 2
showDescriptionOrder (boolean)
Não Testado
Mostrar ou não o campo de descriptionOrder.
Exemplo:
{
"descriptionOrder": true
}
showHeader (boolean)
Testado
Quando desativado (false), o cabeçalho não aparece. 
Exemplo:
{
"showHeader": true
}
showMenu (boolean)
Testado
Quando desativado (false), o menu no cabeçalho não aparece. 
Exemplo:
{
"showMenu": true
}
showOnList (boolean)
Testado
Mostrar campo como coluna no grid. Não afeta o filtro.
Exemplo:
{
"showOnList": true
}
showOnForm (boolean)
Testado
Mostrar campo no filtro. Não afeta a coluna do grid.
Exemplo:
{
"showOnForm": false
}
showSelectAs (string)
Parcialmente Testado
Como as opções do filterProperties aparecem agrupadas em um campo. As opções que eu vi até agora foram: list (o padrão), grid e tree.
list:
grid:
Exemplo:
{
"showSelectAs": "grid"
}
startLabel: (string)
Testado
Título da primeira data (inicial) a ser escolhida em um campo de período/intervalo Veja também: endLabel
Exemplo:
{
"startLabel": "Data 1"
}
validations (object)
Parcialmente Testado
Define se o framework deve ou não aplicar regras de validação.
Exemplo:
{
"validations": {
"required": true
}
}
AS REGRAS. SÃO ELAS:
- required (boolean/objeto): O usuário PRECISA preencher esse campo ou o formulário não pode ser enviado. Visualmente ele se traduz como um pequeno asterisco em cima do campo. Dá pra colocar o valor como um objeto com o atributo
message, e definir a mensagem que o usuário vai ver quando o campo obrigatório não for preenchido:
| Sem mensagem personalizada | Com mensagem |
|---|---|
| { "validations": { "required": true } } | { "validations": { "required": { "message": "Tem que digitar filhão" } } } |
- range (objeto): Não sei ainda como funciona esse troço mas parece que só define mesmo os valores minimos
min (integer), maximosmax (integer)que podem ser preenchidos, além da mensagem de erromessage (string)caso esse valor não seja respeitado, mas não sei se só funciona com algum tipo de campo:
{
"validations": {
"range": {
"max": 10,
"min": 1,
"message": "O valor deve ser entre 1 e 10!"
}
}
}
- extensions (objeto): Claramente se usa pra definir as extensões/formatos de arquivo permitidos em um template
file-upload. Recebe um outro atributovalue, uma array com todas as extensões permitidas. A mensagem de erro aparece em inglês mesmo.
{
"validations": {
"extensions": {
"value": [
".fpa",
".txt",
"xls"
]
}
}
}
valueToTrue (string)
Parcialmente Testado
Valor que deve ser enviado pela checkbox caso esteja marcada.
{
"valueToTrue": "S"
}
valueToFalse (string)
Parcialmente Testado
Valor que deve ser enviado pela checkbox caso esteja desmarcada.
{
"valueToFalse": "N"
}