📄
Formularios
SDK para generar formularios y encuestas generados en su cuenta mediante Javascript.
La documentación y recursos necesarios para utilizar Forms SDK está estrictamente restringido para uso de clientes de Videsk. Nos reservamos el derecho de restringir su acceso y uso, si detectamos un uso inadecuado.
Para utilizar Forms SDK podrás instarlo mediante nuestro CDN.
HTML
Javascript
<link rel="stylesheet" href="https://cdn.videsk.io/sdk/forms.min.css" />
<script src="https://cdn.videsk.io/sdk/forms.min.js"></script>
const link = document.createElement('link');
link.rel = "stylesheet";
link.href = "https://cdn.videsk.io/sdk/forms.min.css";
document.head.appendChild(link);
const script = document.createElement('script');
script.src = 'https://cdn.videsk.io/sdk/forms.min.js';
document.body.appendChild(script);
Debes cargar ambos recursos CSS y JS, de lo contrario Forms no funcionará correctamente.
1
const form = new FormSDK({ target: document.querySelector('#form-container') });
De forma simple puedes instanciar Forms. Posteriormente deberás definir oyentes de eventos y adjuntar métodos a un botón personalizado.
Con esta propiedad podrás obtener el formulario con sus campos sin necesidad de llamar al método
submit
.form.data
// output
[{...}]
Ya instanciado el SDK podrás acceder a los siguientes métodos:
Este método tiene como objetivo que definas un oyente cuando un evento ocurra. Los dos argumentos que recibe son:
event
: nombre del eventocallback
: función que se ejecutará al ocurrir el evento
form.on('submit', callback);
Con este método renderizas los campos del formulario. Los dos argumentos que recibe son:
readonly
: define si son de lectura o escritura, por defectofalse
form.render(values);
Este método permite enviar el formulario activando la validación de campos y posteriormente el evento
submit
.Puedes obtener los valores de los campos y su validez mediante un valor retorno de tipo
object
que contiene data
(array) y valid
(boolean).const response = form.submit();
const { data, valid } = response;
Te sugerimos trabajar con eventos, ya que tendrás mayor control sobre las acciones
submit
del formulario. Evita usar los valores de retorno.Con este método podrás actualizar el valor de un campo en específico mediante sus propiedades como:
name
, label
, type
, value
y _id
. Este método recibe cuatro argumento:name
: valor con el cual se va a buscar el campovalue
: valor a insertar en el campoproperty
: propiedad a modificar, por defecto esvalue
key
: nombre de la propiedad a buscar, por defecto esname
Insertar valor
Campo requerido
Campo solo lectura
form.set('customer_email', '[email protected]');
form.set('customer_email', true, 'properties.required', 'name');
form.set('email', true, 'properties.readonly', 'type');
Disponemos de un método envoltorio que puede facilitar el uso.
1
// Actualizar por name del campo
2
form.update('value', '[email protected]').of('customer_email');
3
form.update('value', '[email protected]').of('customer_email', 'name');
4
// Actualizar por _id
5
form.update('properties.required', true).of('60fb2623854bb563f843ba09', '_id');
Este método elimina por completo el nodo HTML donde se renderizó.
form.destroy();
Te sugerimos como buena práctica usar este método una vez que no necesitas el formulario, es decir, es enviado exitosamente.
Los eventos disponibles son
submit
, ready
, updated
, error
.Este evento se produce una vez que se ejecuta el método
submit()
. El único argumento callback es un object
compuesto de:valid
: boolean que indica si todos los campos son válidos
form.on('submit', (event) => {
const { valid } = event;
});
Con este evento podrás oír cuando el formulario ha sido renderizado exitosamente. No contiene argumento callback.
form.on('ready', () => {});
Con este evento podrás escuchar la actualización del valor de un campo. El argumento callback es un
object
compuesto de:_id
: corresponde el id del campo actualizado comostring
.value
: corresponde al valor del campo, el cual puede serstring
,boolean
,array
onumber
.
form.on('updated', event => {
const { _id, value } = event;
});
Con este evento podrás escuchar errores que solo podrían surgir al momento de renderizar el formulario. Contiene tres argumentos compuestos de:
name
: nombre del error comostring
code
: código del error los puede ser400
y403
message
: mensaje legible sobre el error
Esto solo podría ocurrir si insertas un formulario generado manualmente. Se recomienda siempre administrar los formularios desde tu cuenta dashboard.
form.on('error', (name, code, message) => {
// Catch with ingestor o similar
});
const form = new FormSDK({ target: document.querySelector('#form-container') });
// Listen when submit the form
form.on('submit', ({ valid }) => {
if (valid) doSomething();
});
// Attach submit to custom button
document.querySelector('#myButton').addEventListener('click', () => form.submit());
// Render the form
form.render(arrayWithFormElements);
Última actualización 7mo ago