Para los elementos de tipo desplegable podemos añadir un origen de datos. Este origen de datos nos va a permitir cargar, de forma sencilla, múltiples valores.

Para ello, en la venta de propiedades del desplegable, en la pestaña de "Opciones" tenemos que indicarle que "Sí" en la pregunta de "Configurar origen de datos". Una vez hecho esto, tendremos que apretar el botón de "Personalizar" para añadir la configuración del origen de datos.


Debemos llamar a la función resolve con un parámetro que tenga el formato especificado a continuación. 

  • id: "Valor del texto"
  • text: "Texto a visualizar"


Estructura de datos

 
 resolve({
    data: [{id: "op-1", text: "Opción-1"}, 
           {id: "op-2", text: "Opción-2"}, 
           {id: "op-n", text: "Opción-N"}]
 });

JS

Cuando el origen de datos necesita obtener la lista de opciones desde un servicio externo, debe usarse la función wf.obtenerJSONDesdeUrl(url, callback)no $.getJSON ni otras utilidades de jQuery para AJAX, que están desaconsejadas.

Es importante llamar siempre a resolve, incluso cuando la petición falla o no devuelve datos (por ejemplo, si el recurso no es accesible). En ese caso debe llamarse a resolve(false).

Importante: el callback de wf.obtenerJSONDesdeUrl no recibe el JSON de la URL directamente, sino un objeto envoltorio con la forma {data: <json de la url>}. Hay que acceder a response.data para obtener el contenido real devuelto por el servicio.

resolve(false)

wf.obtenerJSONDesdeUrl(
    "https://datos.canarias.es/catalogos/general/api/3/action/organization_list?all_fields=true",
    function(data) {
        if (!data || !data.result || !data.result.length) {
            resolve(false);
            return;
        }
        var parsedData = data.result.map(function(item) {
            return { id: item.id, text: item.title };
        });
        resolve({data: parsedData});
    }
);
JS

Este ejemplo carga un desplegable con el listado de organismos públicos del Gobierno de Canarias, usando el portal de datos abiertos de Canarias. Cada opción se construye con las propiedades id (identificador) y text (texto a visualizar), tal como exige el formato del origen de datos.

Recuperando un JSON de la API de Webforms

Webforms provee dentro de las utilidades un método que nos permite cargar un JSON desde la propia API de Webforms. Se debe llamar a la función wf.obtenerJSON(lista, resolve). Las listas se corresponden con el nombre del fichero JSON sin la extensión. Por defecto, tenemos los siguientes ficheros JSON cargados:

  • islas
  • países
  • provincias



Ejemplo de código para configurar un origen de datos


Ejemplo

wf.obtenerJSON("islas", resolve);

JS


Si quieres cargar otros ficheros JSON consulta con tu administrador. Tardará sólo un par de minutos en tenértelo listo.