Client Database Configuration

[kpcollier]

Here is my dilemma - my initial Client Table is set up to take in up to 2 address and up to 2 names per record to create a Client List. This is because if a husband and wife call us for work, we want them on the same account and such. Same with the Address field, because they may have a personal home and a rental home, in example. 

My Work Order form, which takes place after finding the client through the Client List, can only take in One address and One name. I couldn't put in two address fields into one dropdown with Caspio Standard Features. To combat that, I created a third page to act between the client list and the Work Order Form. This page will take in a parameter from a button on the Client List, where the user will select the Address and the Name to be on the Work Order Form. So, we made our own dropdown in an HTML table that includes both Addresses, so you can select one. Here is the code for the HTML block dropdown - 

<select id='test'>
  <option value="[@field:Primary_Client]">[@field:Primary_Client]</option>
  <option value="[@field:Additional_Client]">[@field:Additional_Client]</option>
</select>

I am needing help creating JS script for a query string value - it will send the selected value from the custom HTML Block Dropdown to the Work Order Form. 

Here are the table designs for the Client List and the Client Work Order list. You can see the Client Table has two address fields and the Client Work Order Table has one. Same with Client Names. The Client List Table is the 1st screenshot, and the Work Order Table is the 2nd.

 

[TsiBiRu]

Hi @kpcollier

If what you want is to create a dropdown which contains values from your two fields, the I can suggest that you create your own custom drop-down, and use the value of your fields for both the display and stored value.

<select id='dropID'>
  <option value="[@field:FieldName]">[@field:FieldName]</option>
  <option value="[@field:FieldName]">[@field:FieldName]</option>
</select>

 

I hope this helps,

Regards,

TsiBiRu

[kpcollier]

Hey @TsiBiRu - I have updated the OP to include this code for the custom dropdowns. I am now searching for a way to get query strings to pass the parameters. Thank you for your help!

[TsiBiRu]

Hi @kpcollier

No worries, it is always my pleasure to help anyone in this community.
You can try to use the code below, I've added two HTML blocks on my Tabular Report Datapage.

1st HTML Block is to display the drop-down

<!-- I've set the ID to the ID of the records so that we will pass the selected value from the drop down where the button is clicked-->
<select id='[@field:kpcollier_Client_ID]'>
  <option value="[@field:Primary_Client]">[@field:Primary_Client]</option>
  <option value="[@field:Additional_Client]">[@field:Additional_Client]</option>
</select>

2nd HTML block is to create a custom button to get the selected value of the  selected value from the drop-down of each respective row

                 //I've passed the ID of the row as a parameter to our function 
<button type="button" onclick="myFunction([@field:kpcollier_Client_ID])">Click me</button>

<script>
// Received the ID, and store it on the variable x  
function myFunction(x) {
//This code will get the selected vale from drop-down and store it to strUser variable
var e = document.getElementById(x);
var strUser = e.options[e.selectedIndex].value;

// This code will redirect it to your prefered site via query string  
window.location.replace("https://www.google.com?val=" + strUser);


}
</script>

 

I've also added the exported copy of the DataPage that I've worked with so that you can import it to your account and see how it works

I hope this helps.

Regards,

TsiBiRu

 

CaspioData_2019-Apr-04_2034.zip

[kpcollier]

Thanks a ton for your help, @TsiBiRu. I have one question on this workflow:

For the Work Order form that is receiving the parameters, what would I put in for the respective elements? I.e., I am sending the chosen Address as a parameter, but how do I accept it as a parameter on this Job_Address?

Please see screenshot.

 

[TsiBiRu]

Hi @kpcollier

You are already right, you will just need to update the variable on your on load to match the one that we've  passed in our code

So that would be [@strUser] in my example.

window.location.replace("https://www.google.com?val=" + strUser);

 

Regards,

TsiBiRu

[kpcollier]

8 minutes ago, TsiBiRu said:

Hi @kpcollier

You are already right, you will just need to update the variable on your on load to match the one that we've  passed in our code

So that would be [@strUser] in my example.

window.location.replace("https://www.google.com?val=" + strUser);

 

Regards,

TsiBiRu

I am doing something wrong. I've changed 'strUser' to 'strAdd' in both places on the script, yet the "Job Address" field is not being populated.

[kpcollier]

Also, how would I add a second field into this? I've got the dropdowns going for both Address and Name, however the script I believe is for just one of them.

[TsiBiRu]

Hi @kpcollier,

To test if the code is working, I would suggest to look in the URL and see if the parameter contains a value.

If it has a value, then it only confirms that there is nothing wrong with your code. We just need to fix this on the receiving part and ensure that we are receiving it using the exact variable name [@val] in this example

In regards to your second question, you will simple need to add a new HTML block to and create a new/2nd drop-down

<!-- 
As you can see, I've added '2' in my id below id='2[@field:Listing_ID], 
this is to diffrentiate it with our first dropdown so that we can target it correct using its repective id.
To make it simple, 2 is just a prefix to indicate that it is the second dropdown of the row

ex: id of row is 2
first drop-down ID:2
second drop-down ID:22

and ...
-->
<select id='2[@field:Listing_ID]'>
  <option value="[@field:Address]">[@field:Address]</option>
  <option value="[@field:Address_Line_2]">[@field:Address_Line_2]</option>
</select>

Then we will just need to add some code in our JS to capture the selected  value of our second value, and to add it to our query string

<button type="button" onclick="myFunction([@field:Listing_ID])">Click me</button>

<script>
function myFunction(x) {

// Getting the value of the first drop-down
var e = document.getElementById(x);
var strUser = e.options[e.selectedIndex].value;


// Getting the value of the second drop-down
var f = document.getElementById('2'+x);
var endUser = f.options[f.selectedIndex].value;


window.location.replace("https://www.google.com?val=" + strUser + "&val2="+endUser );


}
</script>

 

I've also added in this response a copy of the DataPage that I've updated, it now contains two drop-down per row/record.  And the selected value of this drop-downs is being passed to my test site (google.com). You can download it to your account so that you can review the code, and see how it works

if you will be encountering some issue implementing this solution, you can just provide me with an exported copy of your Datapages (Sending & Receiving) so that I can help you to implement this.

Kind regards,

TsiBiRu

CaspioData_2019-Apr-04_2309.zip

[kpcollier]

@TsiBiRu I got it to work. Thank you for your dedication on helping me get this fixed! I appreciate it.

 

CaspioData_2019-Apr-05_0955.zip

[TsiBiRu]

HI @kpcollier,

You're welcome, I'm happy to now that this is working for you now. It was my pleasure to assist you with this.

Kind regards,

TsiBiRu

[kpcollier]

Hey @TsiBiRu, I am trying to add a third dropdown for a Phone Number. I've added the extra script and the additional dropdown html block. I see the parameter in the URL when loaded, and I have the Phone Number field set up to receive the value. However, something is not working. Could you take a check?

[kpcollier]

Scratch that - I was able to get it to work. Had a mistake in the script I made.

[kpcollier]

Hey @TsiBiRu, I found a problem and was hoping you could help me out with it. I've added a couple more dropdowns and values to the query string. Everything works great, unless one of the dropdowns is empty. If there is no value in one of the dropdowns, then the 'Submit' button with the query string JS doesn't work. If all of the fields have a value, it works fine. But, lets say there isnt a phone number on the account so the dropdown for phone number is empty, it won't work. Any idea?