How to modify UL based on choices in xe:simpleValuePicker
===

I'm working with ax XPage that allows ad hoc exporting of views to Excel and I want to allow the users to not only pick which columns, but re-organize them as they see fit. While I can do this using an inputTextarea, I would far rather utilize a UL with jQuery-enabled sortable entries. Unfortunately, I'm not real familiar with XPages, jQuery or the Extension Library.

My inputTextarea is simple, but it's a bother to copy-paste text around and risks the users typing in some invalid column headers (I compute which rows to export based on the column headers they select).

    <xp:inputTextarea id="example" multipleSeparator=";"
	rows="6" style="width:270.0px" value="#{reportDoc.WhichFields}">
    </xp:inputTextarea>

The code for the valuepicker is the same in each instance

        <xe:valuePicker for="example" id="valuePicker1"
    		dialogTitle="Select the columns to include">
    		<xe:this.dataProvider>
    		<xe:simpleValuePicker valueListSeparator=",">
	    		<xe:this.valueList><![CDATA[#{javascript:var
    				viewName=@UpperCase(getComponent("viewChoice").getValue());
	  		      	var tmp = @DbLookup(@DbName(),"dbprofile",viewName,"Value");
        			tmp = "None";
	        		var thisdb:NotesDatabase=session.getCurrentDatabase();
        			if (viewName != ""){
			        	var view:NotesView=thisdb.getView(viewName);
        				tmp = view.getColumnNames();
			        }
			        @If(@IsError(tmp),"None",tmp)}]]>
				</xe:this.valueList>
 	   		</xe:simpleValuePicker>
    		</xe:this.dataProvider>
    	</xe:valuePicker>

The Extension Library's ListTextBox is nice, but clicking deletes it from the list rather allowing dragging and I don't know the syntax to make it vertical instead of horizontal.

    <xe:djextListTextBox id="example" multipleSeparator=";"></xe:djextListTextBox>

There's a nice little sample from jQuery in which your HTML should look like this to allow the user to drag-and-drop sorting:

    <div class="demo">
		<ul id="sortable">
			<li class="ui-state-default">Item 1</li>
			<li class="ui-state-default">Item 2</li>
			<li class="ui-state-default">Item 3</li>
			<li class="ui-state-default">Item 4</li>
			<li class="ui-state-default">Item 5</li>
			<li class="ui-state-default">Item 6</li>
			<li class="ui-state-default">Item 7</li>
		</ul>
	</div>

Then I have a simple script block down at the bottom to manage the sortable.

    <xp:scriptBlock id="scriptBlock1">
		<script type="text/javascript" src="js/jquery-1.7.2.min.js" />
		<script type="text/javascript" src="ui/jquery.ui.core.js" />
		<script type="text/javascript" src="ui/jquery.ui.widget.js" />
		<script type="text/javascript" src="ui/jquery.ui.mouse.js" />
		<script type="text/javascript" src="ui/jquery.ui.sortable.js" />

		<script type="text/javascript">
			$(document).ready(function() {
				$( "#sortable" ).sortable({ placeholder: "ui-state-highlight" }); 
				$( "#sortable" ).disableSelection();
			});

			}
		</script>
	</xp:scriptBlock>

I was hoping I could configure the outputs from the valuePicker to do adds and removes on the LIs or maybe put an onChange into the inputTextarea, but it is proving beyond my abilities to think it through.

Any guidance or ideas appreciated. Many thanks to Russ Maher, as his talk at the recent DC AdminDev got me working in this direction AND he has allowed me to annoy him with further questions.