When adding a Custom theme to a sales invoice,
Footers do not appear on the invoice after it is created, especially Footers ( QRCodePhaseII ) >
i know that Footers are not showing with custom themes and if so, is there an alternative? As it is important for taxes
Make sure you have selected the footer you created on the invoice. Then in your custom themes, you can use it with the following code
<!-- show footer -->
{% for footer in footers %}
{{ footer }}
{% endfor %}
2 Likes
It has been resolved, thanks Mabaega.
If the selection is ( Footer = QRCodePhaseII ) and the custom themes for the sales invoice is selected, I get errors when ,Transfer invoice to Zatca for taxes If the custom field is not selected, the invoice is posted without errors.
The error that appears (`“infoMessages”: [
{
“status”: “PASS”,
“type”: “INFO”,
“code”: “XSD_ZATCA_VALID”,
“category”: “XSD validation”,
“Message”: “Complied with UBL 2.1 standards in line with ZATCA specifications”
}
],
“warningMessages”: [
{
“status”: “WARNING”,
“type”: “WARNING”,
“code”: “BR-CO-16”,
“category”: “EN_16931”,
“Message”: “Amount due for payment (BT-115) = Invoice total amount with VAT (BT-112) -Pre-Paid amount (BT-113) + Rounding amount (BT-114).”
},
{
“status”: “WARNING”,
“type”: “WARNING”,
“code”: “BR-CL-14”,
“category”: “EN_16931”,
“Message”: “Country codes in an invoice MUST be coded using ISO code list 3166-1”)
Footers ( QRCodePhaseII ) >
<script src="resources/qrcode/qrcode.js"></script><script id="qrCodeFooter">document.onreadystatechange=function(){if(document.readyState=="complete"){var qrCodeContent='%%Base64 QRCode%%';function parseQRCodeContent(qrCodeBase64){let details=new Map();try{let data=atob(qrCodeBase64.replace(/\+/g,'+'));let index=0;while(index<data.length){let tag=data.charCodeAt(index++);let length=data.charCodeAt(index++);let value=data.substr(index,length);index+=length;let decodedValue=(tag===8||tag===9)?[...value].map(c=>c.charCodeAt(0).toString(16).padStart(2,'0')).join(' ').toUpperCase():new TextDecoder('utf-8').decode(new Uint8Array([...value].map(c=>c.charCodeAt(0))));details.set(tag,[decodedValue])}}catch(ex){console.error("Error decoding QR code: "+ex.message)}return details}function findParentTable(element){while(element){if(element.tagName==='TABLE')return element;element=element.parentElement}return null}function insertQRCode(qrCodeContent){const qrCodeCell=document.getElementById('qrcodecell');const qrCodeFooterDiv=document.getElementById('qrCodeFooter');if(qrCodeCell){qrCodeCell.innerHTML='<div id="signedQrCode" style="padding: 20px"></div>';renderQRCode(qrCodeContent,'signedQrCode')}else if(qrCodeContent&&qrCodeContent.length>10){const mainTable=findParentTable(qrCodeFooterDiv);if(!mainTable){console.error('Parent table not found for the QR code.');return}const newRow=mainTable.insertRow();const newCell=newRow.insertCell();newCell.colSpan=99;newCell.innerHTML='<div id="signedQrCode" style="padding: 20px"></div>';renderQRCode(qrCodeContent,'signedQrCode')}removeElementById('qrcode')}function renderQRCode(content,elementId){new QRCode(document.getElementById(elementId),{text:content,width:160,height:160,colorDark:"#000000",colorLight:"#fafafa",correctLevel:QRCode.CorrectLevel.L});let details=parseQRCodeContent(content);if(details.size>0){let title=Array.from(details).map(([tag,value])=>`Tag ${tag} : ${value.join(', ')}`).join('\n');const qrCodeDiv=document.getElementById(elementId);if(qrCodeDiv){qrCodeDiv.title=title.trim()}}}function removeElementById(id){const element=document.getElementById(id);if(element)element.remove()}insertQRCode(qrCodeContent);}}</script>
custom themes code
<table style="background-color: #FFFFFF: width: 404px; color: #000000; text-transform: UPPERCASE\lowercase ;font-size:15px">
<thead>
<tr>
<td colspan="99">
<table style="margin-bottom: 20px; width: 95%"><tr>
<td style="font-weight: bold; font-size: 32px; vertical-align: top">{{ title }}</td>
{% if business.logo != null %}<td style="text-align: end"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px; display: inline" /></td>{% endif %}
</tr></table>
<table style="margin-bottom: 20px; width: 100%"><tr>
<td style="vertical-align: top">
<div style="font-weight: bold">{{ recipient.name }}</div>
<div>{{ recipient.address | newline_to_br }}</div>
<div>{{ recipient.identifier }}</div>
</td>
<td style="text-align: end; vertical-align: top">
{% for field in fields %}
<div style="font-weight: bold">{{ field.label }}</div>
<div style="margin-bottom: 10px">{{ field.text }}</div>
{% endfor %}
</td>
{% if business.address != null %}
<td style="width: 20px"></td>
<td style="width: 1px; border-left-width: 1px; border-left-color: #000; border-left-style: solid"></td>
<td style="width: 20px"></td>
<td style="width: 1px; white-space: nowrap; vertical-align: top">
<div style="font-weight: bold">{{ business.name }}</div>
<div>{{ business.address | newline_to_br }}</div>
{% for field in business.custom_fields %}
<div>{{ field.label }} {{ field.text }}</div>
{% endfor %}
</td>
{% endif %}
</tr></table>
<div style="font-size: 20px; font-weight: bold; margin-bottom: 30px">{{ description }}</div>
</td>
</tr>
<tr>
{% for column in table.columns %}
<td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; text-align: {{ column.align }}; font-weight: bold; padding: 5px 10px; border-bottom-width: 1px; border-bottom-color: #000; border-top-width: 1px; border-top-color: #000; border-top-style: solid; border-bottom-style: solid{% if column.nowrap %}; width: 80px{% endif %}">{{ column.label }}</td>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in table.rows %}
<tr>
{% for cell in row.cells %}
<td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; {% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
{% for column in table.columns %}
<td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid"> </td>
{% endfor %}
</tr>
{% for total in table.totals %}
<tr>
<td colspan="{{ table.columns | size | minus:1 }}" style="text-align: end; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
<td style="border-left-width: 1px; border-left-style: solid; border-left-color: #000; border-right-width: 1px; border-right-style: solid; border-right-color: #000; text-align: right; white-space: nowrap; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
</tr>
{% endfor %}
{% for field in custom_fields %}
<tr>
<td colspan="90">
<div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
<div>{{ field.text | newline_to_br }}</div>
</td>
</tr>
{% endfor %}
<tr>
<td colspan="99">
{% if emphasis.text != null and emphasis.positive %}
<div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; border-style: solid; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
{% endif %}
{% if emphasis.text != null and emphasis.negative %}
<div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; border-style: solid; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
{% endif %}
</td>
</tr>
</tbody>
</table>
<!-- show footer -->
{% for footer in footers %}
{{ footer }}
{% endfor %}
I hope this gets resolved. Thank you for your time and effort, Mabaega.