Cómo modificar UL según las opciones en xe:simpleValuePicker

Estoy trabajando con axe XPage que permite la exportación ad hoc de vistas a Excel y quiero permitir que los usuarios no solo elijan qué columnas, sino que también las reorganicen como mejor les parezca. Si bien puedo hacer esto usando un inputTextarea, preferiría utilizar una UL con entradas clasificables habilitadas para jQuery. Desafortunadamente, no estoy muy familiarizado con XPages, jQuery o Extension Library.

Mi inputTextarea es simple, pero es una molestia copiar y pegar texto y corre el riesgo de que los usuarios escriban algunos encabezados de columna no válidos (calculo qué filas exportar en función de los encabezados de columna que seleccionan).

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

El código para el selector de valor es el mismo en cada instancia

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

El ListTextBox de la biblioteca de extensiones es agradable, pero al hacer clic en él se elimina de la lista en lugar de permitir arrastrarlo y no conozco la sintaxis para hacerlo vertical en lugar de horizontal.

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

Hay una pequeña y agradable muestra de jQuery en la que su HTML debería verse así para permitir que el usuario ordene arrastrando y soltando:

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

Luego tengo un bloque de secuencia de comandos simple en la parte inferior para administrar la clasificación.

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

Tenía la esperanza de poder configurar las salidas del valuePicker para agregar y eliminar en los LI o tal vez poner un onChange en el inputTextarea, pero está demostrando que está más allá de mis habilidades para pensarlo.

Cualquier orientación o ideas apreciadas. Muchas gracias a Russ Maher, ya que su charla en el reciente DC AdminDev me hizo trabajar en esta dirección Y me permitió molestarlo con más preguntas.

Edit: Avancé más usando onChange en mi ListBoxText y una repetición en UL. Coloca las opciones en la UL como nuevos LI, pero no puedo arrastrarlas y soltarlas.

<xe:djextListTextBox id="djextListTextBox1" multipleSeparator=";">
    <xp:eventHandler event="onChange" submit="true"
            refreshMode="partial" refreshId="sortable">
    </xp:eventHandler>
</xe:djextListTextBox>

Y la repetición:

<ul id="sortable">    
    <xp:repeat id="repeat1" rows="30" var="myChoices">
        <xp:this.value><![CDATA[#{javascript:getComponent("djextListTextBox1").getValue();}]]></xp:this.value>
        <li class="ui-state-default"><xp:label value="#{javascript:myChoices;}">
        </xp:label></li>
    </xp:repeat>
</ul>

preguntado el 27 de julio de 12 a las 20:07

Encontré algo de ayuda aquí --> stackoverflow.com/questions/11433315/… -

¿Puede agregar su enlace como respuesta y marcarlo como aceptado para que la pregunta ya no aparezca como "sin respuesta"? -

@Vic He copiado el texto relevante hasta la respuesta. Gracias. -

¡Frio! Hay tantos 'sin respuesta' en la etiqueta XPages. Quiero asegurarme de que las personas puedan obtener respuestas cuando buscan ayuda con un problema similar. -

1 Respuestas

Encontré algo de ayuda en otra pregunta de desbordamiento de pila

Avancé más usando onChange en mi ListBoxText y una repetición en UL. Coloca las opciones en la UL como nuevos LI, pero no puedo arrastrarlas y soltarlas.

<xe:djextListTextBox id="djextListTextBox1" multipleSeparator=";">
    <xp:eventHandler event="onChange" submit="true"
            refreshMode="partial" refreshId="sortable">
    </xp:eventHandler>
</xe:djextListTextBox>

Y la repetición:

<ul id="sortable">    
    <xp:repeat id="repeat1" rows="30" var="myChoices">
        <xp:this.value><![CDATA[#{javascript:getComponent("djextListTextBox1").getValue();}]]></xp:this.value>
        <li class="ui-state-default"><xp:label value="#{javascript:myChoices;}">
        </xp:label></li>
    </xp:repeat>
</ul>

contestado el 23 de mayo de 17 a las 12:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.