pPoPor Função
O componente Painel de assinatura permite a realização de uma assinatura digital de um documento de escolha do usuário contido na aplicação.
Figura 1 - Componente Painel de assinatura rodando na web.
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
|---|---|---|
| Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
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 geral 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 de selecionados. |
| Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Propriedades do subcomponente Painel de assinatura
O componente Painel de controle possui um botão interno responsável por limpar o campo da assinatura, confira na tabela abaixo suas propriedades.
Nome | Propriedade | Função |
|---|---|---|
| Altura | height | Atributo que especifica a altura do componente em px. |
| Ao clicar | ng-click | Evento associado a um bloco de programação responsável por efetuar uma ação ao click do botão. |
| Clear | clear | Evento associado ao botão, responsável por limpar o campo da assinatura. |
| DataUrl | - | - |
| Classe CSS | class | Adiciona classes CSS que já foram criadas. |
Associado o componente Painel de assinatura à outro componente
O componente painel de assinatura por si só não realiza nenhuma função específica além de receber a assinatura do usuário e limpar o campo de assinatura, para aumentar a performance do componente, é preciso associa-lo a outros componentes disponíveis no Cronapp, como por exemplo um botão ou uma imagem. No exemplo a seguir faremos os dois, iremos capturar a assinatura do usuário através de um botão e salva-la no componente imagem.
Dica
Também é possível salvar no banco de dados a imagem capturada. Para isso, o tipo do atributo destinado a imagem tem que constar como Imagem no banco.
Criando o bloco de programação
Para realizar a captura da assinatura, inicialmente precisamos criar o bloco de programação (cliente) que irá realizar tal função, confira na imagem abaixo. Utilizaremos o bloco de programação Definir valor do atributo para obter o valor do campo assinatura. No campo Valor do atributo estamos obtendo o valor do input (assinatura) e convertendo para base64, desse jeito podemos salvar a imagem no componente imagem.
Figura 2 - Bloco de programação responsável para salvar a imagem da assinatura.
Agora precisamos incluir o componente imagem e botão na view do componente Painel de assinatura, confira na figura 3.
Figura 2.1 - Adicionando o componente botão e imagem.
Por fim, basta associar o evento Ao Clicar do botão ao bloco de programação criado na figura 1. Em seguida execute a aplicação, o resultado obtido pode ser visto na figura 2.2.
Figura 2.2 - Componente Painel de assinatura rodando na web
- Componente imagem exibindo a assinatura capturada pelo botão;
- Área destinada à assinatura;
- Botão para limpar o campo da assinatura;
- Botão responsável por capturar a assinatura.
Nome em inglês
Input
Nesta página
Compatibilidade
Formulário web
Equivalente mobile
Painel de assinatura
Botão do Componente
Imagem no Editor Visual