Skip to main content
Question

Code Pages: Creating Printable ID Badges.

  • January 27, 2023
  • 0 replies
  • 82 views
Forum|alt.badge.img+2

Hello! I am working on a code page that will allow our users to quickly design and print all of their employee ID badges.

The formatting is done, I am now in the process of learning how to:

1. Repeat the HTML structure over and over until every employee ID badge is listed.

2. Connect the data in the HTML structure to the employee's table to draw upon the QB data to generate the content on the badges.

Here is a link to the code page I have been working on with dummy data/content to help visualize what I am working on:

http://old2.lztek.io/tests/codepage.html


Linked in the attachment is the codepage itself with comments on what divs and tables need to be repeated.

Here is an example of a single badge ID:

<table style="width:100%;">
<tr>
<td class="left">
<img class="logo" src="company-logo.png" alt="Company Logo">
<br>
<div class="name">John Doe</div>
<div class="job">IT Director of Constant caring and health.</div>
<div class="empid">ID#:120</div>
<br>
<img class="qr" src="qr-code.jpg" alt="QR Code">
</td>
<td class="right">
<div class="company-name">LZTEK, LLC</div>
<br>
<img class="portrait" src="portrait.jpg" alt="John Doe Portrait">
</td>
</tr>
</table>
Any help is appreciated! Thank you!


------------------------------
Rosson Long
------------------------------
    This topic has been closed for replies.

    Cool idea.  You can use the API to query for the employee data, and then use a for loop to iterate over the response and generate the HTML for the table.  Here's the API documentation.  Additionally, here's some documentation on creating/setting elements with Javascript: Document.createElement() - Web APIs | MDN (mozilla.org), Element.innerHTML - Web APIs | MDN (mozilla.org)

    You could generate the HTML for the table entirely in your Javascript code.  Alternatively, you could generate the table for each individual employee in Quickbase using a formula field, then use the API to query for that formula field and just append them together and put them in your container table.

    ------------------------------
    Tyler Jablonski
    ------------------------------
    Forum|alt.badge.img+4
    • BrianSeymour
    • Quickbase Alumni
    • January 27, 2023
    Depending on the use case, you may want to consider making a Rich Text Formula field (which allows HTML) to house the Badge in the Employee's table itself. Then, just have a report that lists all Employees with the Badge field.

    I'd look out for potential security risks too. Consider leveraging QB Permissions to only grant Badge view access where the logged in User matches their respective Employee record.

    Or, instead of a report, you could create a separate minimal Employee Badge Form that only includes the Badge field, then an Employees::View Badge Formula URL button displayed on the main Employee Form could point to the new Employee Badge form (using the &dfid=[The ID of your Form]). Likely that'll be ID 10.

    For example,
    // Employees::View Badge (Formula URL)

URLRoot() & "db/" & Dbid() & "?a=dr&rid=" & URLEncode ([Record ID#]) & "&dfid=10"​

    Alternatively, there are some some nice third-party plugins to generate .pdf files, although, that may not be necessary here! For example, Juiced Technologies - Exact Forms Plus.

    ------------------------------
    Brian
    ------------------------------
    Terms & ConditionsAccessibility statement