I have a client that needs to print each Kintone record (from a bulk action button in list view). However, they're not needing any particular template - just the same format as the Print option in a single record. Has anyone else done this or have any pointers?
Hello @hjohnson
I noticed your comment on the other related post.
The simplest solution would be to utilize the Print Creator add-on. Otherwise, you'll need to develop your own printing script and design how the page looks, which could become quite complex.
Here's a basic example to get you started, but please be aware that the design is minimal. Use this as a reference point to build upon:
(function() {
'use strict';
// Function to create and add the print button
function addPrintButton() {
var printButton = document.createElement('button');
printButton.id = 'printButton';
printButton.innerHTML = 'Print All Records';
printButton.style.position = 'absolute';
printButton.style.top = '10px';
printButton.style.right = '10px';
printButton.style.zIndex = '1000';
var headerMenuSpace = kintone.app.getHeaderMenuSpaceElement();
if (headerMenuSpace) {
headerMenuSpace.appendChild(printButton);
printButton.addEventListener('click', function() {
fetchRecordsAndPrint();
});
}
}
// Fetch records and print them
function fetchRecordsAndPrint() {
var appId = kintone.app.getId();
var limit = 500; // Maximum records per request
var offset = 0;
var allRecords = [];
function fetchRecords() {
var params = {
app: appId,
query: 'limit ' + limit + ' offset ' + offset
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, function(resp) {
allRecords = allRecords.concat(resp.records);
if (resp.records.length === limit) {
offset += limit;
fetchRecords();
} else {
printRecords(allRecords);
}
}, function(error) {
console.error(error);
});
}
fetchRecords();
}
function printRecords(records) {
var printWindow = window.open('', '_blank');
var printContent = '<html><head><title>Print Records</title></head><body>';
printContent += '<h1>Records</h1><table border="1"><thead><tr>';
// Define the fields to print
var fields = ['Record Number', 'Name'];
// Table headers
fields.forEach(function(field) {
printContent += '<th>' + field + '</th>';
});
printContent += '</tr></thead><tbody>';
records.forEach(function(record) {
printContent += '<tr>';
fields.forEach(function(field) {
var value = '';
if (field === 'Record Number') {
value = record['RecordNumber'].value;
} else if (field === 'Name') {
value = record['Name'].value;
}
printContent += '<td>' + value + '</td>';
});
printContent += '</tr>';
});
printContent += '</tbody></table></body></html>';
printWindow.document.write(printContent);
printWindow.document.close();
printWindow.print();
}
// Wait for the DOM and Kintone's elements to be fully loaded
kintone.events.on('app.record.index.show', function(event) {
addPrintButton();
});
})();
1 Like
Thank you! One question though - what if I'm wanting to put a single record on each page. Not necessary display the list view but when you select bulk print, it would have each record on a single page?
Hello @hjohnson
You'll just have to design the printing page to ensure each record is printed on a separate page. Here's a refined version of that:
(function() {
'use strict';
// Function to create and add the print button
function addPrintButton() {
var printButton = document.createElement('button');
printButton.id = 'printButton';
printButton.innerHTML = 'Print All Records';
printButton.style.position = 'absolute';
printButton.style.top = '10px';
printButton.style.right = '10px';
printButton.style.zIndex = '1000';
var headerMenuSpace = kintone.app.getHeaderMenuSpaceElement();
if (headerMenuSpace) {
headerMenuSpace.appendChild(printButton);
printButton.addEventListener('click', function() {
fetchRecordsAndPrint();
});
}
}
// Fetch records and print them
function fetchRecordsAndPrint() {
var appId = kintone.app.getId();
var limit = 500; // Maximum records per request
var offset = 0;
var allRecords = [];
function fetchRecords() {
var params = {
app: appId,
query: 'limit ' + limit + ' offset ' + offset
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, function(resp) {
allRecords = allRecords.concat(resp.records);
if (resp.records.length === limit) {
offset += limit;
fetchRecords();
} else {
printRecords(allRecords);
}
}, function(error) {
console.error(error);
});
}
fetchRecords();
}
function printRecords(records) {
var printWindow = window.open('', '_blank');
var printContent = '<html><head><title>Print Records</title>';
printContent += '<style>@media print { .pagebreak { page-break-before: always; } }</style>';
printContent += '</head><body>';
printContent += '<h1>Records</h1>';
// Define the fields to print
var fields = ['Record Number', 'Name'];
records.forEach(function(record, index) {
printContent += '<div>';
printContent += '<table border="1"><thead><tr>';
// Table headers
fields.forEach(function(field) {
printContent += '<th>' + field + '</th>';
});
printContent += '</tr></thead><tbody><tr>';
fields.forEach(function(field) {
var value = '';
if (field === 'Record Number') {
value = record['RecordNumber'].value;
} else if (field === 'Name') {
value = record['Name'].value;
}
printContent += '<td>' + value + '</td>';
});
printContent += '</tr></tbody></table>';
printContent += '</div>';
// Add a page break after each record except the last one
if (index < records.length - 1) {
printContent += '<div class="pagebreak"></div>';
}
});
printContent += '</body></html>';
printWindow.document.write(printContent);
printWindow.document.close();
printWindow.print();
}
// Wait for the DOM and Kintone's elements to be fully loaded
kintone.events.on('app.record.index.show', function(event) {
addPrintButton();
});
})();
1 Like
Thank you for taking the time to help me answer this! It gave me a good jumping off point! I appreciate it!