1
0
-1
2 answers
- 10-1
So 3 sections in the html print form?
A custom html header, a grid form in the middle, and then a totals section at the end? If so, how do I make the grid form look like the rest of the form? With CSS in the section?
Add your comment... - 10-1
In your form, you can retain your form grid so that it would generate the items for you so that you don't need to write the HTML on your own.
- Ellen Earl
Yeah, I'm only doing the custom HTML because the owner wants the estimate they give the customer to look like this:
So how can I get that "Description" section to look like that in a grid form?
- Ellen Earl
And the description section can be one or many different descriptions, so a different tables?
Add your comment...
Overview
Content Tools
search
attachments
weblink
advanced
Looking to display stored data from an estimate grid form onto a custom html form to view and print. Here is the code details and editEstimate form so far: the original form ID for the edit of the estimate with the multiple items descriptions is shown here:
I get the data from to store in the estimate file fine, but the grid data doesn't populate on the custom html form. Here is a sample of the data for a test estimate:
[{"":"","item_rate":"550","description":"<p>Adding second long description here to fill up space<\/p>","id":"66e145f6-ff92-4aff-bd9d-7b5c942a97df","short_desc":"testing short desc staying power","man_hrs":"3","no_gals":"4","__UNIQUEKEY__":"ba1d1535-124a-49bb-8a4a-96293b25dcd7","item_qty":"1","line_total":"550.00"}]
the estimate print form is here:
The latest version of the custom html code:
<style>
#page #form-canvas { padding: 0 20px 0 40px; }
#form-canvas * { font-size: 11pt; }
/* Grid container styling for company header and Logo */
.grid-container-letterhead {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 100%;
border-collapse: collapse;
margin-left: 10px;
margin-top: 10px;
}
/* Grid container styling for client header */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 25% 25% 25%);
max-width: 100%;
border-collapse: collapse;
margin-left: 10px;
margin-top: 10px;
}
/* Print button styling */
.print-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
/* Print specific styling */
@media print {
.print-btn {
display: Print;
}
}
/* CSS for the item grid and header */
.item-grid-header {
display: grid;
grid-template-columns: 45% 10% 10% 10% 10% 10%; /* Adjusted for man_hrs and no_gals */
width: 100%;
border-top: 3px solid #ddd;
gap: 10px;
}
.item-grid {
display: grid;
grid-template-columns: 45% 10% 10% 10% 10% 10%; /* Adjusted for man_hrs and no_gals */
width: 100%;
border-bottom: 1px solid #ddd;
margin: 10px;
border-collapse: collapse;
gap: 10px;
}
.item-col {
padding: 15px;
text-align: left;
}
</style>
<div style="padding: 10px; margin-bottom: 20px;">
<!-- Estimate company header and Logo information -->
<div class="grid-container-letterhead">
<!-- First column (LOGO) -->
<div class="grid-item">
<img src="/jw/web/client/app/ims/1/form/download/setup/setup/#form.ims_setup.logo[setup]#" style="width: 325px;">
</div>
<!-- Last column (COMPANY INFO) -->
<div class="grid-item">
<p style="text-align: right">
<strong>All Terrain Painting & Repairs NW</strong><br>
Office 253-514-0997<br>
12119 Key Peninsula HW NW<br>
Gig Harbor, WA 98329
</p>
</div>
</div>
<!-- Estimate Client information -->
<div class="grid-container" style="margin-top: 50px;">
<!-- First column (PREPARED FOR:) -->
<div class="grid-item">
<p><strong>Prepared For:</strong><br>
#form.atpj_estimates.client_name#<br>
#form.atpj_estimates.address_1#<br>
#form.atpj_estimates.address_2#<br>
#form.atpj_estimates.city#, #form.atpj_estimates.state# #form.atpj_estimates.zip_code#
</p>
</div>
<!-- Middle column (ESTIMATE DATE) -->
<div class="grid-item">
<p><strong>Estimate Date:</strong><br>#form.atpj_estimates.estimate_date#</p>
</div>
<!-- Last column (ESTIMATE NUMBER & REFERENCE) -->
<div class="grid-item">
<p><strong>Estimate Number:</strong><br>#form.atpj_estimates.estimate_no#<br>
<strong>Reference:</strong><br>#form.atpj_estimates.address_1#
</p>
</div>
</div>
<!-- Item details go here -->
<div class="item-details">
<div class="item-grid-header">
<div class="item-col"><strong>Description</strong></div>
<div class="item-col"><strong>Rate</strong></div>
<div class="item-col"><strong>Qty</strong></div>
<div class="item-col"><strong>Total</strong></div>
<div class="item-col"><strong>Man Hrs</strong></div>
<div class="item-col"><strong>No. Gals</strong></div>
</div>
<!-- Begin looping through description_of_work JSON array -->
<script>
var descriptionOfWork = JSON.parse('#form.atpj_estimates.description_of_work#');
descriptionOfWork.forEach(function(item) {
document.write(
<div class="item-grid">
<div class="item-col">${item.short_desc} - ${item.description}</div>
<div class="item-col">${item.item_rate}</div>
<div class="item-col">${item.item_qty}</div>
<div class="item-col">${item.line_total}</div>
<div class="item-col">${item.man_hrs}</div>
<div class="item-col">${item.no_gals}</div>
</div>
);
});
</script>
</div>
<div style="text-align: right; margin-top: 20px; gap: 15px">
<p>Subtotal: #form.atpj_estimates.subtotal#<br>
Tax (7.9%): #form.atpj_estimates.total_taxes#<br>
<strong>Estimate Total: #form.atpj_estimates.estimate_total#</strong>
</p>
</div>
<!-- Print button -->
<div style="text-align: center; margin-top: 20px;">
<button class="print-btn" onclick="window.print()">Print Estimate</button>
</div>
</div>
I am not super familiar with Javascript, hash variable use and Joget, so maybe I have built this portion of the app incorrectly. Any suggestions would be appreciated.
thanks in advance for any insights...