Replace Script on QRCodePhaseII footer with this script
<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();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]);}return details;}function findParentTable(element){while(element){if(element.tagName==='TABLE')return element;element=element.parentElement;}return null;}function insertQRCodeToRecipientRow(qrCodeContent){const qrCodeCell=document.getElementById('qrcodecell');const recipientNameDiv=document.getElementById('RecipientName');if(qrCodeCell){qrCodeCell.innerHTML='<div id="signedQrCode" style="padding: 20px"></div>';renderQRCode(qrCodeContent,'signedQrCode');}else if(recipientNameDiv){const recipientRow=recipientNameDiv.closest('tr');const newTd=document.createElement('td');newTd.style.width='140px';newTd.style.verticalAlign='top';newTd.innerHTML='<div id="signedQrCode" style="padding: 0px"></div>';recipientRow.insertBefore(newTd,recipientRow.firstChild);renderQRCode(qrCodeContent,'signedQrCode');}removeElementById('qrcode');}function renderQRCode(content,elementId){new QRCode(document.getElementById(elementId),{text:content,width:120,height:120,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();}insertQRCodeToRecipientRow(qrCodeContent);}};</script>
Let test, make sure qrcode is readable on printed document
Itβs good if there is no company logo but the client space doesnβt show up well can it be moved up and the title in the middle
QR CODE NOT READ printed document
Moving Title is very complicated through script, maybe Custom Themes is more possible for your needs.
I changed the qrcode size from 120px to 160px to make it easier to read by the scanner. Normally for Zatca which accommodates 1000 characters in the qrcode, we need a larger size.
<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(),data=atob(qrCodeBase64.replace(/\+/g,'+')),index=0;while(index<data.length){let tag=data.charCodeAt(index++),length=data.charCodeAt(index++),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]);}return details;}function findParentTable(element){while(element){if(element.tagName==='TABLE')return element;element=element.parentElement;}return null;}function insertQRCodeToRecipientRow(qrCodeContent){if(!qrCodeContent)return;const qrCodeCell=document.getElementById('qrcodecell'),recipientNameDiv=document.getElementById('RecipientName');if(qrCodeCell){qrCodeCell.innerHTML='<div id="signedQrCode" style="padding: 20px"></div>';renderQRCode(qrCodeContent,'signedQrCode');}else if(recipientNameDiv){const recipientRow=recipientNameDiv.closest('tr'),newTd=document.createElement('td');newTd.style.width='180px';newTd.style.verticalAlign='top';newTd.innerHTML='<div id="signedQrCode" style="padding: 0px"></div>';recipientRow.insertBefore(newTd,recipientRow.firstChild);renderQRCode(qrCodeContent,'signedQrCode');}}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();}}const element=document.getElementById('qrcode');if(element)element.remove();insertQRCodeToRecipientRow(qrCodeContent);}};</script>
