# Printing ID Cards

**URL:** <https://forum.getodk.org/t/printing-id-cards/6904>\
**Category:** Ideas\
**Tags:** odk-collect\
**Created:** [June 16, 2017, 12:46pm UTC](https://forum.getodk.org/t/printing-id-cards/6904 "2017-06-16T12:46:24Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![LN](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/ln/32/1605_2.png) [@LN](https://forum.getodk.org/u/LN)\
**Post date:** [November 30, 2023, 1:14am UTC](https://forum.getodk.org/t/printing-id-cards/6904/6 "2023-11-30T01:14:37Z")

</div>

🖨 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`:

```java
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:

```html
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](https://getodk.b-cdn.net/uploads/default/original/3X/5/d/5d472d16e0379906f1adbee3517f2db653ea5634.png)

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. 🙈 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?

---

_[View the full topic](https://forum.getodk.org/t/printing-id-cards/6904)._