1

Estoy desarrollando un componente para Communiqué 5 (CQ5, ahora llamado AEM o Adobe Experience Manager) con JSP, HTML y JavaScript, y me encuentro con un problema al intentar crear dos listas desplegables (dropdowns) en la que los valores de una dependan del valor de la otra.

En el diálogo del componente (dialog.xml) tengo dos select parecidas a éstas (simplificadas para el ejemplo):

...
<tipo
        jcr:primaryType="cq:Widget"
        defaultValue="claro"
        fieldLabel="Tipo de color"
        name="./tipo"
        type="select"
        xtype="selection">
    <options jcr:primaryType="cq:WidgetCollection">
        <o1
                jcr:primaryType="nt:unstructured"
                text="Claro"
                value="claro"/>
        <o2
                jcr:primaryType="nt:unstructured"
                text="Oscuro"
                value="oscuro"/>
    </options>
</tipo>
<color
        jcr:primaryType="cq:Widget"
        defaultValue="azul-claro"
        fieldLabel="Color"
        name="./color"
        type="select"
        xtype="selection">
    <options jcr:primaryType="cq:WidgetCollection">
        <o1
                jcr:primaryType="nt:unstructured"
                text="Azul Claro"
                value="azul-claro"/>
        <o2
                jcr:primaryType="nt:unstructured"
                text="Azul Oscuro"
                value="azul-oscuro"/>
        <o3
                jcr:primaryType="nt:unstructured"
                text="Gris Claro"
                value="gris-claro"/>
        <o4
                jcr:primaryType="nt:unstructured"
                text="Rojo Claro"
                value="rojo-claro"/>
        <o5
                jcr:primaryType="nt:unstructured"
                text="Rojo Oscuro"
                value="rojo-oscuro"/>
    </options>
</color>
...

Lo que genera dos listas desplegables en el diálogo:

  • la primera con el tipo de color (claro u oscuro); y
  • la segunda con cinco colores (azul claro, azul oscuro, gris claro, rojo claro, rojo oscuro)

Tal y como se ve en la siguiente imagen:

introducir la descripción de la imagen aquí

Ahora, ¿cómo puedo hacer para que los valores de la segunda lista desplegable se actualicen dependiendo del valor de la primera? Por ejemplo, si se selecciona "Claro" como tipo de color, quiero que la segunda sólo tenga azul claro, gris claro y rojo claro; y si se selecciona "Oscuro", quiero que la segunda sólo muestre azul oscuro y rojo oscuro.

Inicialmente pensé en hacerlo con JavaScript, añadiendo un listener del tipo selectionchanged a la primera lista que mostrar/escondiera las opciones de la segunda lista, pero no encuentro relación entre el campo mostrado y el div con las opciones (el código generado no es un select de HTML sino una estructura de CQ5 aparte).

Se me ocurrió también tener dos listas desplegables para la segunda opción: una con colores claros y otra con colores oscuros, y entonces mostar/esconder la que correspondiese. Pero me encuentro con el mismo problema. Pude añadir id/cls a las listas para que tuvieran sus propios ids y poder operar con ellas, pero entonces el problema es que tanto la lógica como el mantenimiento se complicarían demasiado (realmente no sería sólo dos listas desplegables, sino 6 ó 7 en mi caso real).

¿Cómo puedo crear esas dos listas desplegables en las que los valores mostrados en la segunda dependan del valor seleccionado en la primera?

[Hice un cross-post en el sitio de StackOverflow en inglés]

2 respuestas 2

0

[Traducción de la respuesta que obtuve en StackOverflow en inglés por Alex]

Puedes probar algo como esto:

  • Añade una propiedad "id" con el valor "colorsComp" para la listas desplegables con colores.
  • En lugar de nodos-opciones usa options Provider para tu componente con colores:

    function(path, record) {
        return [{
            text:"Azul Oscurao",
            value:"azul-oscuro"
        },{
            text:"Azul Claro",
            value:"azul-claro"
        },{
            text:"Verde Oscuro",
            value:"verde-oscuro"
        },{
            text:"Verde Claro",
            value:"verde-claro"
        },{
            text:"Rojo Oscuro",
            value:"rojo-oscuro"
        }];
    }
    
  • Entonces para tu widget de "tipo de color" puedes filtrar esas opciones según su tipo. Así la llamada al evento selectionChanged se vería así:

    function(comp,value,checked){
        var colorsDropDown = CQ.Ext.getCmp("colorsComp");
        if (!colorsDropDown.original) {
            colorsDropDown.original = colorsDropDown.optionsProvider;
        }
    
        colorsDropDown.optionsProvider = function(path, record) {
            return colorsDropDown.original().filter(function (el) {
                return el.value.indexOf(value) != -1;
            });
        }
    
        colorsDropDown.setOptions(colorsDropDown.optionsProvider());
    }
    

Ahí seleccionamos el widget de "colores" por su id, lo iniciamos, guardamos el provider original, dar valor nuevo, con filtros y actualizando las opciones disponibles.

Es una solución un poco sucia, pero espero que te sirva como orientación.

Nota: Habría que hacer algo similar en la inicialización del component para mostrar las opciones correctas cuando el widget se muestra por primera vez.

1
  • Esta opción me sirvió al principio para tener una idea de cómo hacer las cosas y cómo tener una lista de los valores independiente.
    – Alvaro Montoro
    Commented el 8 mar. 2016 a las 20:12
0

[Ésta es la opción que seguí finalmente, quizás no sea la mejor pero ha funcionado hasta el momento]

Los pasos en esta solución:

  • Separar los colores por tipo y crear una lista independiente para cada uno de los tipos:

    <coloresclaros
        jcr:primaryType="cq:Widget"
        defaultValue="azul-claro"
        fieldLabel="Color"
        name="./colorclaro"
        type="select"
        xtype="selection">
        <options jcr:primaryType="cq:WidgetCollection">
            <o1 jcr:primaryType="nt:unstructured"
                text="Azul Claro"
                value="azul-claro"/>
            <o2 jcr:primaryType="nt:unstructured"
                text="Gris Claro"
                value="gris-claro"/>
            <o3 jcr:primaryType="nt:unstructured"
                text="Rojo Claro"
                value="rojo-claro"/>
        </options>
    </coloresclaros>
    <coloresoscuros
            jcr:primaryType="cq:Widget"
            defaultValue="azul-oscuro"
            fieldLabel="Color"
            name="./coloroscuro"
            type="select"
            xtype="selection">
        <options jcr:primaryType="cq:WidgetCollection">
            <o1 jcr:primaryType="nt:unstructured"
                text="Azul Oscuro"
                value="azul-oscuro"/>
            <o2 jcr:primaryType="nt:unstructured"
                text="Rojo Oscuro"
                value="rojo-oscuro"/>
        </options>
    </coloresoscuros>
    
  • Crear un widget escondido donde se guarda el valor verdadero:

    <type jcr:primaryType="cq:Widget"
          defaultValue="azul-claro"
          hidden="{Boolean}true"
          id="color"
          name="./color"
          xtype="textfield">
    </type>
    
  • Añadir listeners a las listas deplegables de colores que actualizan el valor del campo escondido cuando se actualice la selección:

    <listeners jcr:primaryType="nt:unstructured"
               selectionchanged="function(field, value) { CQ.Ext.getCmp(&quot;color&quot;).setValue(value); }"/>
    
  • Añadir un listener al campo del tipo de color que muestre/esconda la lista desplegable correspondiente:

    • Si se selecciona "Claro", se muestra la lista de colores claros y se esconde la de colores oscuros.
    • Si se selecciona "Oscuro", se muestra la lista de colores oscuros y se esconde la de colores claros.

Esta solución puede no ser la mejor y presenta un pequeño problema de repetición de código (los listeners de coloresclaros y coloresoscuros aunque solo tienen una línea son iguales) pero funciona bien. He movido toda la lógica que tenía en el selectionchanged de los colores al evento valid del campo escondido y se comporta de igual manera.

1
  • Esta es la solución que estoy utilizando ahora mismo
    – Alvaro Montoro
    Commented el 8 mar. 2016 a las 21:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.