Enable multiple selection for listbox with virtual fields

[jimher]

I have a search form that passes parameters to a results datapage. The search form has a listbox with virtual fields. I want to enable multiple selections for the listbox so that when the user selects multiple items such as School A, School B, School D, the results page will show all results containing School A, School B, or School D.

I found the code to enable multiple selections here: http://forums.caspio.com/viewtopic.php?f=14&t=12154. Here is the code:

<SCRIPT LANGUAGE="JavaScript">
/* "fieldName" is the variable name for the listbox type form element field. */
   var fieldName = "InsertRecordStates";

   var x=document.getElementsByName(fieldName);
   x[0].multiple=true;

</SCRIPT>

I also found out here: http://forums.caspio.com/viewtopic.php?f=3&t=12794&p=15793&hilit=listbox+virtual+field#p15793 that if you're using virtual fields, you have to replace "InsertRecordStates" with "cbParamVirtualXX".

Finally the field in the results datapage that is receiving the parameters is set to "Contain".

After doing all this, the problem I'm having is that the results page only shows results that contain all three (School A, School B, and School D) instead instead of showing results that contain any of the Schools A, B or D.

Any help would be appreciated.

[HongTaiLang]

As your design, it will page "School A, School B, School D" to one field and do the search. The feature "Contains" is if multiple keywords are entered, AND operator is assumed between them. So it will pull all the match records contain all three (School A, School B, and School D) in that field.

[jimher]

Hong thanks for your response. Do you have any idea how to switch the operator from AND to OR?

[ShWolf]

Hi,

You can switch operator in the DataPage wizard for the multiselectable listbox fields with 'Contains' comparison type.

[jimher]

Thanks for the reply but this only works if the search and result forms are all on the same application. If they're two separate datapages, for some reason Caspio made it such that you can't select between AND and OR. It's actually kind of frustrating. I would imagine that a lot of users would appreciate being able to select between the two operators. Just reached out to Caspio and they're going to charge $600 to add some Javascript to make it work. I guess that's why they made it this way, to get you on these fees. If any one has a work-around, it would be much appreciated.

[ganaxi]

Hi jimher:

I have almost the same exact problem. Let me know if you get to a solution on this; I will do the same.

Thanks.

Ganaxi

[HongTaiLang]

If the number of values in the Listbox is limited，you can use the same number of checkboxes instead of Listbox.

For example, if there are 5 values in the Listbox,

1. Edit search page (submission form), create 5 Virtual checkboxes for selection. Check pass parameter to next page.

2. Edit results page. Create 5 Criteria for the received parameter field, set the Logical operator between criteria to "OR", select "Equal" from Comparison type, and check receive parameter in Advanced tab.

[jimher]

Hong,

Thanks for the reply but don't think this will work since I have a large number of values and it won't look attractive on the search form. I've given up and will go to using the search/result on the same datapage. Not ideal but don't want to spend more money on coding services for this. It would be nice if Caspio just provided a solution for this since it appears others are having similar issues.

[bahar_vm]

Here is the solution to implement listbox on search (submission) form as virtual field to function as multi-selection and pass the selected options separated by OR to the results filtering.

 

Requirements:

 

The list box is a virtual field, in our example: "cbParamVirtual1"

 

An additional virtual field, in our example "cbParamVirtual2", is needed to store the OR separated string and pass to the next page (results page). You can make this virtual field "hidden" since it is only neccessary for the program and not human use.

 

Adjust the script if you have more or less listboxes in your search form. The virtual field ID also should be adjusted accordingly; you can find the ID using Firebug and adjust the X in "cbParamVirtualX".

 

The script goes to the footer of the Search/Submission DataPage "Configure Fields" wizard screen. 

 

<script type="text/javascript">

   var fieldName = "cbParamVirtual1";



   var x1=document.getElementsByName(fieldName);

   x1[0].multiple=true;



function splitAndParse()

{

var result = "";

var cleanResult = "";

for (var i = 0; i < x1[0].length; i++) { 

if (x1[0].options[i].selected) { 

result += "\""+x1[0].options[i].value+"\"" + " OR " ; 

} 

} 

if (x1[0].length > 4) { cleanResult = result.substring(0,(result.length-4)); }

document.getElementById("cbParamVirtual2").value = cleanResult;



}



document.getElementById("caspioform").onsubmit=splitAndParse;

</script>

[HongTaiLang]

Thank Emma. The code works perfectly. There are two noteworthy things. 1. Parameter "Virtual2" which is hidden needs to be passed to next page (Results page). 2. Comparison type should be "Contains" on Configure Filtering Fields of report Datapage.

[Rael]

Thanks, this solution works well.

 

As I'm not familiar with JavaScript syntax, please advise how to adjust the script to allow for several listboxes on the search form.

[Jan]

Hi Rael,

 

I think, you can double the code for all listboxes, like:

<script type="text/javascript">
   var fieldName = "cbParamVirtual1";
var fieldName2 = "cbParamVirtual21";

   var x1=document.getElementsByName(fieldName);
var x2=document.getElementsByName(fieldName2);
   x1[0].multiple=true;
x2[0].multiple=true;


function splitAndParse()
{
var result = "";
var result2 = "";

var cleanResult = "";
var cleanResult2 = "";

for (var i = 0; i < x1[0].length; i++) { if (x1[0].options[i].selected) { result += "\""+x1[0].options[i].value+"\"" + " OR " ; } }
if (x1[0].length > 4) { cleanResult = result.substring(0,(result.length-4)); }
document.getElementById("cbParamVirtual2").value = cleanResult;

for (var i = 0; i < x2[0].length; i++) { if (x2[0].options[i].selected) { result += "\""+x2[0].options[i].value+"\"" + " OR " ; } } 
if (x2[0].length > 4) { cleanResult2 = result2.substring(0,(result2.length-4)); }
document.getElementById("cbParamVirtual22").value = cleanResult2;
}

document.getElementById("caspioform").onsubmit=splitAndParse;
</script>

I have added the second one, but you can add as many listboxes as you want.

[Rael]

Thanks Jan, works very nicely!

[DMart]

I was able to implement Emma's suggestion easily, but I'm stuck on how to implement HongTailLang's additional notes. For my new VirtualField (Virtual6 in my case), do I choose "On exit pass field value parameter as [@Virtual6]"

 

Then how do I choose it in the Report in order to be able to use it in the Configure Fields area per HTL's note? It's not listed in the "Select Filtering Fields" list and you can't choose to add it in the Configure Fields area...?

 

 

 

 

 

 

[PacWebDev]

 

Here is the solution to implement listbox on search (submission) form as virtual field to function as multi-selection and pass the selected options separated by OR to the results filtering.

 

Requirements:

 

The list box is a virtual field, in our example: "cbParamVirtual1"

 

An additional virtual field, in our example "cbParamVirtual2", is needed to store the OR separated string and pass to the next page (results page). You can make this virtual field "hidden" since it is only neccessary for the program and not human use.

 

Adjust the script if you have more or less listboxes in your search form. The virtual field ID also should be adjusted accordingly; you can find the ID using Firebug and adjust the X in "cbParamVirtualX".

 

The script goes to the footer of the Search/Submission DataPage "Configure Fields" wizard screen. 

 

<script type="text/javascript">
   var fieldName = "cbParamVirtual1";


   var x1=document.getElementsByName(fieldName);
   x1[0].multiple=true;


function splitAndParse()
{
var result = "";
var cleanResult = "";
for (var i = 0; i < x1[0].length; i++) { 
if (x1[0].options[i].selected) { 
result += "\""+x1[0].options[i].value+"\"" + " OR " ; 
} 
} 
if (x1[0].length > 4) { cleanResult = result.substring(0,(result.length-4)); }
document.getElementById("cbParamVirtual2").value = cleanResult;


}


document.getElementById("caspioform").onsubmit=splitAndParse;
</script>

 

This is a fabulous solution for the search ... but how would we go about implementing multiple selection for entry into the actual table itself?  For example, I have a table with a list of various "categories" and each has a unique ID.  I also have a "profiles" table and any given entry in that table might have one or more appropriate categories -- e.g. "history" and "political action".  I want to read from that categories table to populate the listbox and, in the entry form (to add new people to the "profiles" table) I want to have the selections of the listbox saved as an array of the category ID numbers.  This array, in turn, should then be stored in the appropriate field of the "profiles" table so that entries in that table can be searched or looked up by category, with the two tables associating with one another.

 

I'm currently working on a variety of modification ideas to Emma's script to try to get something that will do this, but I think the Caspio interface is getting in the way or else my javascript-fu isn't what it should be for this task.  If someone could offer assistance it would be very much appreciated.  Thank you!

[PacWebDev]

This is a fabulous solution for the search ... but how would we go about implementing multiple selection for entry into the actual table itself?  For example, I have a table with a list of various "categories" and each has a unique ID.  I also have a "profiles" table and any given entry in that table might have one or more appropriate categories -- e.g. "history" and "political action".  I want to read from that categories table to populate the listbox and, in the entry form (to add new people to the "profiles" table) I want to have the selections of the listbox saved as an array of the category ID numbers.  This array, in turn, should then be stored in the appropriate field of the "profiles" table so that entries in that table can be searched or looked up by category, with the two tables associating with one another.

 

I'm currently working on a variety of modification ideas to Emma's script to try to get something that will do this, but I think the Caspio interface is getting in the way or else my javascript-fu isn't what it should be for this task.  If someone could offer assistance it would be very much appreciated.  Thank you!

 

Between the time I posted this and the time it got approved for display, I figured out a few things that might be worth sharing here.

When I have more time I will post some of my lessons learned; for now, the solution I was seeking above is available on this page:

http://forums.caspio.com/index.php/topic/4315-js-multiselect-listbox-in-update-datapage/

[bahar_vm]

Between the time I posted this and the time it got approved for display, I figured out a few things that might be worth sharing here.

When I have more time I will post some of my lessons learned; for now, the solution I was seeking above is available on this page:

http://forums.caspio.com/index.php/topic/4315-js-multiselect-listbox-in-update-datapage/

Hi,

 

To add to your comment, use the script provided here: http://forums.caspio.com/index.php/topic/3148-js-select-multiple-values-from-a-listbox-in-a-webform/ if you want to enable multi-select in Submission form. For Update form you can use the one that you posted above.

 

Best,

Emma

[JoshuaJobin]

I am going over this now. And I was able to get it working, for the most part. It will only work if the listbox contains MORE than 4 items.

The only code change I made was the line:

if (x1[0].length > 4) { cleanResult = result.substring(0,(result.length-4)); }

I changed it to:

if (result.length > 4) { cleanResult = result.substring(0,(result.length-4)); }

Essentially just removing the "OR" at the end of the string. If it compares to x1[0].length, it is only checking to see whether the listbox has more than 4 options in it. We would like to compare the result to see if it has the last 4 characters on the end " OR ", and remove them.

[JolliBeng]

Hi,

You can actually do multi-select on listbox on Seach Page using Caspio's standard features only. 

First, you set your form element to be a Listbox. Then on the Advanced tab, check the Allow Multiselection checkbox.

 

-JolliBeng

[Kurumi]

Hi - sharing this forum post if you would like to get the Display values in the listbox