In User event:
generateIrnButton(recordObj, form) {
let taxLines = recordObj.getLineCount({
sublistId: ‘taxdetails’,
});
taxLines == 0 ? form.addButton({
id: ‘custpage_generate_irn’,
label: ‘Generate IRN’,
functionName: ‘generateIrn’
}) : “”;
},
In Client script:
function generateIrn() {
try {
let recId = currentRecord.get().id;
console.log(“rec”, recId);
let suiteletUrl = url.resolveScript({
scriptId: ‘customscript_jj_sl_e_inv_submission_page’,
deploymentId: ‘customdeploy_jj_sl_e_inv_submission_page’,
returnExternalUrl: false,
params: { ‘action’: ‘generateIrn’, ‘invoiceId’: recId }
});
console.log(“suiteletUrl”, suiteletUrl);
https.get.promise({
url: suiteletUrl
}).then(function (response) {
openConfirmationBox(JSON.parse(response.body));
console.log(“response”, response);
}).catch(function (reason) {
log.error(“failed to send email”, reason)
});
} catch (err) {
log.error(‘Error in generateIrn’, err);
}
}
window.closeConfirmationBox = function () {
let confirmationBox = document.getElementById(‘irnConfirmationBox’);
let overlay = document.getElementById(‘overlay’);
if (confirmationBox) {
confirmationBox.style.display = ‘none’;
}
if (overlay) {
overlay.style.display = ‘none’;
}
window.location.reload();
}
function openConfirmationBox(respone) {
console.log(“respone”, respone.output);
let htmlContent = respone.error ? CONFIRMATION_STYLE.irnGeneratedFailedStyle : CONFIRMATION_STYLE.irnGeneratedStyle;
// Append the HTML content to the body
let body = document.getElementsByTagName(‘body’)[0];
let confirmationDiv = document.createElement(‘div’);
confirmationDiv.innerHTML = htmlContent;
body.appendChild(confirmationDiv);
}
const CONFIRMATION_STYLE = {
irnGeneratedFailedStyle: `<div id=”irnConfirmationBox” style=”position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; border: 1px solid #a3a3a3; background-color: #ffffff; padding: 20px; border-radius: 4px; text-align: center; z-index: 1000; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); animation: fadeIn 0.3s ease-in-out;”>
<h2 style=”color: #4d4d4d; border-bottom: 1px solid #a3a3a3; padding-bottom: 10px; margin-bottom: 10px; font-size: 18px;”>IRN Generation Failed</h2>
<div class=”crossmark-container”>
<div class=”crossmark draw”></div>
</div>
<p style=”font-size: 14px; color: #333;”>IRN generation failed</p>
<p style=”font-size: 14px; color: #333;”><strong>Error: </strong>###RESPONSE_ERROR###</p>
<button onclick=”closeConfirmationBox()” style=”margin-top: 10px; padding: 5px 15px; background-color: #007bff; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;”>Close</button>
</div>
<div id=”overlay” style=”position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 999;”></div>
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
.crossmark-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.crossmark {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-block;
position: relative;
box-shadow: inset 0px 0px 0px #dc3545;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.crossmark.draw:before, .crossmark.draw:after {
content: ”;
width: 20px;
height: 2px;
background-color: #fff;
position: absolute;
top: 19px;
left: 10px;
transform: rotate(45deg);
}
.crossmark.draw:after {
transform: rotate(-45deg);
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #dc3545;
}
}
@keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
</style>`,
irnGeneratedStyle:`
<div id=”irnConfirmationBox” style=”position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; border: 1px solid #a3a3a3; background-color: #ffffff; padding: 20px; border-radius: 4px; text-align: center; z-index: 1000; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); animation: fadeIn 0.3s ease-in-out;”>
<h2 style=”color: #4d4d4d; border-bottom: 1px solid #a3a3a3; padding-bottom: 10px; margin-bottom: 10px; font-size: 18px;”>IRN Generation Confirmation</h2>
<div class=”checkmark-container”>
<div class=”checkmark draw”></div>
</div>
<p style=”font-size: 14px; color: #333;”>IRN generated successfully</p>
<p style=”font-size: 14px; color: #333;”><strong>Generated IRN: </strong>###IRN_NUMBER###</p>
<button onclick=”closeConfirmationBox()” style=”margin-top: 10px; padding: 5px 15px; background-color: #007bff; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;”>Close</button>
</div>
<div id=”overlay” style=”position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 999;”></div>
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
.checkmark-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.checkmark {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-block;
position: relative;
box-shadow: inset 0px 0px 0px #28a745;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark.draw:after {
content: ”;
width: 12px;
height: 24px;
border-radius: 2px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
position: absolute;
top: 8px;
left: 13px;
transform: rotate(45deg);
animation: stroke 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #28a745;
}
}
</style>`
}