Diferentes valores que podem ser ser usados no atributo “template”;

1. field/calendar.html
2. field/checkbox.html
3. field/file-upload.html
4. field/number.html
5. field/select.html
6. field/select-native.html
7. field/select-month.html
8. field/textarea.html
9. field/text-edit.html
10. widget/form.html
11. widget/grid.html
12. widget/master_detail/grid.html
13. widget/master_detail/tabbedWidget.html
14. widget/tabbedWidget.html
15. widget/tree/grid.html
16. zh-interval-component#field/interval.html
17. zh-select-autocomplete#field/select-autocomplete.html

---

field/calendar.html

Calendário comum tipo modal.

"template": "field/calendar.html"

---

field/checkbox.html

Chechbox.

"template": "field/checkbox.html",

---

field/file-upload.html

Input pra upload de arquivos.

"template": "field/file-upload.html"

Dá pra usar o extensions como atributo pra validação do arquivo tb, vou colocar la no outro trem na pagina de atributos.

---

field/number.html

Esse é um input padrão, usuário pode digitar normalmente, porém apenas números. Me parece a melhor opção para esse tipo de campo que só pode aceitar valores númericos, mas também existe o type number para o atributo mask que ao invés de não deixar digitar números no campo, ele deleta ao digitar (não sei em qual caso ele seria preferido).

"template": "field/number.html"

---

field/select.html

Modal com opções, basicamente o select-native mas com design “mais web-orientado”. As opções são definidas pelo datasource.

"template": "field/select.html"

---

field/select-native.html

Dropdown com opções definidas pelo dataSource. O usuário não pode digitar para filtrar a pesquisa. (Se precisar deixar digitar veja zh-select-autocomplete#field/select-autocomplete.html

"template": "field/select-native.html"

---

field/select-month.html

Calendário para selecionar apenas meses.

"template": "field/select-month.html"

---

field/textarea.html

Literalmente o <textarea> do html, um campo de texto livre grandão com quebra de linha automática.

"template": "field/textarea.html"

---

field/text-edit.html

Esse é o input padrão, usuário pode digitar normalmente.

"template": "field/text-edit.html"

---

widget/form.html

O form/modal/popup, basicamente uma janela nova com o proprio design que aparece sobrepondo a tela parent. Pra controlar a exibição temos o método showPopup.

"template": "widget/form.html"

---

widget/grid.html

Esse é o grid padrão. as linhas não são interativas/clicáveis/não da pra usar o swipe.

"template": "widget/grid.html"

---

widget/master_detail/grid.html

Esse é o grid padrão, pórem dá pra clicar nas linhas e abrir no swipe, para ver mais dados, etc etc

"template": "widget/master_detail/grid.html"

---

widget/master_detail/tabbedWidget.html

"template": "widget/master_detail/tabbedWidget.html"

---

widget/tabbedWidget.html

Esse é a tela com tabs em cima. Só lembrar de que as widgets dentro de cada tab são invisíveis por padrão. Logo qualquer widget criado dentro delas deve ter isVisible: true, ou não vai aparecer.

"template": "widget/tabbedWidget.html"

Exemplo porque achei esse meio diferentao:

{
    "id": "12345678901234567890",
    "name": "Nome",
    "itemsPerPage": 30,
    "label": "Nome",
    "template": "widget/tabbedWidget",
    "isVisible": true,
    "actions": [],
    "events": [],
    "widgets":[
        {
            "id": "1234586754324635748",
            "name": "Tab",
            "label": "Tab 1",
            "template": "widget/master_detail/grid.html",
            "isVisible": true,
            "fields": [
                {
                "id": "",
                "name": "CAMPO",
                "label": "Nome do Campo",
                "template": "field/text-edit.html",
                "class": 6,
                "showOnList": true,
                "maxlength": 10, 
                "showOnForm": true,
                "focused": true
                }    
            ]
        }
    ]
}

---

widget/tree/grid.html

Esse é o grid com campos colapsáveis (se isso for uma palavra que existe).

"template": "widget/tree/grid.html"

---

zh-interval-component#field/interval.html

Permite que o usuário selecione um período entre duas datas. Até onde eu sei, só suporta formato dd/mm/yy, pelo menos visualmente.

 "template": "zh-interval-component#field/interval.html"

Detalhe que o atributo {required: true} do validations NÃO funciona. Tem que usar requiredInterval

---

zh-select-autocomplete#field/select-autocomplete.html

Dropdown com opções definidas pelo dataSource. O usuário pode digitar também para filtrar a pesquisa.

 "template": "zh-select-autocomplete#field/select-autocomplete.html"