[cosyxu]

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?

Thanks and regards,
Yuan

[amosbatto]

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.

[cosyxu]

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

[cosyxu]

Hi Amo,

Just wondering if there is any update on this?

Thanks,
Yuan

[amosbatto]

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.

[amosbatto]

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

(39.17 KiB) Downloaded 274 times

[cosyxu]

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

[amosbatto]

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);
}

[cosyxu]

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

[amosbatto]

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.

[cosyxu]

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

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

[amosbatto]

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?

[cosyxu]

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 (2.33 KiB) Viewed 8644 times

2019-07-26_17-02-26.png (3.98 KiB) Viewed 8644 times

But the code only works for singe dyanform web entry, not multiple steps...


Thanks,
Yuan

[amosbatto]

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.

[cosyxu]

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.

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