...
To create the app from scratch, please continue following the steps below.
Create a Form
1. Create a new form and drag and drop the File Upload element.
...
Set the
...
field to be Readonly. Drag a text field and this will be the value for the generated QR
...
code.
Figure 3: Form Builder
...
Figure 4: Post Form Processing - Multi Tools
2. Set the tools for QR Code Generator Tool and Email.
Figure 5: Post Form Processing - QR Code Generator Tool and Email Tool
3. Fill in the plugin configurations based on on QR Code Generator Tool Properties and Email Tool.
. The value of the generated QR code will be the text field created earlier.
Figure 6Figure 5: Post Form Processing - QR Code Generator Tool and
4. Fill in the plugin configurations based on Email Tool3. In the message for Email Tool, fill in the image source as the field for the generated QR Code.
Figure 67: Email Content for QR Code field
| Tool | Message Value |
|---|---|
| Email Tool | <img src="cid:#form.qcgda_qrcode.qr_field_to_be_uploaded?url#" /> |
5. Remember to fill in the attachment section for the Email Tool, to embed the picture into the email.
Figure 8: Email Attachment for QR Code field
How to use the plugin
1. Fill in the form. The QR Code File Upload field can be left blank as the process tool will generate the QR Code automatically to store in the File Upload field.
Figure 79: Joget App with QR Code Generator Tool Configured
...
2. An Email containing the QR code will be sent.
Figure 8: 9 Email Receiving the QR Code
3. Click on edit.
Figure 910: QR Code Form List
4. You can see that the QR Code that has been generated is stored in this field. You can also manually download the QR Code to check.
Figure 1011: Download QR Code
QR Code Generator Tool Properties
1. Configure QR Code Generator Tool to the previous form and fill in the Field with the File Upload element's Field ID.
Figure 1012: QR Code Generator Tool Properties
| Name | Description |
|---|---|
| Form | Form for the QR Code Generator Tool. |
| Field | Field ID for the QR Code to be uploaded on. |
2. In the QR Code Properties, select the Format and fill in the value.
Figure 1113: QR Code Properties
| Name | Description | ||
|---|---|---|---|
| Format | Options for Format.
| ||
URL |
| ||
| Value |
| ||
| Height | Height of QR code. | ||
| Width | Width of QR code. |
...