How do you add a QR Code displayer library?

Support
1

How do you add a QR Code library for a page to display a QR Code? I was wondering can we use this? GitHub - fengyuanchen/vue-qrcode: QR code component for Vue.js. Though I’m not sure if it is a good library or not. Having a library that could do display and read would be best.

2

Libraries can be added by including the CDN links in your DOM Header Insertions. BetterForms runs on the Vue 2 framework, and in the case of the library you shared, the creator does have a branch that is compatible with this version.

The CDN links you will need for this library are:

<script src="https://unpkg.com/qrcode@1.5.0/build/qrcode.js"></script>
<script src="https://unpkg.com/@chenfengyuan/vue-qrcode@1"></script>

You will also need to execute this line in a function either in your onAppLoad (Global Named Actions) or onFormLoad:
Vue.component(VueQrcode.name, VueQrcode);

This would look similar to:

"onAppLoad": [{
        "action": "function",
        "function": "Vue.component(VueQrcode.name, VueQrcode);"
    }]

Finally, you can follow the docs of the library to create your QR codes. As a note, you can dynamically change the value by adding a : symbol in front of the value attribute. For example:

<qrcode :value="model.link" :options="{ width: 200 }"></qrcode>

Hope this helps!

EDIT: To resolve QR Code not rendering on refresh, see this reply.

3

Thanks Andrew.
Q1. Is this how I should insert the onFormLoad in the form?

{
    "authLevel": 0,
    "description": "This page is to test the QR Code display",
    "formName": "QR Code Test",
    "formType": "formblank",
    "hookSetName": "qrcodeTest",
    "namedActions": {
        "onFormLoad": [{
                "action": "function",
                "function": "Vue.component(VueQrcode.name, VueQrcode);"
        }]
    },
    "requestHook": true,
    "sendFullSchema": false,
    "styleClassesBody": "max-w-3xl p-4  mx-auto",
    "styleClassesPage": "h-screen !p-4 bg-white overflow-auto",
    "validateOnBack": false
}

Q2. Where do I put

<qrcode :value="model.link" :options="{ width: 200 }"></qrcode>

I tried placing it in a html block and function snippet but couldn’t get it to work.

5

The tag:

<qrcode :value="model.link" :options="{ width: 200 }"></qrcode>

goes in an HTML block. If that still doesn’t work, make sure model.link exists and is a valid value for the QR Code to create.

6

So I investigated why the QR Code wasn’t initially showing on a refresh, and it seems like maybe the library isn’t loaded immediately before it attempts to draw the QR Code. I found a workaround by setting a conditional visibility on the QR Code by doing:

<qrcode value="Hello World!" :options="{ width: 200 }" v-if="model.showQR"></qrcode>

And then onAppLoad/onFormLoad, you can set it to true which will render the code:

Vue.component(VueQrcode.name, VueQrcode);
model.showQR = true

This method works for now, and if anybody knows a simpler solution to this issue they can share here.

7

“Hello World!” works but when I try from the model (see below) the QR Code = ‘model.link’. I have tried it with {{}} & also without ‘model.’ with not the required result.

<h3 class="">model.link = {{model.link}}</h3>
<qrcode value="model.link" :options="{ width: 200 }" v-if="model.showQR">
</qrcode>
8

You’ll need to include the : symbol in front of value to bind it to the model:

<qrcode :value="model.link" :options="{ width: 200 }" v-if="model.showQR">
</qrcode>
9

Thanks so much Andrew it is working. Could you make an example/demo page in FMBF for this and possibly link it back to this discussion. I think this is a great resource.

10

Awesome, glad to hear it is working.

Because of the “hacky” workaround I settled on to make it work, I’m hesitant to include that as an example. If a more elegant solution is found, then I’ll reconsider. In any case, this forum post will be here for any future travelers with similar needs.