erp Centro de Ayuda

Cómo crear un Webform

Pasos para crear un formulario:

1. Accede al módulo de Webforms: Ve al menú principal de Obuma ERP y selecciona la opción "Webforms".

2.Haz clic en "Nuevo Webform":

Ingresa un nombre descriptivo para el formulario.

Define una breve descripción para facilitar la identificación.

3. Activar webform

Antes de configurar el webform es necesario activarlo en configuración luego ingresar un titulo y señalar activo en estado.

4. Configura los campos del formulario:

Estructura del formulario:

• Un formulario se compone de:
  • Grupos de campos: secciones temáticas (ej. “Datos del participante”, “Información de la empresa”).
  • Campos: cada input recolecta un dato específico.
• Para Agregar campos al formulario es posible mediante codigo Json o en el editor visual en configuracion
• Estructura código Json:

{
"fields": [
{
"field_key": Clave única interna del campo,
"field_label": Etiqueta visible para el usuario final,
"field_description": Texto de ayuda o explicación adicional,
"field_group": ID del grupo/sección al que pertenece el campo,
"field_type": vacio, input, textarea, select, radio, radiobutton, checkbox, file, fileimage, email, number, date, etc. ,
"field_id": "",
"field_required": 1 para obligatorio, 0 opcional,
"field_default_value": Valor por defecto al cargar el formulario,
"field_values": Lista de opciones separadas por ; (formato valor:etiqueta:color),
"field_class": Clases CSS personalizadas,
"field_placeholder": Texto placeholder dentro del campo,
"field_maxlenght": Número máximo de caracteres que el usuario puede ingresar en el campo,
"field_minlenght": Número mínimo de caracteres requeridos para que el valor del campo sea válido.,
"field_size": Define el ancho visible del campo. No afecta cuántos caracteres puedes escribir, solo cuántos se muestran visibles sin
desplazarte,
"field_autocomplete": “on” permite autocompletado, “off” lo desactiva. Controla si el navegador puede sugerir valores anteriores
(autocompletar) para ese campo
}
],
"fields_groups": [
{
"group_name": Nombre de la sección o categoría del formulario,
"group_order": Define la posición en la que debe aparecer este grupo dentro del formulario
}
]
}

Al seleccionar editor visual se desplegará una ventana con un botón "Agregar campo" y debe definir los siguientes atributos:

• Clave del campo: Clave única interna del campo
• Tipo de campo: texto, select, checkbox, radio, archivo, etc.
• Etiqueta del campo: Nombre visible del campo en el formulario.
• Placeholder: Texto de ayuda para el usuario
• Campo requerido: Establece si el campo es obligatorio o opcional
• Valores (si aplica): Por ejemplo, opciones en un select o radio.
• Class: Clase Bootstrap definida para el campo.
• Grupo del campo: Orden de grupo definido en fields_groups.

5. Guarda y publica el formulario: Una vez configurados todos los campos, guarda los cambios y publica el formulario para hacerlo disponible tiene 3 opciones para publicar el web form por link, QR y mediante codigo HTML.

6. Casos frecuentes:

Ejemplo de WebForm para Arqueo de caja:

Los campos para agregar en el editor visual son los siguientes:

El WebForm JSON para Arqueo de Caja es el siguiente:

{
"fields": [
{
"field_key": "nombre_responsable",
"field_label": "Nombre del responsable",
"field_group": "1",
"field_type": "input",
"field_id": "",
"field_required": "1",
"field_default_value": "",
"field_values": "",
"field_class": "",
"field_placeholder": "Ingrese sus nombres y apellidos",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "saldo_inicial",
"field_label": "Saldo inicial en caja",
"field_group": "2",
"field_type": "input",
"field_id": "",
"field_required": "1",
"field_default_value": "",
"field_values": "",
"field_class": "",
"field_placeholder": "Saldo inicial",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "ventas_efectivo",
"field_label": "Ventas en efectivo del dia",
"field_group": "2",
"field_type": "input",
"field_id": "",
"field_required": "1",
"field_default_value": "",
"field_values": "",
"field_class": "",
"field_placeholder": "Ventas en efectivo",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "gastos_diarios",
"field_label": "Gastos realizados durante el dia",
"field_group": "3",
"field_type": "input",
"field_id": "",
"field_required": "1",
"field_default_value": "",
"field_values": "",
"field_class": "",
"field_placeholder": "Gastos del du00eda",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "saldo_final",
"field_label": "Saldo final en caja",
"field_group": "4",
"field_type": "input",
"field_id": "",
"field_required": "1",
"field_default_value": "",
"field_values": "",
"field_class": "",
"field_placeholder": "Saldo final",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "categoria_gasto",
"field_label": "Categoria",
"field_group": "3",
"field_type": "radio",
"field_id": "",
"field_required": "1",
"field_default_value": "",
"field_values": "Compra de insumos;Pagos a proveedores",
"field_class": "",
"field_placeholder": "",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "sucursal",
"field_label": "Sucursal",
"field_group": "1",
"field_type": "select",
"field_id": "",
"field_required": "0",
"field_default_value": "",
"field_values": "Sede Central;Sede Sur",
"field_class": "",
"field_placeholder": "",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
}
],
"fields_groups": [
{
"group_name": "Informacion General",
"group_order": "1"
},
{
"group_name": "Ingresos",
"group_order": "2"
},
{
"group_name": "Egresos",
"group_order": "3"
},
{
"group_name": "Cierre",
"group_order": "4"
}
]
}

Ejemplo de WebForm CheckList para Control de Procesos

En Otras Configuraciones en Layout webform indicar checklist y Guardar.

Los campos para agregar en el editor visual son los siguientes:

El WebForm JSON para Control de procesos es el siguiente:

{

"fields": [
{
"field_key": "calidad_material",
"field_label": "Se verifico la calidad del material al recibirlo",
"field_group": "1",
"field_type": "radiobutton",
"field_id": "",
"field_required": "0",
"field_default_value": "",
"field_values": "Si::green;No::red;N\/A::gray",
"field_class": "",
"field_placeholder": "",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "material_almacenado",
"field_label": "Los materiales fueron almacenados correctamente",
"field_group": "1",
"field_type": "radiobutton",
"field_id": "",
"field_required": "0",
"field_default_value": "",
"field_values": "Si::green;No::red;N\/A::gray",
"field_class": "",
"field_placeholder": "",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "pruebas_realizadas",
"field_label": "Se documentaron las pruebas realizadas",
"field_group": "2",
"field_type": "radiobutton",
"field_id": "",
"field_required": "0",
"field_default_value": "",
"field_values": "Si::green;No::red;N\/A::gray",
"field_class": "",
"field_placeholder": "",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "conformidades",
"field_label": "Se gestionaron las no conformidades, si existieron",
"field_group": "2",
"field_type": "radiobutton",
"field_id": "",
"field_required": "0",
"field_default_value": "",
"field_values": "Si::green;No::red;N\/A::gray",
"field_class": "",
"field_placeholder": "",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "area_trabajo",
"field_label": "El area de trabajo estuvo limpia y ordenada durante el proceso",
"field_group": "3",
"field_type": "radiobutton",
"field_id": "",
"field_required": "0",
"field_default_value": "",
"field_values": "Si::green;No::red;N\/A::gray",
"field_class": "",
"field_placeholder": "",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
},
{
"field_key": "protocolo_seguridad",
"field_label": "Se cumplio el protocolo de seguridad industrial",
"field_group": "3",
"field_type": "radiobutton",
"field_id": "",
"field_required": "0",
"field_default_value": "",
"field_values": "Si::green;No::red;N\/A::gray",
"field_class": "",
"field_placeholder": "",
"field_maxlenght": "",
"field_minlenght": "",
"field_size": "",
"field_autocomplete": ""
}
],
"fields_groups": [
{
"group_name": "Recepciu00f3n de materiales",
"group_order": "1"
},
{
"group_name": "Ensayos y controles",
"group_order": "2"
},
{
"group_name": "Seguridad y orden",
"group_order": "3"
}
]
}