Accessing Multi-Select List Control Array To Pull Out Any Desired Data..

[txsiccness]

I will start off by saying that this is NOT a question - this is purely informational. I hope this helps someone that experiences issues with pulling out array data from multi-select lists.

Brief:

I started off by creating a multi-select list control for displaying all employees within the organization. The idea behind this was obviously to allow employees to be managed by an HR department within the application itself. Of course, I included some basic features like creating new employees, editing existing employees and so on..

Skipping ahead a week, I was informed by my client that the HR department needed to be able to send out notifications via email, whether individually or in bulk. So I thought, "well, I have this HR module thing.. why not include it there?"..

Moving on.. I got everything set up the way I wanted and got to the point where it was time to actually focus on the notifications. I knew there were a lot of different ways I could do this, but for simplicity sake, I thought "it would probably be cool to allow HR to just select the employees they want to notify in the list, click a button, draft the email and send" (e.g. not having to input email addresses for every person they wanted to send the same notification to). The problem I had was getting the email addresses from the rows that were selected in the list. Having worked with list controls in the past, I knew about the selectionData array and how to access it. However, when I started actually writing the javascript, I could not for the life of me figure out how to pull only the email addresses from the selected rows in the array. Needless to say, I fiddled with this for almost an entire day in console. Initially, I was getting undefined errors left and right, then I finally got something promising in the form of [Object Object] while I was running in console which told me I was on the right track (for some odd reason, as I was getting the message a number of times depending on how many rows I had selected which told me that I was accessing the objects in the array).

Eventually, I was able to pull what I needed from the array and get it working via (in list's OnSelect event):

if (this.initialized){
	
	var lObj = {dialog.object}.getControl('list1'); //targeting list control
	var selectData = lObj.selectionData; //grabbing selected list data
	var lstArray = []; 

	for(i=0;i<selectData.length;i++){
     	   var newArray = [];
     	   newArray = lstArray.push(selectData[i].listColumn);
	}
	
	var myArray = [].concat(lstArray); //Created fresh array and put lstArray data in
	var joinedArray = myArray.join(','); //Separating email addresses w/ comma for multiple recipients
		
        {dialog.object}.setValue('textfield',joinedArray); //My email recipient field where selected employee's email addresses are output to
}

If there was a better and more efficient way to do this - please feel free to enlighten me.. I feel like I ran around this multiple times trying a million different things to get this working. But again, hopefully this will help someone out somewhere down the line..

[RichCPT]

Re: Accessing Multi-Select List Control Array To Pull Out Any Desired Data..

If my notes are correct, refer to the two videos under "UXL_V12--42" in the video library.
From my notes, I think this is how I would go about processing a particular column value from the rows that have been selected:

var dat = '';
var lObj = {dialog.Object}.getControl('YOUR_LIST');
var slctCnt = lObj.selection.length;
for( var j=0; j < slctCnt; j++ ) {
   dat = lObj.selectionData[j].YOUR_FIELD_NAME;    // Use LIST / Fields (tab) to get proper up/low case of field name.
   // do something here with 'dat'
}

As DavidK mentioned today or yesterday in another post, there are a number of useful properties for a LIST object: .selection, .selectionKey, selectionData, .value

[Davidk]

Re: Accessing Multi-Select List Control Array To Pull Out Any Desired Data..

if (this.initialized){
	
	var lObj = {dialog.object}.getControl('list1'); //targeting list control
	var selectData = lObj.selectionData; //grabbing selected list data
	var lstArray = []; 

	for(i=0;i<selectData.length;i++){
     	   var newArray = [];
     	   newArray = lstArray.push(selectData[i].listColumn);
	}
	
	var myArray = [].concat(lstArray); //Created fresh array and put lstArray data in
	var joinedArray = myArray.join(','); //Separating email addresses w/ comma for multiple recipients
		
        {dialog.object}.setValue('textfield',joinedArray); //My email recipient field where selected employee's email addresses are output to
}

If there was a better and more efficient way to do this - please feel free to enlighten me.. I feel like I ran around this multiple times trying a million different things to get this working. But again, hopefully this will help someone out somewhere down the line..

Riley,

I understand what you want to accomplish, but there are a few issues with your code.

You're using the List Control onSelect event... and... you're using if(this.initialized) which means that you're not allowing a null value for the List. But, this means that the first row in the List is automatically selected for your user.

The onSelect code fires if you select a row, but does not fire if you de-Select a row. Once an email is added to your List, your can't un-add it.

Because you're using the onSelect event, your code, which processes ALL selected rows, fires every time and process ALL selected rows every time a row is selected.

Because you're using the onSelect event, you don't need to get the List object again with the .getControl() method. You have all the List object info in the 'this' scope.

You're creating a new Array (selectData) by making it a copy of lObj.selectionData. Why create a new Array of identical data?

In your loop, you're creating a newArray but not using it as an array. It ends up being a counter of Array items. The .push() method does not need to be assigned.
Also, you're creating this new Array every time you loop.

You then create a 4th Array (myArray) and assign it 1stArray. Why create a duplicate Array of selected data?

Then you create a variable named joinedArray which is not an Array but rather a string of comma separated values.


I would "check" the List property "Allow NULL selection".

I would add a button to your UX... allow your users to select Email addresses and then click the button to process their selections.

The code would be...

	var lObj = {dialog.Object}.getControl('list1'); //targeting list control
	var emailArray = []; 

	for(i=0;i<lObj.selectionData.length;i++){
		emailArray.push(lObj.selectionData[i].EMAIL);
	}

	var emailStr = emailArray.join(',');
	{dialog.object}.setValue('textEmails',emailStr);

If you really wanted to process all selections every time you make a selection, then use the onClick event instead of onSelect as onClick fires for de-Select as well.

[txsiccness]

Re: Accessing Multi-Select List Control Array To Pull Out Any Desired Data..

Ahhh, very nice David! Solid work.