-
Goal: I am trying to write a custom component that will contain html and convert the document to pdf. I have the pdf part of my goal completed, but now I am having trouble on creating dynamic html with js within the iframe code. I have a javascript function that generates html based on certain data. When I call the function nothing runs. Even when I call a simple test function that logs to the console, it does not run. I believe there must be a detail on iframe that I am missing.
-
Steps: I have tested my html in vscode and repl and it produces my desired result. I have tried debugging in the iframe code such as formatting the html and adding a simple test function with no success. Ive researched the iframe docs on retool with no findings
-
Details: I am using a custom component and writing the html in the iframe code. The html I wrote does not depend on any outside data sources in order to things simple. It is a basic html and js interaction, which is why I believe there is a simple iframe detail that I am unaware of that causes the code not to work. Note: In the html, I have all of the css in a style element and all of the js in a script element. Again, I did this to keep all of the code in one place to see where things go wrong.
-
Screenshots: Screenshot of app and failed result
Screenshot of expected result. (in repl)
html code in Iframe
<head>
<!---Load dependancies here---->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var element = document.getElementById('container');
html2pdf(element);
</script>
<style>
body {
position: relative;
width: 21cm;
height: 29.7cm;
margin: 0 auto;
color: #001028;
background: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 12px;
font-family: Arial;
outline: 2px solid rgb(235, 155, 81);
min-height: 100vh;
display: flex;
flex-direction: column;
}
#container {
position: relative;
width: 21cm;
height: 29.7cm;
margin: 0 auto;
color: #001028;
background: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 12px;
font-family: Arial;
outline: 2px solid rgb(235, 155, 81);
min-height: 100vh;
display: flex;
flex-direction: column;
}
h1 {
color: #5D6975;
font-size: 2.4em;
line-height: 1.4em;
font-weight: normal;
margin: 0 0 0px 0;
display: inline-block;
position: relative;
left: 31%;
}
header {
border-bottom: 1px solid #5D6975;
border-top: 2px solid rgb(235, 155, 81);
}
#info {
margin-top: 5px;
margin-bottom: 5px;
border-bottom: 1px solid black;
}
#eDate {
position: relative;
left: 40%;
top: 2px;
font-size: 0.8em;
color: #5D6975;
}
.infoBlock {
/*outline: 3px solid black;*/
display: inline-block;
margin-right: 5px;
}
.infoBlock:nth-of-type(1),
.infoBlock:nth-last-of-type(2) {
width: 30%;
}
.infoTitle {
background-color: #457b9d;
color: white;
padding: 1px 60px 1px 5px;
}
.infoData {
padding: 1px 0px 1px 5px;
}
table {
width: 100%;
background-color: #f3f3f3;
outline: 2px solid rgb(235, 155, 81);
}
th {
background-color: #457b9d;
color: white;
padding-top: 7px;
padding-bottom: 7px;
}
td {
background-color: #FFFFFF;
text-align: center;
padding-top: 7px;
padding-bottom: 7px;
}
footer {
margin-top: auto;
background-color: #f3f3f3;
break-after: page;
}
h2 {
padding-left: 40px;
color: #5D6975;
display: inline-block;
}
.footerSh {
display: inline-block;
margin-left: 260px;
color: #5D6975;
}
</style>
</head>
<body id='bd'>
<button onclick="test()">Click me</button>
<script>
function generateSop(data, tableHtml) {
var body = document.getElementById('bd');
body.innerHTML += ` <div id="container">
<header>
<h1>SOP Training Sign In Sheet</h1>
<span id="eDate"> SOP Effective Date: </span>
</header>
<div id="info">
<div class="infoBlock">
<div class="infoTitle">
Supervisor
</div>
<div class="infoData">
${data.supervisor_name}
</div>
</div>
<div class="infoBlock">
<div class="infoTitle">
Training Code
</div>
<div class="infoData">
${data.tc}
</div>
</div>
<div class="infoBlock">
<div class="infoTitle">
Description
</div>
<div class="infoData">
${data.desc}
</div>
</div>
<div class="infoBlock">
<div class="infoTitle">
Tracking Num
</div>
<div class="infoData">
${data.trackc}
</div>
</div>
</div>
<table>
<thead>
<tr>
<th>Employee ID</th>
<th>Full Name</th>
<th>Training Date</th>
<th>Signature</th>
</tr>
</thead>
<tbody id="myTable">
${tableHtml}
</tbody>
</table>
<footer>
<h2>
Trainer __________________
</h2>
<div class="footerSh"> Form Code Revision Date</div>
</footer>
</div>`;
}
function buildTable(data) {
var tableHtml = ''
for (let i = 0; i < data.length; i++) {
var row = `
<tr>
<td>${data[i].employee_id}</td>
<td>${data[i].employee_name}</td>
<td>_________________________</td>
<td>_________________________</td>
</tr>`
tableHtml += row
//table.innerHTML += row
}
return tableHtml
}
function buildPage(mainData, employeeArray) {
console.log("started")
for (let i = 0; i < mainData.length; i++) {
var tableHtml = buildTable(employeeArray)
generateSop(mainData[i], tableHtml)
}
}
function test() {
console.log("Function ran")
}
//variables for testing in repl
var myArray = [{ 'employee_id': '001', 'employee_name': 'John Anderson' }, { 'employee_id': '002', 'employee_name': 'Erick Quadsquez' }]
var mainData = [{ supervisor_name: 'john cena', tc: "trainCode01", desc: "training Description", trackc: 1 }, { supervisor_name: 'rick ross', tc: "trainCode02", desc: "training Description", trackc: 2 }]
//calling functions
buildPage(mainData, myArray)
window.Retool.subscribe(function(model) {
if (!model) { return }
//This prevents the component from entering an endless loop.
buildPage(mainData, myArray)
});
</script>
</body>
</html>