No Salesforce LWC, se você quiser permitir que o usuário selecione uma opção da lista de opções especificada, a caixa de combinação será usada. Neste guia, discutiremos como criar uma combobox e os diferentes atributos suportados pela combobox com exemplos.
Caixa combo
Basicamente, combobox é um campo somente leitura que fornece uma entrada para escolher uma opção dentre as opções especificadas. Podemos criar isso usando a tag relâmpago-combobox. Os atributos são velocidade, um após o outro, separados por espaço. Vamos discutir alguns atributos necessários ao criar uma caixa de combinação.
- rótulo – Isto é usado para especificar o rótulo (texto) para sua caixa de combinação.
- opções – Cada opção leva os atributos “rótulo” e “valor”. Podemos especificar as múltiplas opções em uma lista separada por vírgula.
- espaço reservado : Antes de selecionar uma opção, o usuário precisa conhecer as informações relacionadas às opções. Portanto, este atributo é especificado.
- obrigatório : Em alguns casos, é obrigatório selecionar a opção. Podemos torná-lo obrigatório especificando este atributo.
- desabilitado : Pode ser possível impedir o usuário selecionando a opção na caixa de seleção. Este atributo desativa a caixa de combinação.
Sintaxe:
Vamos ver como criar um combobox com alguns atributos importantes.
nome='nome'
label='nome_da_etiqueta'
valor={valor_da_opção}
placeholder='Texto de Ajuda'
opções={Lista_de_opções}
onchange={handleChange} >
Especificação:
Vamos ver os passos para criar o combobox e trabalhar com ele.
No arquivo JavaScript, crie uma lista de opções com rótulo e valor dentro do método “getter”.
Crie uma variável que armazene a opção padrão.
Escreva a função de identificador que armazena a opção selecionada pelo usuário na IU.
No arquivo HTML, crie um combobox e passe os atributos. Além disso, precisamos passar o manipulador de eventos onchange() que manipula as opções na caixa de combinação. É necessária a função “Handler” criada no arquivo “js”.
Em todos os exemplos que discutiremos neste guia, a lógica será fornecida como o código “js”. Depois disso, especificamos a captura de tela que inclui todo o código “js”.
Exemplo 1:
Crie um combobox com cinco assuntos (detalhes) no arquivo Javascript. Especifique o valor padrão como “JAVA”. Manipule a caixa de combinação no método handleSubjectsOnChange(). Passe o valor e os detalhes para os atributos “valor e opções” no arquivo HTML com um rótulo e implante o componente.
primeiroExemplo.html
< divisão aula = 'slds-var-m-around_medium' >
rótulo = 'Selecione seu assunto:'
valor = { valor }
opções = { detalhes }
em mudança = { lidarSubjectsOnChange } >< / caixa de combinação relâmpago>
< br >
< p > Seu assunto: < b > {valor} < / b >< / p >
< / divisão >
< / cartão relâmpago>
< / modelo>
primeiroExemplo.js
// Cria o valor padrão - 'JAVA' para o Comboboxvalor = 'JAVA' ;
//Mostra os assuntos
pegar detalhes ( ) {
// 5 disciplinas
retornar [ { rótulo : 'Java' , valor : 'JAVA' } ,
{ rótulo : 'Pitão' , valor : 'PITÃO' } ,
{ rótulo : 'HTML' , valor : 'HTML' } ,
{ rótulo : 'C' , valor : 'C' } ,
{ rótulo : 'C++' , valor : 'C++' } ] ;
}
// Manipula a lógica para definir o valor
lidarSubjectsOnChange ( evento ) {
esse . valor = evento. detalhe . valor ;
}
}
Código inteiro:
primeiroComponent.js-meta.xml
versão = '1,0' ?>< / alvos>
< / LightningComponentBundle>
Saída:
Adicione este componente à página “Registro” de qualquer objeto. No arquivo HTML, exibimos o valor na tag de parágrafo. Quando um usuário escolhe qualquer opção, ela será exibida em negrito. Por padrão, “JAVA” é selecionado e exibido após o componente ser renderizado na página.
Vamos escolher o assunto como “C”. “C” é retornado abaixo da caixa de combinação.
Exemplo 2:
Neste exemplo, renderizaremos os diferentes componentes com base nos valores da lista de opções Campaign Type (do objeto Campaign).
- Se o tipo de campanha for “Conferência”, renderizaremos o modelo que retorna o texto – Status da campanha: PLANEJADO
- Se o tipo de campanha for “Webinar”, renderizaremos o modelo que retorna o texto – Status da campanha: CONCLUÍDO
- Se o tipo de campanha for “Parceiros”, renderizaremos o modelo que retorna o texto – Status da campanha: EM ANDAMENTO
- Status da campanha: ABORTED para o restante das opções.
segundoExemplo.html
< divisão aula = 'slds-var-m-around_medium' estilo = 'altura:20px; largura:400px' >
opções = { CampaignTypeValues. dados .valores }
em mudança = { identificadorChange } >
< / caixa de combinação relâmpago>
< / modelo>< br / >
< / divisão >
< br >< br >
< Centro > Status da campanha: < b >< eu > PLANEJADO< / eu >< / b > < / Centro >
< / modelo>
< Centro > Status da campanha: < b >< eu > CONCLUÍDO< / eu >< / b > < / Centro >
< / modelo>
< Centro > Status da campanha: < b >< eu > EM ANDAMENTO< / eu >< / b > < / Centro >
< / modelo>
< Centro > Status da campanha: < b >< eu > ABORTADO< / eu >< / b > < / Centro >
< / modelo>
< / cartão relâmpago>
< / modelo>
segundoExemplo.js
Importamos o objeto Campaign (Standard) como CAMPAIGN e Type dele como TYPE. Do relâmpago/uiObjectInfoApi, importamos getPicklistValues e getObjectInfo. Eles obterão os valores da lista de opções disponíveis no campo Tipo. Eles serão utilizados como opções para a caixa de combinação. Os itens a seguir são tratados em handleChange().
- Se o valor === “Conferência”, definimos a variável conferenceval como verdadeira e as outras duas como falsa.
- Se o valor === “Webinar”, definimos a variável webinarval como verdadeira e as outras duas como falsa.
- Se o valor === “Parceiros”, definimos a variável partnerval como verdadeira e as outras duas como falsa.
- Se o valor não estiver nas opções fornecidas, todas serão falsas.
importar CAMPANHA de '@salesforce/schema/Campanha' ;
importar TIPO de '@salesforce/schema/Campaign.Type' ;
importar { getPicklistValues } de 'relâmpago/uiObjectInfoApi' ;
importar { getObjectInfo } de 'relâmpago/uiObjectInfoApi' ;
exportar padrão aula SegundoExemplo estende Elemento Relâmpago {
@ valor da faixa ;
//Pegue o objeto
@ arame ( getObjectInfo , { objectApiName : CAMPANHA } )
objetoInfo ;
// Obtenha o tipo de campanha - lista de opções
@ arame ( getPicklistValues , { registroTypeId : '$objectInfo.data.defaultRecordTypeId' , campoApiName : TIPO } )
Valores de tipo de campanha ;
conferênciaval = falso ;
webinarval = falso ;
parceiroval = falso ;
outro = falso ;
// Lida com a lógica
identificadorChange ( evento ) {
esse . valor = evento. alvo . valor ;
se ( esse . valor === 'Conferência' ) {
//Exibe o status como PLANEJADO
esse . conferênciaval = verdadeiro ;
esse . webinarval = falso ;
esse . parceiroval = falso ;
}
outro se ( esse . valor === 'Seminários on-line' ) {
//Exibe o status como CONCLUÍDO
esse . webinarval = verdadeiro ;
esse . conferênciaval = falso ;
esse . parceiroval = falso ;
}
outro se ( esse . valor === 'Parceiros' ) {
//Exibe o status como EM PROGRESSO
esse . webinarval = falso ;
esse . conferênciaval = falso ;
esse . parceiroval = verdadeiro ;
}
outro {
//Exibe o status como IN ABORTED
esse . webinarval = falso ;
esse . conferênciaval = falso ;
esse . parceiroval = falso ;
}
}
}
segundoComponent.js-meta.xml
versão = '1,0' ?>< / alvos>
< / LightningComponentBundle>
Saída:
Tipo – “Conferência”. Portanto, o status é “PLANEJADO”.
Tipo – “Webinar”. Portanto, o status é “CONCLUÍDO”.
Tipo – “Parceiros”. Portanto, o status é “EM ANDAMENTO”.
O tipo não está nas opções fornecidas. Portanto, o status é “ABORTED”.
Exemplo 3:
Agora criamos um combobox com os registros da Campanha como opções. Se selecionarmos qualquer opção, o tipo de campanha correspondente será retornado na UI.
Primeiro, precisamos criar uma classe Apex com o método getCampaign(). Este método retorna uma lista de todas as campanhas com id, nome, tipo e status.
Registros de campanha. apxcpúblico com compartilhamento aula Registros de campanha {
@ AuraEnabled ( armazenável em cache = verdadeiro )
// Obtém a lista de campanhas
público estático Lista < Campanha > getCampaign ( ) {
retornar [ SELECIONE ID , Nome , Tipo , Status da campanha ] ;
}
}
terceiroExemplo.html
< divisão aula = 'slds-var-m-around_medium' estilo = 'altura:20px; largura:400px' >
rótulo = 'Selecione o nome da campanha'
opções = { Opções de campanha }
valor = { valor }
em mudança = { identificadoronchange }
>
< / caixa de combinação relâmpago>
< / divisão >< br >
< br >
< p > Tipo de campanha para esta campanha: < b > {valor} < / b >< / p >
< / cartão relâmpago>
< / modelo>
terceiroExemplo.js
- Precisamos especificar o método que obtém uma lista de campanhas dentro do método conectadocallback(). Declare uma matriz chamada “camps” e armazene o resultado com o rótulo como Campaign ID e o valor como Campaign Type. Este array é a entrada para CampaignNames (isso deve ser criado com o track decorador).
- No método getter Campaignoptions(), retorne o array CampaignNames. Então, combobox usa essas opções.
- Defina o valor selecionado no método manipulador handleonchange().
importar obter campanha de '@salesforce/apex/CampaignRecords.getCampaign' ;
exportar padrão aula TerceiroExemplo estende Elemento Relâmpago {
valor = '' ;
@ rastrear nomes de campanhas = [ ] ;
pegar Opções de campanha ( ) {
retornar esse . Nomesdacampanha ;
}
// Adiciona as opções ao array camps do Apex.
// rótulo será o nome da campanha
// o valor será o tipo de campanha
conectadoCallback ( ) {
getCampaign ( )
. então ( resultado => {
deixe acampamentos = [ ] ;
para ( era k = 0 ; k < resultado. comprimento ; k ++ ) {
acampamentos. empurrar ( { rótulo : resultado [ k ] . Nome , valor : resultado [ k ] . Tipo } ) ;
}
esse . Nomesdacampanha = acampamentos ;
} )
}
//Trata o valor
identificadoronchange ( evento ) {
esse . valor = evento. detalhe . valor ;
}
}
Saída:
Vamos selecionar o registro e ver o tipo.
Conclusão
Aprendemos como criar um combobox no LWC com atributos e exemplos. Primeiro, criamos um combobox com uma lista de valores e exibimos o valor selecionado. A seguir, renderizamos o modelo HTML com base no valor selecionado por meio da renderização condicional. Por fim, aprendemos como criar as opções para a caixa de combinação a partir dos registros existentes do Salesforce e exibir os campos relacionados na IU.