Hi All,
I have created a custom web form in Odoo to verify some details before the delivery of an order.
I want to add Odoo signature field to my web form so that they can verify and sign digitally.
I tried to call portal.signature_form so I'll get signature field but it is not working.
how can I get portal like signature in my web form?
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Financeiro
- Inventário
- PoS
- Project
- MRP
Esta pergunta foi sinalizada
1
Responder
99
Visualizações
Hi,
You can add Odoo’s digital signature to your custom form in two ways, depending on whether it’s for backend users or portal users.
If it’s a backend form view, simply add a binary field with widget="signature" in your model and XML. This automatically shows the Odoo signature pad inside the form.
If it’s a portal or custom web form, you can’t just call portal.signature_form. Instead, you need to load Odoo’s signature_pad.js and the signature widget scripts, then create a <canvas> field that acts as a signature pad. The widget saves the signature as a binary image when the form is submitted.
In short, backend forms use widget="signature", while portal forms require adding the signature pad scripts and using a <canvas> to capture the signature.
Try the following code.
Python
from odoo import models, fields
class SaleOrder(models.Model):
_inherit = 'sale.order'
dispatch_signature = fields.Binary("Dispatch Signature", attachment=True)
accountant_signature = fields.Binary("Accountant Signature", attachment=True)
XML
<div id="signature">
<div class="row m-2">
<!-- Dispatch Signature -->
<div class="col-md-6 mb-3">
<label for="dispatch_signature" class="form-label fs-6 fw-bold">Dispatch In-Charge</label>
<field name="dispatch_signature" widget="signature" class="o_signature_field"/>
</div>
<!-- Accountant Signature -->
<div class="col-md-6 mb-3">
<label for="accountant_signature" class="form-label fs-6 fw-bold">Accountant</label>
<field name="accountant_signature" widget="signature" class="o_signature_field"/>
</div>
</div>
</div>
Hope it helps
I wrote the below
<div id="signature">
<div class="row m-2">
<!-- Dispatch Signature -->
<div class="col-md-6">
<t t-if="picking.dispatch_signature">
<div class="col-sm-6 text-center">
<h5>Dispatch In-Charge</h5>
<img t-att-src="'data:image/png;base64,%s' % picking.dispatch_signature"
style="max-height:6rem; max-width:100%;"/>
<p class="mt-2 mb-0">
<t t-out="picking.dispatch_signed_by or ''"/>
</p>
</div>
</t>
<div id="dispatch_in_charge_content">
<div class="mb-4">
<h4>Dispatch In-Charge</h4>
<t t-if="not picking.dispatch_signature">
<a role="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal_dispatch">
Accept & Sign
</a>
</t>
<t t-else="">
<div class="alert alert-primary">Already signed by Dispatch In-Charge</div>
</t>
</div>
<div role="dialog" class="modal fade" id="modal_in_charge">
<div class="modal-dialog">
<form id="accept_in_charge" method="POST" class="modal-content">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<header class="modal-header">
<h4 class="modal-title">Dispatch In-Charge Signature</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
</header>
<main class="modal-body" id="sign-dialog-in_charge">
<span>
By signing, you confirm acceptance for delivery order
<b t-out="picking.name"/>.
</span>
<t t-call="portal.signature_form">
<t t-set="call_url" t-value="'/dispatch_checklist/%s/accept?role=in_charge' % access_token"/>
<t t-set="default_name" t-value="picking.user_id.name or ''"/>
<t t-set="button_text" t-value="'Sign as in_charge'"/>
<t t-set="success_text" t-value="'Signed'"/>
</t>
</main>
</form>
</div>
</div>
</div>
</div>
<!-- Accountant Signature -->
<div class="col-md-6">
<t t-if="picking.accountant_signature">
<div class="col-sm-6 text-center">
<h5>Accountant</h5>
<img t-att-src="'data:image/png;base64,%s' % picking.accountant_signature"
style="max-height:6rem; max-width:100%;"/>
<p class="mt-2 mb-0">
<t t-out="picking.accountant_signed_by or ''"/>
</p>
</div>
</t>
<div id="accountant_content">
<div class="mb-4">
<h4>Accountant</h4>
<t t-if="not picking.accountant_signature">
<a role="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal_accountant">
Accept & Sign
</a>
</t>
<t t-else="">
<div class="alert alert-primary">Already signed by Accountant</div>
</t>
</div>
<div role="dialog" class="modal fade" id="modal_accountant">
<div class="modal-dialog">
<form id="accept_accountant" method="POST" class="modal-content">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<header class="modal-header">
<h4 class="modal-title">Accountant Signature</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
</header>
<main class="modal-body" id="sign-dialog-accountant">
<span>
By signing, you confirm acceptance for delivery order
<b t-out="picking.name"/>.
</span>
<t t-call="portal.signature_form">
<t t-set="call_url" t-value="'/dispatch_checklist/%s/accept?role=accountant' % access_token"/>
<t t-set="default_name" t-value="picking.finance_user_id.name or ''"/>
<t t-set="button_text" t-value="'Sign as Accountant'"/>
<t t-set="success_text" t-value="'Signed'"/>
</t>
</main>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
and it is working fine but on one field I got
UncaughtClientError > TypeError
Uncaught Javascript Error > Cannot read properties of undefined (reading 'backdrop')
Occured on localhost:8069 on 2025-09-10 11:02:17 GMT
TypeError: Cannot read properties of undefined (reading 'backdrop')
at Modal._initializeBackDrop (http://localhost:8069/web/assets/1/6ac73f9/web.assets_frontend_lazy.min.js:2832:75)
at new Modal (http://localhost:8069/web/assets/1/6ac73f9/web.assets_frontend_lazy.min.js:2819:2189)
at Modal.getOrCreateInstance (http://localhost:8069/web/assets/1/6ac73f9/web.assets_frontend_lazy.min.js:2651:81)
at HTMLAnchorElement.<anonymous> (http://localhost:8069/web/assets/1/6ac73f9/web.assets_frontend_lazy.min.js:2858:18)
at HTMLDocument.handler (http://localhost:8069/web/assets/1/6ac73f9/web.assets_frontend_lazy.min.js:2473:11)
Está gostando da discussão? Não fique apenas lendo, participe!
Crie uma conta hoje mesmo para aproveitar os recursos exclusivos e interagir com nossa incrível comunidade!
Inscreva-se| Publicações relacionadas | Respostas | Visualizações | Atividade | |
|---|---|---|---|---|
|
Self hosting Odoo custom
Resolvido
|
|
1
ago. 24
|
2222 | |
|
13
mar. 16
|
5511 | ||
|
1
set. 15
|
6223 | ||
|
1
ago. 25
|
667 | ||
|
0
ago. 24
|
1585 |
