Adding QR Codes

Adding QR To add a dynamic QR code into your page we can utilize the Google API to generate a code as an image and add it to your page. 

QR Codes must be formatted with the following minimum options: 

  • https://chart.googleapis.com/chart?
  • cht=qr (This is telling the API to use the QR code chart type)
  • &chs=150x150 (This will determine the chart size)
  • &chl=value (Here is where you set the value for the QR code)

For example, the following QR code will have the value of "Hello-world" with dimension of 150X150 pixels

https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=Hello-World

chart.png

When using a QR code from within the app, you can use field values inside the QR code as well. Add an image inside the HTML component and replace the end of the QR code URL with the field name to be used as the value. 

To learn more about HTML and app variables, please click here. 

https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl={Email}

Using QR codes can be even more useful when working with PDF's or Emails and creating a link to route users to a specific record details. 

For example, if we have an order details page, only the last section of the URL, the ID of page changes based on which order is being viewed. We therefore can copy the full URL of the order and dynamically update the ID of the order in order to route the user to the correct page via a QR code. 

Let's say our details page URL looks like this: 
https://demo.tadabase.io/qrcodes#!/candidates/candidate-details/DVWQWRNZ49

You can notice the last section is a unique ID. Since each record has it's own ID we can include this ID in the URL based on the record. 

We would do this by adding a QR code and replacing the ID field with {!!id!!}

https://demo.tadabase.io/qrcodes#!/candidates/candidate-details/{!!id!!}

However, in most cases since the URL contains a "#" (hash/pound) symbol, it can likely not work. So instead of using the URL with the hash we can concert the # to encoded value which would be %23

https://demo.tadabase.io/qrcodes%23!/candidates/candidate-details/{!!id!!}

http://zxing.appspot.com/generator/