Una vez que hemos cargado las dependencias necesarias, lo siguiente será crear nuestra instancia del visualizador y el contenedor que albergará al mismo.

Por tanto, los pasos a seguir serán dos:

  • Crear el contenedor HTML.
  • Crear la instancia del visualizador de Webforms.


Creación del contenedor HTMLLink to Creación del contenedor HTML

Basta con crear algún contenedor con un id único. En el siguiente ejemplo crearemos el contendor asignándole el identificador “my-visualizer”.


<div id="my-visualizer"></div>
XML

Creación de la instancia del visualizador de WebformsLink to Creación de la instancia del visualizador de Webforms

Para crear una instancia, lo único que deberemos hacer es llamar al constructor de la clase “WebformVisualizer” con los siguientes parámetros:


var visualizer = new webforms.WebformVisualizer({
    containerId: 'my-visualizer',
    resourceBaseUrl: 'http://webforms.es/webforms/api/v1/'
});
CODE


Respecto a los parámetros del constructor, se deben cumplimentar de la siguiente manera:

  • containerId. Se debe especificar el identificador asignado al div creado en el paso anterior. En nuestro caso “my-visualizer”.
  • resourceBaseUrl. Se debe especificar el endpoint de la API REST que permitirá obtener los formularios. La ruta relativa de esta API es la siguiente: “/webforms/api/v1”. Por tanto, siguiendo con el ejemplo anterior en la que nuestra base era “http://webforms.es”, la URL completa quedaría como en el bloque de código anterior.