Forum Discussion

RossonLong1's avatar
RossonLong1
Qrew Cadet
2 years ago

Code Pages: Creating Printable ID Badges.

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
------------------------------
  • TylerJablonski1's avatar
    TylerJablonski1
    Qrew Trainee
    2 years ago
    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
    ------------------------------
    • RossonLong1's avatar
      RossonLong1
      Qrew Cadet
      2 years ago

      I don't know why I hadn't thought of building the HTML into a formula field in the first place! This is a brilliant idea!

      The only math I would need to do for that is formulas looking to see if the Employee ID# is divisible by 8 or has a trailing decimal of .875 (7/8) for page breaks and divisible by 2 for rows.


      Eventually they will want to remove employees that are no longer part of their company, so the challenging part will be actually just be "numbering" the employee records with a second numeric variable that populates the pages without employees who have been let go.


      Thanks for sending over all this stuff! Super helpful!

      I'll try it all out and come back here and post the results later.



      ------------------------------
      Rosson Long
      ------------------------------
  • BrianSeymour's avatar
    BrianSeymour
    Qrew Assistant Captain
    2 years ago
    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
    ------------------------------