Start a Process from External Page

Introduction

This guide provides a step-by-step example for beginners looking to integrate Joget with external applications. You will learn how to start a Joget process from an external page and set a workflow variable to define a participant in the process.

How does it work?

Integrating Joget with an external application involves the following key steps:

Preparing the Joget app

Create a simple process in Joget. Note the Process Definition ID and ensure that a Workflow Variable is mapped to one of the participants.

Preparing the external page

Host your external page by creating a context folder in your web server where your Joget resides. For Tomcat, go to /webapps and create a folder named poc, for example.

Inside this folder, create an index.html file with the following code:

External Page Code:

<html>
    <head>
        <script type="text/javascript" src="http://localhost:8080/jw/js/jquery/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="http://localhost:8080/jw/js/json/util.js" ></script>
        <script type="text/javascript" >
 
        $(document).ready(function(){
            var loginCallback = {
                success : function(response){
                    if(response.username != "roleAnonymous"){
                        alert("login successfully");
                    }else{
                        alert("login fail");
                    }
                }
            };
            //login
            AssignmentManager.login('http://localhost:8080/jw', 'admin', 'admin', loginCallback);
 
            $("input[name='startProcessButton']").click( function(){
                //retrieving the values
                var processDefinition = $("input[name='processDefinition']").val()
                var requester = $("input[name='requester']").val()
 
                //call back for "start a process"
                var callback = {
                  success : function(data){
                    //print returned result
                    $("#responseDiv").html(data);
                  }
                }
 
                //start a process
                ConnectionManager.post('http://localhost:8080/jw/web/json/workflow/process/start/' + processDefinition, callback, "var_requester=" + requester);
 
            });
 
        });
        </script>
 
    </head>
    <body>
        <fieldset id="startProcess">
            <legend>Start Process:</legend>
 
            <label for="name">Process Definition:</label>
            <input type="textfield" name="processDefinition" value="simpleApproval:latest:sample"/>
            <br>
            <label for="name">Requester Username:</label>
            <input type="textfield" name="requester"/>
 
            <input name="startProcessButton" type="submit" value="Trigger"/>
 
            <div id="responseDiv"/>
        </fieldset>
    </body>
</html>

Your final path should be something like \Joget-DX8-Enterprise\apache-tomcat-8.5.78\webapps\poc\index.html.

You will need to study the code above, where occasional remarks are placed to help you to understand.

Execution and testing

From your browser, find your way to the index.html page.

The process definition ID has already been filled up in the coding earlier. Remember replacing hash (#) with a colon (:) in the id. Key in a Username and hit Trigger.

Result will be printed on the page itself after hitting the button. You should be able to find the corresponding process instance in Joget's web console as well.

Drill down into the activity instance and you should be able to find the instance assigned to the rightful person.

Download sample app

Download the demo app for Start a Process from External Page:

APP_kb_dx8_simpleApproval.jwa

Created by Julieth Last modified by Yi Zheng on Jan 02, 2025

Tags:

Previous Purge Old Completed Process Instances NextStart Process From Grid Data