How to customise qr code settings to include username

Development
1

I have a requirement where i need to embed the properties metadata_username and username with the value of displayName of the app-user in the qr code pop up that appears under app user tab in odk-central.

image

As i searched the code base, these settings seem to defined in qr-panel.vue:

image
image1236×820 78.6 KB

I am not proficient in Vue/Node.js, so I am seeking help to understand if it's possible to customize this code with a few additional statements to include these properties.

Can someone guide me on how to achieve this? Appreciate any help.

Thank you,
ravish

2

Instead of changing the QR code in Central, why not generate your own with QR Code as described at https://docs.getodk.org/collect-import-export/#making-your-own-qr-code ?.

3

Do you want to embed the data within the QR code data, or do you want to show the username written out in/on/near the QR code? Out of curiosity, what is this used for?

I ask because we are thinking of adding more information below or within the QR code image that shows the display name and/or project name. This would be written out for a human looking at the QR code to see. But I don't think this is what you are asking for.

If you want the data encoded with that settings object, you're on the right track with the piece of code you've shared. You could add a few lines to the setting object just below in the qr-panel.vue component and that should be passed through and encoded in the QR code.

      const settings = {
        general: { server_url: `${window.location.origin}${url}` },
        project: { name: this.project.name },
        // Collect requires the settings to have an `admin` property.
        admin: {},
        metadata_username: this.fieldKey.displayName,
        username: this.fieldKey.displayName,
      };
4

Hi yanokwa,

Thanks for the reply. yes, currently we do create qr code with python script. In that we define username property in the qr settings. This qr is then shared manually over email. So, instead of do this manually, we are hoping to automate it in the central itself.

2 Likes
5

Hi @ktuite,

Thanks for the reply.
I do want to embed the QR core data with username. Our usecase is that, in one of the forms we are using value captured against username metadata property and we want this value to match with app user display name. Depending on the username, certain questions change in the form.

I will try out the code snippet that you have shared, thank you so much.

1 Like
6

I think this is a great idea!