Hello! I’m writing a custom app to print information from my base on adhesive labels using a Zebra TLP2824 Plus printer, via Zebra Browser print.
I’ve written the script below to gather, format and print the required information, but my amateur at best programming knowledge is holding me back a little bit.
The functionality I’m going for is the following: once a button in an Airtable view is pressed, labels print for all records linked to a parent record. This works when the app is loaded from the button itself, but if the app loads without the useRecordActionData
already loaded, I can’t get it to load without it throwing the following error:
Rendered more hooks than during the previous render.
Which is obviously right, because I’m accessing more data than requested initially, but I can’t figure out how to work around this!
I’d really appreciate some help. Thanks!
import {initializeBlock, useBase, useRecords, useRecordById, useRecordActionData} from '@airtable/blocks/ui';
import ZebraBrowserPrintWrapper from 'zebra-browser-print-wrapper';
import React from 'react';
const printBarcode = async (serial) => {
try {
// Create a new instance of the object
const browserPrint = new ZebraBrowserPrintWrapper();
// Select default printer
const defaultPrinter = await browserPrint.getDefaultPrinter();
// Set the printer
browserPrint.setPrinter(defaultPrinter);
// Check printer status
const printerStatus = await browserPrint.checkPrinterStatus();
// Check if the printer is ready
if(printerStatus.isReadyToPrint) {
browserPrint.print(serial);
} else {
console.log("Error/s", printerStatus.errors);
}
} catch (error) {
throw new Error(error);
}
};
function getRecordCellString(recordID, cell){
const base = useBase();
const table = base.getTableByName('Role');
const record = useRecordById(table, recordID);
return record.getCellValueAsString(cell);
}
function getRecordCell(recordID, cell){
const base = useBase();
const table = base.getTableByName('Role');
const record = useRecordById(table, recordID);
return record.getCellValue(cell);
}
function FormatZPL(serial){
const twincheck = getRecordCellString(serial,'Twincheck');
const serviciu = getRecordCellString(serial,'Serviciu').replace(/i^A-Z0-9]/ig, "").toUpperCase();
const addons = getRecordCellString(serial,'Addons').split(', ').join('\\&').toUpperCase();
const zpl = `
^XA
^FB119,1,,C,^A0R,50,50^FD${twincheck}\\&^FS
^FO40,0
^FB119,7,,C,^A0R,25,25^FD${serviciu}\\&${addons}\\&
^PQ2
^XZ
`;
return zpl;
}
function ZebraTwincheckPrinting() {
const actionData = useRecordActionData();
if (actionData === null) {
return <span>No events yet</span>;
}
var serial = actionData.recordId;
var zplToPrint = '';
var LinkedRecordArray = getRecordCell(serial, 'OtherRollsInOrder');
LinkedRecordArray.forEach(function (element){
let recordToPrint = elementr"value"]e"id"];
zplToPrint += FormatZPL(recordToPrint);
});
printBarcode(zplToPrint);
return `Printed ${zplToPrint}`;
}
initializeBlock(() => <ZebraTwincheckPrinting />);
Edit: One more thing - the data in the app automatically updates when a record is edited. This is not intended functionality - I’d like for the data to get pulled from the airtable records only when the button is pressed and remain static until the button is pressed again.