O componentePainel de assinaturapermite a realização de uma assinatura digital feita através do toque (touchscreen) e obter o conteúdo assinado através de uma imagem.
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.
Skin
crn-skin
Permite selecionar um skin que afetará apenas o componente selecionado.
Classes CSS
class
Adiciona classes CSS que já foram criadas.
Exemplo de uso
O componente Painel de assinatura só recebe a assinatura do usuário e limpa o campo, assim, é preciso associa-lo a uma fonte de dados ou obter a imagem através de um bloco de programação. No exemplo a seguir, iremos capturar a assinatura do usuário através de um bloco de programação, chamado por umbotão, e a assinatura será renderizada nocomponente imagem. Como a imagem é convertida em base64, é necessário concatenar o Data URI scheme com a base64, como mostra a figura 2.
Como o componente transforma a assinatura em imagem e depois converte para base64, é possível obter seu valor para tratar de diversas formas: salvar em banco, vincular a um campo da fonte de dados, fazer uma lógica via bloco de programação e outros.
Criando o bloco de programação
Para realizar a captura da assinatura, inicialmente precisamos criar obloco de programação (cliente)que irá realizar tal função, confira na imagem abaixo. Utilizaremos o bloco de programaçãoDefinir valor do atributopara obter o valor do campo assinatura. No parâmetroValor do atributo estamos obtendo o valor do input (assinatura) e concatenando com o Data URI Scheme, desse jeito podemos renderizar a imagem no componente imagem.
Figura 2 - Bloco de programação responsável para salvar a imagem da assinatura.