Hi @Kabirdas
I am using a custom component displayed in a modal to create a Delivery Note that can be printed as a PDF. The code I have in the iFrame field is:
<style>
/* Base CSS styles DO NOT CHANGE OR REMOVE */
body {
margin: 0;
padding: 0;
font:62.5%/1.5 Helvetica, Arial, Verdana, sans-serif;
}
ul, ul li, p, div, ol {
margin:0;
padding:0;
list-style:none;
}
#delivery-note {
margin: 0 12pt;
width:660px;
padding: 10px 20px;
margin: 1em auto;
clear:both;
position:relative;
overflow:hidden;
background:#fff
}
#delivery-note.cancelled {
background: #fff url(/images/cancelled.gif) top left
}
/*Delivery Note Template*/
/*=========================== TYPOGRAPHY =========================*/
#delivery-note{
font-family: Helvetica, Arial, Verdana, sans-serif !important
}
#delivery-note h2 {
margin: 10px 0;
font-size: 14pt;
}
#delivery-note-parts td, th {
font-size: 9pt;
}
#delivery-note-header #company-address {
text-align: left;
font-size: 11pt;
line-height: 14pt;
}
#delivery-note #client-details, #delivery-note-info p, #delivery-note #delivery-note-other, #delivery-note #payment-details {
font-size: 9pt;
line-height: 12pt;
}
#delivery-note-info h2, #delivery-note-info h3 {
margin: 0;
font-weight: normal;
}
#delivery-note-info h2{
text-transform:uppercase
}
#delivery-note-info h3 {
font-size:12pt;
}
#comments {
font-weight:bold;
margin-top:15px;
font-size:10pt
}
/*=========================== LAYOUT =========================*/
#delivery-note{
padding:0 1cm 1cm 1cm;
}
#delivery-note-header .vcard {
width: 80%;
float:left;
}
#delivery-note-header .logo {
width: 20%;
float:right;
}
#delivery-note-header{
margin-top:0.3cm;
border-bottom:4px solid #000;
padding-bottom:10px;
overflow:hidden
}
#delivery-note-info{
margin: 0.7cm 0 20px 0;
width:250px;
float:right;
text-align:right
}
#client-details {
margin:0.7cm 0 20px 0px;
float:left;
width:250px
}
#delivery-note-parts {
margin: 10em 0em 5em 0em;
clear: both;
}
#delivery-note-other {
text-align: left;
float: left;
width:250px;
}
#comments{
clear:both;
padding-top:0.5cm
}
/*=========================== TABLES =========================*/
#delivery-note table#delivery-note-parts {
border-collapse:collapse;
width:100%;
clear:both;
}
#delivery-note-parts th {
text-align: left;
white-space: nowrap;
padding: 1px 2px 0px 0px;
font-weight: bold;
background: #FFF;
border-bottom: solid 1px #444;
}
#delivery-note-parts td.item_r{
text-align: left;
}
#delivery-note-parts .file_name_th{
width:40%
}
#delivery-note-parts .quantity_ordered_th{
width:20%
}
#delivery-note-parts .quantity_shipped_th{
width:20%
}
#delivery-note-parts .po_number_th{
width:20%;
text-align:left
}
.button {
margin-left: 1em;
}
</style>
<script src="https://cdn.tryretool.com/js/react.production.min.js"
crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js"
crossorigin></script>
<script src="https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
<div id="react"></div>
<script type="text/babel">
const { Input, Button } = window["material-ui"];
const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
<div id="delivery-note">
<div id="delivery-note-header">
<div class="vcard" id="company-address">
<div class="fn org"><strong>Incremental Engineering Ltd</strong></div>
<div class="adr">
<div class="address1">9b Reliance Works</div>
<div class="address2">Newpound</div>
<div class="town">Wisborough Green</div>
<div class="county">West Sussex</div>
<div class="post-code">RH14 0AZ</div>
</div>
<div class="email">sales@incrementalengineering.com</div>
</div>
<div class="logo">
<img src={model.company.base64logo} alt="Base64 encoded image"></img>
</div>
</div>
<div id="delivery-note-info">
<h2>Delivery Note <strong>{model.deliveryNoteID}</strong></h2>
<h3>Shipping Date: {model.shippingDate}</h3>
</div>
<div class="vcard" id="client-details">
<div class="fn">{model.customer.name}</div>
<div class="adr">
<div class="cust-address">{model.customer.address}</div>
<div class="locality">ClientCity</div>
<div id="client-postcode"><span class="region">ClientRegion</span> <span class="postal-code">ClientZip</span></div>
</div>
</div>
<table id="delivery-note-parts">
<thead>
<tr id="header_row">
<th class="file_name_th">File Name</th>
<th class="quantity_ordered_th">Quantity Ordered</th>
<th class="quantity_shipped_th">Quantity Shipped</th>
<th class="po_number_th">PO Number</th>
</tr>
</thead>
<tbody>
{model.partsData.map(d => (
<tr class="item">
<td class="item_l">{d.fileName}</td>
<td class="item_l">{d.quantityOrdered} </td>
<td class="item_r">{d.quantityShipped}</td>
<td class="item_r">{d.poNumber}</td>
</tr>))}
</tbody>
</table>
<div id="delivery-note-other">
<h2>Other Information</h2>
</div>
<div id="comments"></div>
<p>{model.comments}</p>
<div id="printing">
{pdfprint(model.print)}
{modelUpdate({"print": false })}
</div>
</div>
);
function pdfprint(print) {
if (print === true){
var opt = {
margin: 0.5,
filename: "myfile.pdf",
image: { type: "jpeg", quality: 0.98 },
enablelinks: true,
html2canvas: { scale: 1},
jsPDF: { unit: "cm", orientation: "portrait" }
};
window.html2pdf().set(opt)
.from(document.getElementById("react"))
.toPdf()
.output("bloburl")
.then(function(pdfas) { window.open(pdfas) } );
}
}
const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));
</script>
and this is the code in the Model
{
"deliveryNoteID" : "{{tblDeliveryNotes.selectedRow.data.delivery_note_id}}",
"company" : {
"name": "Incremental Engineering Ltd",
"address1": "",
"address2" : "",
"base64logo": "data:image/gif;base64,{{firestoreData.value.configuration.company.logo_base64}}"
},
"customer" : {
"name": {{tblDeliveryNotes.selectedRow.data.company}},
"address": {{tblDeliveryNotes.selectedRow.data.address}},
"city" : {{tblDeliveryNotes.selectedRow.data.city}},
"county": {{tblDeliveryNotes.selectedRow.data.country}},
"postcode": {{tblDeliveryNotes.selectedRow.data.postcode}},
"country": {{tblDeliveryNotes.selectedRow.data.country}}
},
"shippingDate" : "16/06/2022",
"comments": "Some comments about this delivery note",
"partsData": {{deliveryNotePartsFormatForPDF.data}},
"output": "",
"print" : false
}
Hope that is useful
Adam