Componentes · Seleção (DB)

DB Combo

É o campo em que a pessoa escolhe um item de uma lista — e a lista vem de uma tabela do seu projeto. Você não escreve código: aponta a tabela e a coluna no painel, e o MadBuilder monta a consulta, filtra, ordena e ainda liga um combo no outro.

<mad-dbcombo-field> Paleta → Seleção (DB) → DB Combo Ideal para 30 a 200 itens
01

Quando usar

O DB Combo entrega a lista inteira junto com a tela e faz a busca no navegador: abre instantâneo em listas médias, e fica pesado nas grandes. Use esta régua:

Sua situaçãoComponente certo
Lista da tabela com menos de 30 itensDB Select
Lista da tabela com 30 a 200 itensDB Combo
Lista com mais de 200 itensDB Unique Search
Opções fixas, que não vêm de tabela (Ativo / Inativo)Select
Escolher vendo várias colunas e filtros, numa gradeDB Seek
Não sabe o tamanho da lista? Pense no futuro dela: uma tabela de cidades cresce, uma de tipos de documento não.
1

Colocar o campo na tela

  1. Abra o formulário no Studio.
  2. Clique com o botão direito no ponto exato onde o campo deve aparecer — dentro da linha, ao lado do campo vizinho.
  3. No menu que abre, escolha DB Combo.
  4. Clique no campo recém-criado para o painel da direita mostrar as opções dele.
Resultado: o campo nasce na posição do clique. Se preferir arrastar, o item está na paleta em Seleção (DB) — o resultado é o mesmo.
Menu de adição rápida aberto sobre o canvas do Studio, com o cabeçalho Linha e o item DB Combo na lista
O menu mostra no cabeçalho onde o campo vai entrar (aqui, dentro da Linha) e só oferece o que cabe ali.
2

Dizer de onde vêm as opções

Esta é a única parte obrigatória. Sem ela o campo aparece vazio.

  1. No painel, abra a seção Fonte de dados.
  2. Database: o banco. Deixe como está, a não ser que a tabela esteja em outro.
  3. Tabela (Model): a tabela de onde saem as opções — no exemplo dos prints, estado.
  4. Chave: a coluna que será gravada. Quase sempre id.
  5. Display: a coluna que a pessoa lê na tela — aqui {nome}.
  6. Ordenar por: por qual coluna a lista aparece, e se é crescente (ASC) ou decrescente (DESC).
Resultado: abrindo a tela, o campo já vem com a lista pronta, em ordem. Nenhuma linha de código foi escrita.

O painel, campo a campo

Escolha um item da lista abaixo: ele acende no print.

Destaque
Painel de propriedades do DB Combo com a seção Fonte de dados preenchida

Passe o mouse na lista — ou use ↑ ↓ depois de focar um item.

O que o painel escreve no código

        
Sobre o Display: dá para juntar mais de uma coluna, como {nome} - {cpf}. Serve para diferenciar homônimos na hora de escolher.
3

Mostrar só parte dos registros

Por padrão o combo lista tudo que existe na tabela. As Regras de carregamento cortam essa lista — só os ativos, só os do tipo escolhido, só os do ano corrente.

  1. No painel, clique na aba Regras de carregamento (fica acima de Propriedades).
  2. Clique em Configurar filtros. Abre a janela de regras.
  3. Clique em + Regra.
  4. Coluna: escolha a coluna da tabela que vai ser comparada — ex.: pais_id.
  5. Operador: como comparar — igual, diferente, maior, contém, está na lista…
  6. Valor: com o que comparar. O tipo mais comum é Valor literal (você digita, ex.: 1).
  7. Confira o Preview do PHP gerado à direita e clique em Aplicar.
Resultado: o combo passa a carregar só o que casa com a regra — e isso acontece no servidor, antes da tela aparecer. A pessoa nunca chega a ver os registros filtrados.

A janela de regras, parte por parte

Destaque
Janela de Regras de carregamento com uma regra montada e o preview do PHP gerado

Clique no print para ampliar.

Exemplo montado: pais_id = 1.

Os seis tipos de valor

O campo Valor tem um seletor de tipo. Ele decide de onde sai o valor da comparação:

TipoUse quando
Valor literalO valor é fixo e você já sabe qual é: 1, 'ativo', ou uma lista 1,2,3.
ParâmetroO valor chega de fora, por quem abriu a tela.
Sessão do sistemaO valor é de quem está logado — unidade, empresa, usuário.
Data/horaComparar com hoje, começo do mês, ano corrente.
Código PHPNenhum dos anteriores resolve e você quer escrever a expressão.
ConstanteO valor está numa constante do projeto.

Várias regras juntas

  • AND no Grupo raiz: todas as regras precisam ser verdadeiras (ativo e do meu estado).
  • OR: basta uma ser verdadeira (matriz ou filial).
  • + Grupo cria um bloco com regra própria dentro do bloco maior — é como usar parênteses numa conta.
  • Subconsulta, na aba ao lado de Comparação direta, filtra por algo que está em outra tabela (ex.: só produtos que já foram vendidos).
Como conferir: o Preview do PHP gerado mostra o filtro pronto enquanto você monta. Se ele continuar dizendo "Nenhuma regra configurada", falta preencher coluna ou valor.
Cuidado com o combo vazio: regra apertada demais some com todas as opções. Se o campo abrir vazio depois de configurar filtro, esse é o primeiro lugar para olhar.
4

Um combo filtrando o outro (cascata)

É o caso clássico: escolho o país e o combo de estado passa a mostrar só os estados daquele país. Quem faz isso é a seção Combo dependente, no campo filho — no exemplo, no campo estado.

  1. Clique no combo filho (o que precisa ser filtrado). Não é no pai.
  2. Abra a seção Combo dependente.
  3. Depende de: escolha o campo pai, aquele que a pessoa preenche antes.
  4. Coluna FK: escolha a coluna do filho que aponta para o pai — em estado, é pais_id.
Resultado: o campo filho começa vazio; quando a pessoa escolhe o pai, ele se preenche sozinho, já filtrado. Se ela trocar o pai, o filho limpa e recarrega.
Destaque
Seção Combo dependente aberta, com os campos Depende de e Coluna FK preenchidos
A dupla que não pode faltar. Preencher só o Depende de não basta: sem a Coluna FK, o sistema tenta filtrar por um nome de coluna que não existe na tabela do filho e a lista volta vazia. Preencha sempre os dois.

Três níveis

País → estado → cidade funciona do mesmo jeito: configure a cascata em cada filho apontando para o seu pai imediato. Ao trocar o país, o estado recarrega e a cidade limpa junto, em efeito dominó.

Editando um registro que já existe

Quando a tela abre para editar, o pai já vem preenchido e o filho já vem com a lista certa — sem piscar nem exigir clique. Se o campo pai não for uma coluna da tabela (é o caso do país numa tela de cidade, que só existe via relação), quem monta a tela precisa preencher esse valor ao editar; sem isso, a cascata abre vazia no registro salvo.

Formulário rodando: com Brasil escolhido no campo País, o dropdown de Estado lista os estados brasileiros
A cascata rodando no teste online: País = Brasil e o Estado já mostra só os estados brasileiros.
Por dentro, em uma frase: a configuração da consulta é cifrada num token assinado que fica no campo; quando o pai muda, o navegador manda só o token e o valor escolhido, e o servidor devolve a lista nova — tabela e banco nunca trafegam pelo navegador.
5

Quando a pessoa não acha o que procura

A pessoa digita "Uruguai", não existe na tabela, e o combo fica vazio. A seção Sem resultados transforma esse beco sem saída em um botão de cadastro dentro do próprio dropdown. São dois modos, que podem ser ligados juntos ou separados.

Destaque
Seção Sem resultados com a mensagem de cabeçalho e os dois modos: abrir formulário completo (ativo) e cadastro rápido inline (inativo)
ModoEscolha quando
Abrir formulário completoO cadastro precisa de vários campos, validação e regras — cliente, produto, fornecedor.
Cadastro rápido inlineBasta o nome digitado, ou dois ou três campos — categoria, tag, tipo, país.
Os dois começam desligados. Ligar é abrir a engrenagem do card, preencher e salvar — o card então mostra ATIVO.

Modo 1 — abrir o formulário completo

  1. Na seção Sem resultados, clique na engrenagem do card Abrir formulário completo.
  2. Formulário: escolha a tela de cadastro que deve abrir (ex.: EstadoForm).
  3. Método: já vem show, que é o método que abre a tela. Só mude se a sua tela usa outro.
  4. Em Aparência do botão, ajuste o texto (Label), o Ícone e a Classe CSS, se quiser.
  5. Clique em Salvar. O card passa a mostrar ATIVO.
Resultado para quem usa o sistema: a busca não acha, aparece um botão no dropdown, o formulário abre em gaveta já com o texto digitado preenchido, e ao salvar a gaveta fecha sozinha com o registro novo já selecionado na combo.
Destaque
Janela de configuração do modo abrir formulário completo, com formulário, método e aparência do botão

Clique no print para ampliar.

Um detalhe: se o formulário escolhido abrir como página inteira em vez de gaveta, ele substitui a tela da combo — e aí não tem como devolver o registro selecionado automaticamente.

Modo 2 — cadastro rápido, sem sair da tela

  1. Clique na engrenagem do card Cadastro rápido inline.
  2. Formulário de cadastro: escolha a tela dona da tabela (ex.: EstadoForm). O método de salvamento é gerado automaticamente nela — o campo Método já mostra o nome, tipo onQuickSaveEstado.
  3. Ajuste o botão em Aparência do botão, se quiser.
  4. Em Campos, decida o formato do cadastro: sem nenhum campo, o sistema salva só o texto digitado; clicando em Adicionar primeiro campo você monta um mini-formulário.
  5. Clique em Salvar.
Resultado para quem usa o sistema: a busca não acha, aparece um campo dentro do próprio dropdown, a pessoa completa e salva ali mesmo — sem abrir outra tela — e o item novo já fica escolhido.
Destaque
Janela de configuração do cadastro rápido inline, com formulário de cadastro, método gerado, aparência do botão e a lista de campos

Clique no print para ampliar.

A pegadinha mais comum. Se a tabela exige uma informação que o mini-formulário não pede, o cadastro falha na hora de salvar. Exemplo: cadastrar um estado sem informar o país, quando o país é obrigatório na tabela. Nesse caso, adicione o campo que falta na lista Campos — ou use o modo 1, que abre o formulário completo.
Sobre a mensagem do cabeçalho: o texto de MENSAGEM (CABEÇALHO) é o que aparece acima dos botões quando a busca não acha nada. Algo como "Não encontrado. Cadastre agora:" deixa claro o que fazer.
6

Testar antes de entregar

Salve a tela e publique no Teste online. Confira nesta ordem:

O que fazerO que tem que acontecer
Abrir o comboA lista aparece com os registros da tabela, na ordem escolhida.
Digitar parte de um nomeA lista filtra enquanto você digita.
Escolher o campo paiO campo filho se preenche, já filtrado.
Trocar o paiO filho limpa e carrega a lista nova.
Buscar algo que não existeAparece a mensagem e o botão de cadastro.
Salvar o formulárioO valor foi gravado na coluna certa.
Reabrir o registro salvoOs combos voltam preenchidos, inclusive o filho.
08

Problemas comuns

O combo aparece vazio

Confira nesta ordem: a tabela tem registros no ambiente que você está testando (o teste online tem banco próprio); existe uma regra de carregamento cortando tudo; ou o campo tem Depende de preenchido — nesse caso ele fica vazio de propósito até o pai ser escolhido.

Escolho o pai e o filho continua vazio

Quase sempre é a Coluna FK em branco na seção Combo dependente. Preencha com a coluna do filho que aponta para o pai.

Em telas antigas, o campo pai pode estar gravado com chaves — {estado->pais_id}. Escrito assim ele nunca casa com o pai e a cascata não dispara. O par correto é depends-on="estado->pais_id" com depends-column="pais_id".

O cadastro rápido dá erro ao salvar

A tabela pede um campo que o mini-formulário não tem. Adicione o campo na lista Campos, ou troque para o modo que abre o formulário completo.

A lista demora para abrir

Passou de algumas centenas de registros. Troque para DB Unique Search, que busca conforme a pessoa digita em vez de trazer tudo de uma vez.

Aparece o código em vez do nome

O Display está apontando para a coluna errada — provavelmente o id. Aponte para a coluna de nome/descrição.

09

Referência: painel × código

Para quem também mexe no Blade, este é o de-para entre o painel e os atributos gerados.

No painelNo códigoPadrão
Nomename—
Labellabel—
Databasedatabasebanco principal
Tabela (Model)model—
Chavekeyid
Displaydisplaynome
Ordenar por + direçãoorder-by · orderasc
Regras de carregamento:filters · :querysem filtro
Depende dedepends-on—
Coluna FKdepends-column= depends-on
Obrigatóriorequiredfalse
PlaceholderplaceholderSelecione…
Texto de ajudahint—
Mensagem (cabeçalho)no-results-message—
Abrir formulário completono-results-create-actiondesligado
Cadastro rápido inlineno-results-quick-register-actiondesligado
Campos do cadastro rápido<mad-quick-form>só o termo
Valor padrãodefault—
Somente leiturareadonly—
On Changemad:change—
Largurawidth—
Abrir form — label · ícone · classe CSSno-results-create-label · no-results-create-icon · no-results-create-class—
Cadastro rápido — label · ícone · classe CSSno-results-quick-register-label · no-results-quick-register-icon · no-results-quick-register-class—