# Como adicionar uma assinatura digital em um Report Print / template de Impressão / PDF

Em muitos cenários regulatórios ou operacionais, é necessário que um **Report Print** contenha uma **assinatura do responsável**, seja ela manual, digitalizada ou capturada via formulário.  
Neste artigo, vamos mostrar **como configurar um campo de assinatura e ajustá-lo visualmente no Report Print**, de forma simples e flexível.

[![image.png](https://wiki.agilityflow.io/uploads/images/gallery/2025-12/scaled-1680-/iqMimage.png)](https://wiki.agilityflow.io/uploads/images/gallery/2025-12/iqMimage.png)

## Visão geral da solução

A ideia é bem objetiva:

1. Criar um **formulário** com um campo do tipo **Assinatura**
2. Arrastar esse campo para dentro do **Report Print**
3. Ajustar o tamanho e o posicionamento da assinatura usando o **Código-Fonte** do editor

---

## 1. Criando o campo de Assinatura no formulário

No formulário que alimenta o Report Print:

- Crie um novo campo
- Selecione o **tipo: Assinatura**
- Salve o formulário

Esse campo será responsável por armazenar a imagem da assinatura associada ao operador ou responsável.

> Importante: o campo aparecerá disponível como variável para ser usado no Report Print.

---

## 2. Inserindo a assinatura no Report Print

Com o Report Print aberto no editor:

- Arraste o campo **Assinatura** para o local desejado no documento
- Ele aparecerá como um placeholder dinâmico (exemplo: `@Assinatura`)

Neste momento, o layout ainda é básico, sem controle fino de tamanho ou alinhamento.

[![image.png](https://wiki.agilityflow.io/uploads/images/gallery/2025-12/scaled-1680-/wxoimage.png)](https://wiki.agilityflow.io/uploads/images/gallery/2025-12/wxoimage.png)

---

## 3. Acessando o modo Código-Fonte

Para personalizar o layout:

- Clique no ícone **Código-Fonte** no menu do editor
- O HTML completo do Report Print será exibido

[![image.png](https://wiki.agilityflow.io/uploads/images/gallery/2025-12/scaled-1680-/KG4image.png)](https://wiki.agilityflow.io/uploads/images/gallery/2025-12/KG4image.png)

<div class="no-scrollbar flex min-h-36 flex-nowrap gap-0.5 overflow-auto sm:gap-1 sm:overflow-hidden xl:min-h-44 mt-1 mb-5 [&:not(:first-child)]:mt-4" id="bkmrk--6"></div>É nesse ponto que conseguimos controlar exatamente **como a assinatura será exibida**.

---

## 4. Criando uma classe CSS para a assinatura

No início do código (ou em um local apropriado), adicione um bloco de estilo, exemplo:

```html
<style type="text/css">.assina2{
    width: 270px;
    margin: auto;
    margin-bottom: -30px;
}
</style>
```

<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk-o-que-esse-css-faz"><div class="overflow-y-auto p-4" dir="ltr">`    `O que esse CSS faz</div></div>- `width: 270px`  
    Define um tamanho padrão para a assinatura, evitando que ela fique grande demais
- `margin: auto`  
    Centraliza a assinatura horizontalmente
- `margin-bottom: -30px`  
    Ajusta o espaçamento vertical, aproximando a assinatura do texto abaixo (nome, cargo, empresa etc.)

Esse valor pode (e deve) ser ajustado conforme o layout do seu documento.

---

## 5. Envolvendo o campo de assinatura com a classe CSS

Agora, localize no HTML o trecho onde o campo de assinatura aparece e envolva-o com uma `div` usando a classe criada:

<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk-%3Cdiv-class%3D%22assina2%22"><div class="@w-xl/main:top-9 sticky top-[calc(--spacing(9)+var(--header-height))]"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
</div></div></div><div class="overflow-y-auto p-4" dir="ltr">`<span class="hljs-tag"><<span class="hljs-name">div</span></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"assina2"</span>>    @Assinatura<span class="hljs-tag"></<span class="hljs-name">div</span></span>>`</div></div>No seu caso real, o campo aparece como um `label` com bindings internos, algo semelhante a:

<div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary" id="bkmrk--9"><div class="@w-xl/main:top-9 sticky top-[calc(--spacing(9)+var(--header-height))]"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">  
</div></div></div><div class="overflow-y-auto p-4" dir="ltr">  
</div></div>```html
<div class="assina2"> 
  <span class="fontededados"> 
    <label class="p-name" data-variablename="Assinatura"> Assinatura </label> 
  </span> 
</div>
```

O importante é que **todo o bloco da assinatura esteja dentro da `div.assina2`**. como no exemplo abaixo

<div class="border-token-border-default relative w-32 shrink-0 overflow-hidden rounded-xl border-[0.5px] md:shrink max-h-64 sm:w-[calc((100%-0.5rem)/3)] rounded-s-xl" id="bkmrk--10">  
</div><div class="border-token-border-default relative w-32 shrink-0 overflow-hidden rounded-xl border-[0.5px] md:shrink max-h-64 sm:w-[calc((100%-0.5rem)/3)] rounded-s-xl" id="bkmrk--11"></div><div class="border-token-border-default relative w-32 shrink-0 overflow-hidden rounded-xl border-[0.5px] md:shrink max-h-64 sm:w-[calc((100%-0.5rem)/3)] rounded-s-xl" id="bkmrk--12">[![image.png](https://wiki.agilityflow.io/uploads/images/gallery/2025-12/scaled-1680-/image.png)](https://wiki.agilityflow.io/uploads/images/gallery/2025-12/image.png)</div><div class="border-token-border-default relative w-32 shrink-0 overflow-hidden rounded-xl border-[0.5px] md:shrink max-h-64 sm:w-[calc((100%-0.5rem)/3)] rounded-s-xl" id="bkmrk--13"></div><div class="no-scrollbar flex min-h-36 flex-nowrap gap-0.5 overflow-auto sm:gap-1 sm:overflow-hidden xl:min-h-44 mt-1 mb-5 [&:not(:first-child)]:mt-4" id="bkmrk--14"><div class="border-token-border-default relative w-32 shrink-0 overflow-hidden rounded-xl border-[0.5px] md:shrink max-h-64 sm:w-[calc((100%-0.5rem)/3)] rounded-e-xl">  
</div></div><div class="no-scrollbar flex min-h-36 flex-nowrap gap-0.5 overflow-auto sm:gap-1 sm:overflow-hidden xl:min-h-44 mt-1 mb-5 [&:not(:first-child)]:mt-4" id="bkmrk--16"><div class="border-token-border-default relative w-32 shrink-0 overflow-hidden rounded-xl border-[0.5px] md:shrink max-h-64 sm:w-[calc((100%-0.5rem)/3)] rounded-e-xl">  
</div></div>