Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

QR Code Generator Tool generates QR Code to be attached to email through process / post form processing.

...

Plugin Information

Plugins Available in the Bundle:

  1. QR Code Generator Tool

This plugin bundle is compatible with Joget DX 8.

Expected Outcome

To successfully generate QR Code to be attached to email.

Image Added

Figure 1: Email containing automatically generated QR Code

Get Started

Prerequisites

1. Setup SMTP values in Joget App for the email tool to be working properly.

Image Added

Figure 2: SMTP Settings

Refer to Sign in with app passwords to generate the password for SMTP Gmail.

For more details, please refer to General Settings > SMTP Settings.  

Steps

Where to get the plugin

  1. Please visit https://github.com/jogetoss/qr-code-generator-tool for the plugin's source code.
  2. You can find the latest release at https://github.com/jogetoss/qr-code-generator-tool/releases .
  3. Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.

How to install the plugin

Import or Create

You can choose to import the demo app or create the app from scratch.

For demo app, go to Joget Home or All Apps and click on Import App to import the downloaded demo app (refer to another KB - Import Joget App for more details).

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

...

Image Removed

field to be Readonly. Drag a text field and this will be the value for the generated QR code.

Image Added

Figure 3Figure 1: Form Builder


Configure Post Form Submission Processing

To 1. To start using the QR Code Generator Tool, in the Form Builder > Settings > Advanced, under the Post Form Submission Processing:

Set

...

its Post Processing Tool to

...

Multi Tools. Set Run Tool on

...

Both data creation and update.

Image RemovedImage Added

Figure 4: Post Form Processing - Multi Tools


2. Set the tools for QR Code Generator Tool and Email.

Image Added

Figure 5: Post Form Submission Processing Properties

...

Processing - QR Code Generator Tool and Email Tool


3. Fill in the plugin configurations based on QR Code Generator Tool Properties. The value of the generated QR code will be the text field created earlier.

Image Added

Figure 6: Post Form Processing - QR Code Generator Tool


4. Fill in the plugin configurations based on Email Tool. In the message for Email Tool, fill in the image source as the field for the generated QR Code.

Image Added

Figure 7: Email Content for QR Code field

ToolMessage 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.

Image Added

Figure 8: Email Attachment for QR Code field

How to use the plugin

1. Fill in the form. The process tool will generate the QR Code automatically to store in the File Upload field.

Image Added

Figure 9: Joget App with QR Code Generator Tool Configured


2. An Email containing the QR code will be sent.

Image Added

Figure 9 Email Receiving the QR Code


3. Click on edit.

Image Added

Figure 10: 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.

Image Added

Figure 11: 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.

Image Modified

Figure 312: QR Code Generator Tool Properties

NameDescription
FormForm for the QR Code Generator Tool.
FieldField ID for the QR Code to be uploaded on.


2. In the QR Code Properties, select the Format and fill in the value.

Image Modified

Figure 413: QR Code Properties

NameDescription
Format

Options for Format.

  • URL
  • Text

URL

Info

Only shown when URL is selected for Format.

Value
Info

Only shown when Text is selected for Format.

HeightHeight of QR code.
WidthWidth
of QR code.

Configure Tool

...

of

...

More on how to configure email on Email Tool.

Image Removed

Figure 5: Process Builder

Example

1. Fill in the form

Image Removed

Figure 6: Joget App with The QR Code Generator Tool Configured

...

QR code

...

.

Image Removed

Figure 7: Email Receiving The QR Code


Download Demo App

...

...

...