multi-select Passing Caspio Multi-Select Data to FormStack via Zapier

[wimtracking2]

I have built a Caspio submission form that contains 8 fields that collect  data using a multi-select string field. Upon submission of the data, I need to send the data to FormStack.  I am using Zapier to do so. The problem I am running into is that Zapier does not read the multi-select data field.

Does anyone know of a work around of how I can collect the data via a multi-select field in a submission form and send the data to another database?

[douvega]

Replace your code with this:
 

<script type="text/javascript">
	function f_listbox(fieldObj) {
		//Set field to multi-select
		fieldObj.multiple = true;

		//Get field values
		var values = fieldObj.value;

		if (values.indexOf(",") > 0) {
			for (var i=0 ; i < fieldObj.options.length; i++) {
				if(fieldObj[i].value == values) {
					fieldObj.remove(i);
					break ;
				}
			}

			var arr = values.split(", ");

			for (var j=0 ; j < arr.length; j++) {
				for (var i=0 ; i < fieldObj.options.length; i++ ) {
					if(arr[j]== fieldObj.options[i].value){
						fieldObj.options[i].selected = true;
						break ;
					}
				}
			}
		}
	}

	setTimeout(f_listbox(document.getElementById("YOUR:FIELD:ID")), 20);
</script>

 

[douvega]

Hi @wimtracking2,

Reason is because you can not call List - String fields with the API. You must change how you multiselect stuff. My advise would be to explore 2 options:

1. Change from List - String to Text64000  and use a JS or jQuery plugin in your datapage such as https://select2.org/getting-started/basic-usage
2. Follow this Caspio solution for a Multiselect Listbox option: https://forums.caspio.com/topic/4315-js-multiselect-listbox-in-update-datapage/

This would store selections as comma separated values and Zapier will be capable of reading the field values.

I hope it helps.

[wimtracking2]

Thanks @douvega I followed your suggestion and set up  a multiselect listbox as you listed in your option 2. (Follow this Caspio solution for a Multiselect Listbox option: https://forums.caspio.com/topic/4315-js-multiselect-listbox-in-update-datapage/) 

This is working, however, I am using an update form. I would like the current options to be individually pre-selected, rather than a list pre-selected.

See attachments, Capsio1.png is what is currently displayed. I would like it to show up as it does in Caspio2.png. Do you know how to accomplish this? Thanks again,

[douvega]

Maybe you are missing a variable in your JS since that post is made to have your options selected.

Please send the JS you are using to check it.

[wimtracking2]

@douvega I modified the code per this post 

This is what I have:

<script type="text/javascript">
    
 function f_listbox(v_state) {
  if ( v_state.indexOf(",") > 0 ) {
   for (let i=0 ; i < o_state.options.length; i++ ) {
    if(o_state.value == v_state) {
     o_state.remove(i);
     break ;
    }
   }
   let o_st = v_state.split(", ") ;
   for (let j=0 ; j < o_st.length; j++) {
    for (let i=0 ; i < o_state.options.length; i++ ) {
     if(o_st[j]== o_state.options.value){
      o_state.options.selected = true ;
      break ;
     } 
    }
   }
  }
 }

document.addEventListener('DataPageReady', function (event) {

let v_state = ["Certifications", "Therapy", "Ages", "Agency_Services", "Insurance", "Accept", "Areas", "Treatment"]; //Field names goes here 
let o_state = [];

 v_state.forEach(function(el) {
    if (el !== null) {
            o_state.push(document.getElementById("EditRecord"+el));
    }
 });

 o_state.forEach(function(el){

    if (el !== null) {
        el.multiple = true;
    }
 });

f_listbox(v_state);

});

</script>

[wimtracking2]

Thank you @douvega, your code worked perfectly. I was able to implement it for 8 fields needing to function the same way.

 

<script type="text/javascript">
 //JS code created by douglas.vega1989@gmail.com
 function f_listbox(fieldObj) {
  //Set field to multi-select
  fieldObj.multiple = true;

  //Get field values
  var values = fieldObj.value;

  if (values.indexOf(",") > 0) {
   for (var i=0 ; i < fieldObj.options.length; i++) {
    if(fieldObj.value == values) {
     fieldObj.remove(i);
     break ;
    }
   }

   var arr = values.split(", ");

   for (var j=0 ; j < arr.length; j++) {
    for (var i=0 ; i < fieldObj.options.length; i++ ) {
     if(arr[j]== fieldObj.options.value){
      fieldObj.options.selected = true;
      break ;
     }
    }
   }
  }
 }

 setTimeout(f_listbox(document.getElementById("EditRecordCertifications")), 20);
 setTimeout(f_listbox(document.getElementById("EditRecordTreatment")), 20);
 setTimeout(f_listbox(document.getElementById("EditRecordAges")), 20);
 setTimeout(f_listbox(document.getElementById("EditRecordTherapy")), 20);
setTimeout(f_listbox(document.getElementById("EditRecordAgency_Services")), 20);
setTimeout(f_listbox(document.getElementById("EditRecordInsurance")), 20);
setTimeout(f_listbox(document.getElementById("EditRecordAccept")), 20);
setTimeout(f_listbox(document.getElementById("EditRecordAreas")), 20);
</script>

[Amazing7studios]

Great solution @douvega

[Aether]

Hello Everyone, have you already checked this new feature of Caspio called "Webhooks"?
This is kind of similar to Zapier which automates integrations between different applications.
For further details check it here. https://howto.caspio.com/webhooks/webhooks-overview/