Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 🎯  Solution Guides

  • Low Code Solutions

    Add "Tabs" to your app

    ID Target Link

    Use an address field to display a static street view thumbnail

    Turn your menu into a fixed menu

    Auto close mobile menu

    Display record information in a card

    How to add a back button to your app

    Add a collapsible accordion element to your app

    Code Snippets

    PHP Curl Create New Record

    PHP Get Records With Filters

    Google Scripts - Get record and create new records from connected table

    Save Tables and Fields into Spreadsheet

    Google Scripts - Export all records

    Webhook to save deleted records

    Send Messages to Slack

    Restrict Space and Force Uppercase in a Form

    Building Advanced Features

    Use Validation Rules to Ensure Unique Votes Per User

    Use Record Rules to Create an Audit Log

    Track current inventory with transactions

    Schedule Bookings and Prevent Double Bookings

    Create orders with multiple items and varying quantities

    2 Step Forms

    Unique Record Validation

    Restrict Editing Records to Record Owners

    Sum date/time field

    Duplicate Records

    Advanced App Customization

    How to embed a Tadabase page on another website

    Adding external fonts

    Custom Favicon

    Making apps mobile friendly

    Show date/time as a countdown

    Importing many images at once

    Adding QR Codes

    Adding charts to PDFs

    Customizing your app shortcut for mobile phones

    Animate parts of a page

    Design Customization

    Changing background colors

    Set background colors to the edge of a page

    Change the background of a column

    Add padding around a component

    Using an image as background for a page

    Adding a background image to a row, column, or component

  • Duplicate Connected Records

Categories
🎯 Solution Guides
Advanced App Customiza...
Adding QR Codes

Adding QR Codes

To add a dynamic QR code into your page, you 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. 

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

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

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

For instance, if you have an order details page, only the last section of the URL, which is the ID of a page, changes based on which order is being viewed. Therefore, you 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. 

Say your details page URL looks like this: 
https://demo.tadabase.io/qrcodes#!/candidates/candidate-details/DVWQWRNZ49

As illustrated in red, the last section of the URL is a unique ID. Since each record has its own ID, you can include this ID in the URL based on the record. 

You 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, this will likely not work in most cases since the URL contains a "#" (hash/pound) symbol. Therefore, instead of using the URL with the hash we can convert the # to an encoded value which would be %23

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

Tip: Use the link below to learn how you can structure different QR codes:

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

How did we do ?

Previous Article
Importing many images at once
Next Article
Adding charts to PDFs
Back to top
API
100% Operational
Apps
100% Operational
Builder
100% Operational
Overall Status
100% Operational