Questions and discussion about using ProcessMaker: user interface, running cases & functionality

Moderator: amosbatto

#825412
Hi Amo,

Just wondering if there is any good solution regarding this?

I have a web-entry form which has 4 forms(4 steps), and the link is like this:
Code: Select all
https://localhost/eforms/systest/en/neoclassic/XXXXXXXXXXXXXXXX/XXXXXXXXXXXXXXXX.php?a=state&b=suburb
(I add two extra parameters at the end)

Users can user this link to search for parks according to the state and suburb they provided in the first dyanform.

However there are some popular parks and, I want users to be redirect to the second dyanform directly by passing the parameters. Then when users open this link, they don't have to search anymore.
((I need to use these two parameters to run some query from the database.))

Is there any way that I can pass parameter a and b into the trigger before the dyanform? :?: :idea:

Thanks and regards,
Yuan
#825440
amosbatto wrote: Mon Jul 15, 2019 11:20 pm I don't know if this is possible. I'll try to look at it tomorrow and see if I can figure out a way to do this.
Hi Amo,

Thanks for looking into this.

Just to give you more information, it seems when I use multiple steps for web-entry form, the URL has been covered by a iframe, so the link we used to pass the parameters looks like outside from the actual form.

Thanks,
Yuan
#825530
After the first Web Entry form is submitted, a new case is created in the database with the first form's data, so it looks like it should be possible to retrieve the data with JavaScript and REST in the second Web Entry form. I haven't had time to work on it.
#825548
I figured out how to make it work. You need to install my extraRest plugin.
Then you can use JavaScript like this to get the data filled out in the first Web Entry form:
Code: Select all
var host = PMDynaform.getHostName();                // get the hostname
var ws = PMDynaform.getWorkspaceName();             // get the current workspace
var token = PMDynaform.getAccessToken();            // get the access Token
var app_uid = frames.app_uid ? frames.app_uid : ''; // get the case ID
var del_index = 1;

//$("#callRestButton").find("button").click(function(){
  if (app_uid) {
    $.ajax({
        url: host+"/api/1.0/"+ws+"/extrarest/case/"+app_uid, // REST endpoint
        data: {},                        
        type: "GET",
        contentType: "application/json",
        beforeSend: function(xhr) {
          xhr.setRequestHeader('Authorization', 'Bearer '+token); // Header with access token
        },
        success: function(xhr) {
          var msg = "First Name: " + xhr['APP_DATA']['firstName'] +"\n"+
              "Last Name: " + xhr['APP_DATA']['lastName'] +"\n"+
              "Request Service: " + xhr['APP_DATA']['requestService_label'];
          alert(msg);
        },
        error: function(xhr, status, error) {
          if (xhr.responseText) {
            oResponse = JSON.parse(xhr.responseText);
            alert(oResponse.error.message)
          } else {
            alert("Error: " + error);
          }
        }
    });    
  }
//});
Where "firstName", "lastName" and "requestService" are the variables associated with fields in the first Web Entry form.

Here is a sample process you can test:
(39.17 KiB) Downloaded 14 times
#825552
amosbatto wrote: Tue Jul 23, 2019 11:45 pm I figured out how to make it work. You need to install my extraRest plugin.
Then you can use JavaScript like this to get the data filled out in the first Web Entry form:
Code: Select all
var host = PMDynaform.getHostName();                // get the hostname
var ws = PMDynaform.getWorkspaceName();             // get the current workspace
var token = PMDynaform.getAccessToken();            // get the access Token
var app_uid = frames.app_uid ? frames.app_uid : ''; // get the case ID
var del_index = 1;

//$("#callRestButton").find("button").click(function(){
  if (app_uid) {
    $.ajax({
        url: host+"/api/1.0/"+ws+"/extrarest/case/"+app_uid, // REST endpoint
        data: {},                        
        type: "GET",
        contentType: "application/json",
        beforeSend: function(xhr) {
          xhr.setRequestHeader('Authorization', 'Bearer '+token); // Header with access token
        },
        success: function(xhr) {
          var msg = "First Name: " + xhr['APP_DATA']['firstName'] +"\n"+
              "Last Name: " + xhr['APP_DATA']['lastName'] +"\n"+
              "Request Service: " + xhr['APP_DATA']['requestService_label'];
          alert(msg);
        },
        error: function(xhr, status, error) {
          if (xhr.responseText) {
            oResponse = JSON.parse(xhr.responseText);
            alert(oResponse.error.message)
          } else {
            alert("Error: " + error);
          }
        }
    });    
  }
//});
Where "firstName", "lastName" and "requestService" are the variables associated with fields in the first Web Entry form.

Here is a sample process you can test:
Multiple_page_web_entry-2.pmx
Hi Amo,

Thanks very much for your solution. After I download your process, and plugins everything works.

However, what I want to achieve is how I can pass the parameters in the URL to the first dyanform's fields?
Code: Select all
https://bpmtest/sysworkflow/en/neoclassic/5353195275d369177274a64081528053/4123096245d36928b31a9e3015805404.php?firstName=David&lastName=Smith
For example, in your process, how can I pass "David" and "Smith" into the dyanform fields(firstName and lastName)?

Then I can change the parameters every time, and the form fields will be populated accordingly?
Please see attached image.

Thanks,
Yuan
Attachments
2019-07-24_16-29-44.png
2019-07-24_16-29-44.png (59.89 KiB) Viewed 1935 times
#825577
Yuan,
Oh I misunderstood what you wanted.

I think this JavaScript code should do it for you:
Code: Select all
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");

  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable){
      return pair[1];
    }
  }
  return(false);
}

var fname = getQueryVariable("firstName");
if (fname) {
  $("firstName").setValue(fname);
}

var lname = getQueryVariable("lastName");
if (lname) {
  $("firstName").setValue(lname);
}
#825584
amosbatto wrote: Wed Jul 24, 2019 11:18 pm Yuan,
Oh I misunderstood what you wanted.

I think this JavaScript code should do it for you:
Code: Select all
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");

  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable){
      return pair[1];
    }
  }
  return(false);
}

var fname = getQueryVariable("firstName");
if (fname) {
  $("firstName").setValue(fname);
}

var lname = getQueryVariable("lastName");
if (lname) {
  $("firstName").setValue(lname);
}
Hi Amo,

Thanks for the code.

I corrected it a lot bit.
Code: Select all
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");

  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable){
      return pair[1];
    }
  }
  return(false);
}

var fname = getQueryVariable("fname");
if (fname) {
  $("#firstName").setValue(fname);
}

var lname = getQueryVariable("lname");
if (lname) {
  $("#lastName").setValue(lname);
} 
However still, this code only works for single dyanform, not multiple steps dyanform.

Any idea how to pass to a multiple steps form?

Regards,
Yuan
#825610
cosyxu wrote:However still, this code only works for single dyanform, not multiple steps dyanform.

Any idea how to pass to a multiple steps form?
If the variable that you want to pass to the second Web Entry form is not one of the existing fields in your first Web Entry form, then add a hidden field in the first Web Entry form which is associated with a variable. Then, set a value in that hidden field (for example during .setOnSubmit() ).

Then, use the code that I gave you to use my REST endpoint to get the case's variables in the second Dynaform.
#825618
amosbatto wrote: Thu Jul 25, 2019 10:22 pm
cosyxu wrote:However still, this code only works for single dyanform, not multiple steps dyanform.

Any idea how to pass to a multiple steps form?
If the variable that you want to pass to the second Web Entry form is not one of the existing fields in your first Web Entry form, then add a hidden field in the first Web Entry form which is associated with a variable. Then, set a value in that hidden field (for example during .setOnSubmit() ).

Then, use the code that I gave you to use my REST endpoint to get the case's variables in the second Dynaform.
Hi Amo,

Sorry but I think I made you confused about the requirement ... :shock:

Let's use the same example, two dyanforms in my web entry. And I want to pass the parameters from the link into the first form:

For example, I have the same link but with different values of parameters:

https://bpmtest/sysworkflow/en/neoclass ... Name=White

https://bpmtest/sysworkflow/en/neoclass ... Name=Smith

How can I use the js code you provided to populate the firstName and lastName on the first Dynanform's fields since it only works for single dyanform? :?:

Thanks,
Yuan
#825620
You can read the query string in the URL for the first Web Entry form, but you can't set variables in the query string of the URL if you want to pass variables to the second Web Entry form, because ProcessMaker will change the URL when you submit the first Web Entry form.

Instead, you need to set the variables in hidden fields in the first Web Entry form and then read the case variables with the REST endpoint in the second Web Entry form in order to get the variables from the first Web Entry form.

Do you understand?
#825621
amosbatto wrote: Fri Jul 26, 2019 12:25 am You can read the query string in the URL for the first Web Entry form, but you can't set variables in the query string of the URL if you want to pass variables to the second Web Entry form, because ProcessMaker will change the URL when you submit the first Web Entry form.

Instead, you need to set the variables in hidden fields in the first Web Entry form and then read the case variables with the REST endpoint in the second Web Entry form in order to get the variables from the first Web Entry form.

Do you understand?
Hi Amo,

I don't want to pass the variables to the second web entry form, and I can't read the query string in the URL for the first web entry form... I just want to populate some strings on my first web entry form depends on the string I put onto the URL like this:
2019-07-26_17-02-38.png
2019-07-26_17-02-38.png (2.33 KiB) Viewed 1881 times
2019-07-26_17-02-26.png
2019-07-26_17-02-26.png (3.98 KiB) Viewed 1881 times
But the code only works for singe dyanform web entry, not multiple steps...


Thanks,
Yuan
#825626
cosyxu wrote: But the code only works for singe dyanform web entry, not multiple steps...
Exactly. In the first Web Entry form, you can read the query string in the URL to get the variables. In the second Web Entry form, you can't read the query string, because ProcessMaker will overwrite the query string when the user clicks on the submit button in the first Web Entry form.

The only solution in the second Web Entry form is to use REST to get the variables from the case. For that reason, I'm telling you to create hidden fields in the first Web Entry form and set your variables there, so that you can read those variables when the second Web Entry form loads and then use those values to set fields.
#825664
amosbatto wrote: Fri Jul 26, 2019 6:32 pm
cosyxu wrote: But the code only works for singe dyanform web entry, not multiple steps...
Exactly. In the first Web Entry form, you can read the query string in the URL to get the variables. In the second Web Entry form, you can't read the query string, because ProcessMaker will overwrite the query string when the user clicks on the submit button in the first Web Entry form.

The only solution in the second Web Entry form is to use REST to get the variables from the case. For that reason, I'm telling you to create hidden fields in the first Web Entry form and set your variables there, so that you can read those variables when the second Web Entry form loads and then use those values to set fields.
Hi Amo,

Thanks for the explanation again. :idea:

You are saying that:
"Exactly. In the first Web Entry form, you can read the query string in the URL to get the variables."

However I don't think that I can get the variables in the first web entry form, let's don't consider about passing variables into the second web entry form, how can I get the the variables in the first web entry form? :?:
Code: Select all
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");

  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable){
      return pair[1];
    }
  }
  return(false);
}

var fname = getQueryVariable("fname");
if (fname) {
  $("#firstName").setValue(fname);
}

var lname = getQueryVariable("lname");
if (lname) {
  $("#lastName").setValue(lname);
} 
It seems the above code doesn't work for the first web entry form to get the query variables...I'm not using this code in the second dyanform.

Thanks,
Yuan
Cannot upload CSV

Hi, I am using a multi-file upload. When I upload[…]

A Beginner's Guide for ProcessMaker

I recently completed a book on ProcessMaker - &q[…]

Hi guys. I am a newbie. I don't know how to upgrad[…]

HI Thanks so much! This is just what I need.