Função
Esse componente gera um código QR a partir do texto informado pelo bloco de programação Alterar valor do campo (cliente ou servidor).
![](/download/attachments/172736302/QrcodeBrowser.png?version=1&modificationDate=1569855250000&api=v2)
Figura 1 - Ao ler esse QR Code você verá a frase “Olá mundo!”
QR Code
Código QR (sigla do inglês Quick Response, resposta rápida em português) é um código de barras bidimensional que pode ser facilmente escaneado usando a maioria dos telefones celulares equipados com câmera. Esse código é convertido em texto (interativo), um endereço URI, um número de telefone, uma localização georreferenciada, um e-mail, um contato ou diversas outras informações. Veja mais detalhes em Código QR.
Principais propriedades
Nome | Propriedade | Função |
---|
Valor | ng-model | Diretiva Angular usada para alterar o valor do componente Código QR. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Estilo | style | Altera o estilo do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para mostrar ou oculta o componente. |
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Alterar valor do componente
Para alterar o conteúdo Código QR, utilize o bloco Alterar valor do campo (categoria Formulário) nas funções de blocos de programação servidor ou cliente (mobile e web).
Na janela do bloco de programação, acesse a janela de Propriedades do bloco de programação (1 da figura 2) e no campo Formulário de Referência selecione a página onde está o componente Código QR. Arraste o bloco Alterar valor do campo, selecione no parâmetro Campo o componente QR (2) e insira o texto que será exibido via Código QR no parâmetro Valor do bloco.
Após isso será necessário configurar um evento para executar o bloco de programação, como por exemplo, o evento Ao iniciar (ng-init) do próprio componente.
![](/download/attachments/172736302/CodigoQR_Alterar-Valor.png?version=1&modificationDate=1639403363000&api=v2)
Figura 2 - Inserindo conteúdo no componente Código QR
Após a configuração do exemplo da Figura 2, o Código QR exibirá o texto “Olá mundo!”, como na Figura 1.
Ajustar tamanho da imagem
O tamanho da imagem pode ser ajustado clicando no ícone de Redimensionar elemento, como na figura 3 e, em seguida, arrastando as laterais da imagem ou clicando nos ícones de menos (para diminuir) e mais (para aumentar). O ajuste também pode ser feito ajustando o Estilo do componente ou pela aba Responsividade.
![](/download/attachments/172736302/CodigoQR-Redimencionar.png?version=1&modificationDate=1639403343000&api=v2)
Figura 3 - Redimensionar elemento