Please let me know how i can solve this issue, when i use normal without theme it is working fine and we are working with new theme it is showing problem. Please help me to solve this problem
Themes are in obsolete features. If the QR code works well with the build-in theme (i.e. not creating / selecting one) then it means that this was part of localizations created after themes were made obsolete. So the only solution is to use what ou label “normal without theme”.
1 Like
You need to provide much more information. What edition and version number? You didn’t even indicate what country or how you are trying to generate the QR code or what type of transaction.
Dear Sir, i am from saudi arabia and i have given my vat no in the business details and when i am trying to print invoice and i use one theme the qr code is not showing vat no when i scan and when i don’t use any theme then it is working fine.
At present on my system i am using 23.11.29.1184 version.
Thanks
Update your software. You are more than 160 versions behind.
Dear Sir,
From where i will update the software, please let me know and sorry to disturb you.
Thanks for your support and concern.
https://forum.manager.io/t/ksa-qr-code-not-working-in-custom-theme/41299/46
The solution is here, but they will face another problem for which I have not found a solution
This happens when using [custom theme]
default theme It also does not happen that it is the date of creation of the invoice, which is the date that appears when scanning
time stamp on QR Changes without modification to the invoice
Actually, I have succeeded in creating a custom theme with QRcode for ar-SA.
Regarding the Timestamp, the manager gives us the date of the last update. This is very risky when the user accidentally updates the data.
I think it would be better if Timestamp is taken from IssueDate. But I’m not sure if it’s allowed by regulations in your country.
Not sure, but I’ll try to pay attention to this
1 Like
Thank you for your comment
I worked with more than one program and found it to be one of those approved by the authority. I found that the invoice date can be changed and the QR code becomes the same as the issuance date.
But the law here works as follows
The date of issuance must be the same day, meaning that an invoice will not be issued in the future or the past
But the problem here is that if I scan the QR code today, it will be correct, and if I save the invoice on the second day, the date of the second existing day will be present without me modifying the invoice.
let’s see if this works for you, I use the Invoice date as the Timestamp, so we don’t need to worry about the timestamp changing as long as we don’t change the Invoice date.
<table style="padding: 30px; width: 100%">
<thead>
<tr>
<td colspan="99">
<table style="margin-bottom: 20px; width: 100%"><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 id="BusinessName" style="font-weight: bold">{{ business.name }}</div>
<div>{{ business.address | newline_to_br }}</div>
{% for field in business.custom_fields %}
<div>{{ field.label }} <span id="{{ field.key }}">{{ field.text }}</span></div>
{% endfor %}
</td>
{% endif %}
</tr></table>
<div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ 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 id="{{ total.label }}" class="{{ total.class }}" data-value="{{ total.number }}" 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="99">
<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>
<input type="hidden" name="Timestamp" id="TimestampField" value="">
</tbody>
</table>
<div id="qrcodeContainer" style="padding: 20px">
<div id="qrcode" style="padding: 20px"></div>
<div id="decodedContent"></div>
</div>
<script type="text/javascript">
const dateStringExample = '{{ fields["Invoice date"] | strip }}';
function dateToTimestamp(dateString) {
const timestampValue = new Date(dateString).getTime(); // Get timestamp in milliseconds
//console.log("Timestamp:", timestampValue);
return timestampValue;
}
const timestampValueExample = dateToTimestamp(dateStringExample);
if (!isNaN(timestampValueExample)) {
document.getElementById("TimestampField").value = timestampValueExample;
//console.log("Timestamp:", timestampValueExample);
} else {
console.error("Error: Invalid date string.");
// Handle the error here (e.g., display an error message)
}
</script>
<script type="text/javascript">
// Function to check if the QR code is ready
function checkQRCodeReady() {
// Get the div element containing the QR code
var qrcodeDiv = document.getElementById("qrcode");
// Get the title attribute value (which contains the Base64 encoded content)
var titleAttribute = qrcodeDiv.getAttribute("title");
// If the title content is not null, proceed with decoding
if (titleAttribute) {
// Log the title content
console.log("Title content:", titleAttribute);
// Decode the Base64 content
var decodedContent = atob(titleAttribute);
// Update the content of the existing decodedContent div
var decodedContentDiv = document.getElementById("decodedContent");
decodedContentDiv.innerHTML = "Decoded Content: " + decodedContent;
// Stop the timer since the QR code is ready
clearInterval(checkQRCodeInterval);
} else {
console.log("QR code not ready yet...");
}
}
// Check if the QR code is ready every 100 milliseconds
var checkQRCodeInterval = setInterval(checkQRCodeReady, 100);
</script>
Edited…
Working Code tested with KSA Scanner
<table style="padding: 30px; width: 100%">
<thead>
<tr>
<td colspan="99">
<table style="margin-bottom: 20px; width: 100%"><tr>
<td style="font-weight: bold; font-size: 32px; vertical-align: top">{{ title }} (Custom Theme)</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 id="BusinessName" style="font-weight: bold">{{ business.name }}</div>
<div>{{ business.address | newline_to_br }}</div>
{% for field in business.custom_fields %}
<div>{{ field.label }} <span id="{{ field.key }}">{{ field.text }}</span></div>
{% endfor %}
</td>
{% endif %}
</tr></table>
<div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ 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 id="{{ total.label }}" class="{{ total.class }}" data-value="{{ total.number }}" 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="99">
<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>
<input type="hidden" name="Timestamp" id="TimestampField" value="">
</tbody>
</table>
<div id="qrcodeContainer" style="padding: 20px">
<div id="qrcode" style="padding: 20px"></div>
</div>
<script type="text/javascript">
const invoiceDate = '{{ fields["Invoice date"] | strip }}';
const timestampValue = new Date(invoiceDate).getTime()
if (!isNaN(timestampValue)) {
document.getElementById("TimestampField").value = timestampValue;
} else {
console.error("Error: Invalid date string.");
}
</script>
1 Like