Jump to content
  • 0

Client Database Configuration


Question

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.

 

2ac26860-6251-4dc9-8dcf-6c3009fe5c0b.png

newnew.png

Link to post
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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

Link to post
Share on other sites
  • 0

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.

image.png.40acb60c02633ea286378fa8444c1d09.png

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

image.thumb.png.e02f1b35e6100dd362d810caba0efabb.png

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

Link to post
Share on other sites
  • 0

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.

nr9ES3.jpg 

Link to post
Share on other sites
  • 0
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.

wZ5cUR.jpg

Link to post
Share on other sites
  • 0

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

image.png.5f2834f691eb3f0aa9c2a1e0a363f763.png

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

Link to post
Share on other sites
  • 0

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?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...