Printing ID Cards

Ideas
6

:printer: We have now picked this up and are planning to add a form field that makes it possible to render and print HTML to any connected printer. Form designers will build HTML strings using the concat function and references to other form fields. They will be able to use any HTML functionality including styling, images, tables, etc. @grzegorz has built a nice prototype already!

QR codes

We are planning to add a custom qrcode element. Any text between the opening and closing qrcode tags would be encoded as a QR code and embedded into the HTML.

We want to make it possible to specify the pixel size of the QR code. Although QR codes must always be square, we are currently thinking we'll have users specify values for standard width and height image attributes so we can pass them through to the img that we generate.

For example, to include values for the first_name and last_name fields separated by a space and display it as a 150x150 square, the following expression would go in calculate:

concat("<qrcode width='150' height='150'>", 
${first_name}, " ", ${last_name}, 
"</qrcode>")

Form designers would be able to specify full HTML including html, body, etc or just a snippet like the one above.

More complex example

Here's an example that includes a QR code with form data, an image, and a summary table:

concat(""
<qrcode width='150' height='150'>First name: "", ${first_name}, ""Last name: "", ${last_name}, ""Age: "", ${age}, ""Email: "", ${email}, ""Phone number: "", ${phone_number}, ""</qrcode></br>
<img width='150' height='150' src=’”, ${photo}, “’>
<table>
<tr>
<td>First name</td>
<td>"", ${first_name}, ""</td>
</tr>
<tr>
<td>Last name</td>
<td>"", ${last_name}, ""</td>
</tr>
<tr>
<td>Age</td>
<td>"", ${age}, ""</td>
</tr>
<tr>
<td>Email</td>
<td>"", ${email}, ""</td>
</tr>
<tr>
<td>Phone number</td>
<td>"", ${phone_number}, ""</td>
</tr>
</table>""
)

User experience

After tapping the Print button, users would see a preview using the standard Android print dialog:

Screenshot_20231129_170231
Screenshot_20231129_1702311080×2408 179 KB

They would have the option to print to any connected printer or save as PDF.

Future enhancements

It's not very fun to write HTML using the concat function. :see_no_evil: One thing we'd like to eventually do is to make it easier to express template strings in which form data should be filled in. This will not only benefit this new feature but also make it easier to write things like instance_name expressions.

Questions

  • Does the qrcode custom element seem like a reasonable way of specifying a qr code?
  • Does specifying the width and height of qr codes seem overly confusing if they're always intended to be the same? Is it worth doing something more custom here?
  • We initially thought of also making it possible to generate traditional barcodes but it seems like qr codes are almost always preferable. Is there a good reason to consider barcodes as well?
  • Do you or someone you know have a special-format printer that can be added as an Android printer (e.g. a label printer) that they would be willing to test with?
5 Likes