Versions Compared

Old Version 3

changes.mady.by.user Mohamed Elorbany

Saved on

compared with

New Version Current

changes.mady.by.user PT

Saved on

Key

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

Table of Contents

Problem Statement

English

In this article, we will walkthrough the thought process of designing a solution for the following business use case:-

  1. The visitor would request a demo by submitting a form in the Joget app.
  2. Upon submission of the form, fields will be validated to make sure that all mandatory fields are filled up.

  3. Upon successful validation of data, the form data will be shared with an external system (i.e. CRM software) for further processing through the use of plugins (i.e. JSON API

...

  1. Tool) or Bean Shell code. More on this later on.

  2. The main objective is to ensure the successful delivery of data with the external system.

This is an example of what the form would look like.


Figure 1

The only external factor that may be outside of the Joget platform's control would be the external integration with the CRM software. We will walkthrough a few scenarios on how best to design for this business use case with  UI/UX kept in mind.

...

  1. Form Validation - Joget would iterate through each and every form element and invoking the validator (if configured).

    Figure 5

    If all validations pass, then it will move to the next step, else, end user will be redirected back to the same form with validation errors displayed like what is shown in the screenshot below.

    Figure 6

  2. Form Store - Since validations have passed, Joget will now proceed to the next step, form data will be passed to the store binder.


    Figure 7

    By default, the load/store binder is Workflow Form BinderDefault where it will load and store form data into the table name declared in the form properties. In this case, the table name is "demo_request".
  3. Since we are using Workflow Form BinderDefault, this would also mean that we are saving the form data locally in Joget's database.

...

The easiest, no-code approach is to make use of JSON API for Mapping Tools to PluginsTool plugin itself. The JSON Tool itself is a Process Tool & Post Form Submission Processing Plugin. This means that we can invoke it from within a process flow or from the submission of the form.

...

  1. We can also write Bean Shell code. Here's a quick sample code to make HTTP get call.

    Code Block
    languagejava
    titleBean Shell code to make restful API calls sample
    linenumberstrue
    import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpRequestBase;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import java.io.IOException;
import org.joget.commons.util.LogUtil;

try{
	String jsonUrl = "http://localhost:8080/jw/web/json/workflow/assignment/list/count?packageId=crm"; //sample url
	String name = "header1";
	String value = "value1";

	CloseableHttpClient client = null;
	CloseableHttpClient client = HttpClients.createDefault();

	HttpRequestBase request = null;
	request = new HttpGet(jsonUrl);
	request.setHeader(name, value);

	HttpResponse response = client.execute(request);

} catch (Exception ex) {
    LogUtil.error(getClass().getName(), ex, "");
} finally {
    try {
        if (request != null) {
            request.releaseConnection();
        }
        if (client != null) {
            client.close();
        }
    } catch (IOException ex) {
        LogUtil.error(getClass().getName(), ex, "");
    }
}

    We can execute this piece of code from various plugin types giving us the flexibility on where/when we want to invoke it. The only disadvantage compared to the former is that we need to maintain the custom coding ourselves instead of configuring through a plugin. These are the plugin types relevant to our solution to call the code from:-

    1. Bean Shell for Process Tool
    2. BeanShell Validator
    3. Bean Shell Form BinderData Store 


Method 3 - JSON Tool from Bean Shell Code

...

By using Post Form Submission Processing in Form, and "Method 1 JSON Call" earlier, this is the easiest and quickest method. This allows us to invoke any Process Tool & Post Form Submission Processing Plugin. JSON API for Mapping Tools to PluginsTool is one such candidate.

Figure 9

...

Taking cues from method 2 earlier, we will put the new plugin in Multi Tools and set the Run Mode to "Run tools sequentially in a new single thread". This is so that customer does not need to wait for JSON call to complete.

Image Modified

Figure 13

The following is a new section to configure to capture the JSON call's response status.

...