In this tutorial, we'll walk through the steps to add a custom "Print" button to an entity list page, allowing users to print the list of records or save it as a PDF.
Step 1: Add an Entity List to the Page
Add Entity List: First, add an Entity List to your page.
Edit Code: Once the Entity List is added, click on "Edit Code." A popup will appear; select "Open in Visual Studio."
Step 2: Add a Custom Button
Next, we’ll add a custom button above the Entity List.
Insert HTML Code: Add the following code to place a "Print" button above the Entity List:
<button id="btnPrint" type="button" class="btn btn-warning" style="align-self: flex-end; margin-left: auto;">Print</button>
The final code will look like this
<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
<div class="container" style="display: flex; flex-wrap: wrap;">
<div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word; padding: 16px; margin: 60px 0px;">
<button id="btnPrint" type="button" class="btn btn-warning" style="align-self: flex-end; margin-left: auto;">Print</button>
{% include 'entity_list' key: 'Active Accounts' %}
</div>
</div>
</div>
Review the Layout: The button should now be visible above your Entity List.
Step 3: Add JavaScript for Print Functionality
Navigate to the Page's JavaScript: Open the JavaScript file associated with your page.
Insert the Following JavaScript Code: Add the code below to implement the print functionality:
$(document).ready(function () {
var cssLink = '<link rel="stylesheet" href="/bootstrap.min.css" />';
$("#btnPrint").on("click", function() {
var divContents = document.getElementsByClassName("view-grid table-responsive")[0].innerHTML;
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write(cssLink);
printWindow.document.write('<html><head><title>.</title>');
printWindow.document.write('</head><body><h1>Account List<br><br>');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
// Delay of 1 second before printing
setTimeout(function() {
printWindow.print();
}, 1000);
});
});
Our code will look like below,
Final Review
Your page should now look similar to the layout shown below. The custom "Print" button is ready to use.
Click the Print Button: When you click the "Print" button, the list of records will be displayed in a print-friendly format. You can then choose to save the printed records as a PDF using your browser’s print options.
Comments
Post a Comment