Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
...
You can follow the steps below, or refer to Manage Plugins to read more about managing plugins:
...
In the Form Builder, open up any Form that you wish to implement this feature for.
Search the Form Element Palette for the Invisible reCAPTCHA element under the Marketplace section.
...
Click on the element in your form Form and the Edit Invisible reCAPTCHA panel appears (on the right hand side).
...
Your ID can be any meaningful name you want (e.g.: invisible_recaptcha).
Generating important keys for the plugin will explain how to generate the required reCAPTCHA site key and reCAPTCHA secret key for this plugin.
...
Give your Label a meaningful name (e.g.: recaptcha_test)
For the reCAPTCHA Type, select reCAPTCHA v2 > Invisible reCAPTCHA badge
Under Domains, put the domain name that your Joget DX instance is hosted on.
Info | ||
---|---|---|
| ||
If you are using Joget DX on a local computer for development purposes, you can put "localhost" as your domain name. |
Copy the generated reCAPTCHA site keys and reCAPTCHA secret keys, and paste them into their respective fields in the Edit Invisible reCAPTCHA configuration.
Remember to click Apply Change and save the form.
...
If the bottom right corner of your form shows the protected by reCAPTCHA, it means that the Invisible reCAPTCHA plugin is working as intended.
You can seek help from Errors of the plugin Plugin Error Troubleshooting if the Invisible reCAPTCHA plugin is not working as intended.
...
There are two types of error that may occur when using the Invisible reCAPTCHA plugin:
...
reCAPTCHA widget error occurs when the widget on the frontend is unable to function properly.
For example, you may have chosen the v2 tickbox option instead of the v2 invisible option.
...
Because of this error, the "Form Submitted" message is not shown on the top left corner of the Formform will not be submitted.
...
This error occurs when the reCAPTCHA plugin is unable to perform backend validation to verify the user that has submitted the formWe will explain how Plugin validation error can occur by demonstrating how an error as such can be replicated.
To For example, to simply replicate a Plugin validation error is very simpleerror, you only have to provide an invalid reCAPTCHA secret key.
...
For now, let's see what will happen if we do not add a Custom error text and we disable the Debug mode.
...
title | Edit Invisible reCAPTCHA: Other configurations |
---|
...
the
...
Debugmode
...
.
Following the configurations demonstrated, the Plugin validation error has been replicated:
In this case, Debug mode is disabled, so you will see the default error text.
But note that if Debug mode is enabled, you will see neither default error text or Custom error text (even if you have added it).
Read more on Custom error text and Debug mode in Custom error text & Debug mode.
...
To demonstrate what the Custom error text and Debug mode are used for, once again the reCAPTCHA secret key is made invalid to replicate the Plugin validation error.
In this example, the Custom error text is set as "Invalid reCAPTCHA secret key: Please ensure you secret key is valid!".
The Debug mode needs to be disabled for now in order to show the Custom error text on the top left corner of the Form.
Remember to click Apply Change and save the form.
Now you are able to see how Custom error text works.
Instead of printing out the default error text, the Custom error text is printed out.
You see "Invalid reCAPTCHA secret key: Please ensure you secret key is valid!" instead of "reCAPTCHA error".
Now that we have seen how Custom error text works, the next section explains Debug mode.
Info | ||
---|---|---|
| ||
Some app designers may want to come out with their own error text instead of using the default error text "reCAPTCHA error". Feel free to provide a meaningful error text message. With Custom error text, app designers can decide what messagethey want to display to end users. |
With the same invalid reCAPTCHA secret key and Custom error text, but this time Debug mode is enabled.
Remember to click Apply Change and save the form.
Notice that enabling Debug mode results in the Custom error text not being printed out, even though the Custom error text is being added.
Instead, the top left corner of the Form shows two error messages:
The Invisible reCAPTCHA plugin will only work in some situations.
See table below:
Normal Form | Only a singleplugin can exist and work as intended. Multiple plugins can be loaded into a single Normal Form, but only the first plugin will be functioning. |
Sub-Form | A plugin cannot work as intended in a Sub-Form, but it can work in the Base Form. |
CRUD Datalist "New" | Has identical performance and outcomes with the Normal Form and Sub-Form:
|
CRUD Datalist "Edit" |
...
image to be inserted here later..
Custom error text is designed to be shown to end-users when there is a plugin validation error.
Without using the Custom error text configuration property, the top left corner of your Form will only show "Validation Error" and a default error text of "reCAPTCHA error" when plugin validation error occurs
Enabling Debug mode allows error messages to be printed out for end-users to see.
image to be inserted here later..