Podlet-web-captura
VOLVER La característica principal de este podlet es tener documentos diferentes para cada pregunta.
Sumario
Dependencias
Dependencias que necesita el interprete para poder funcionar de cuerdo a la validación de negocio que se necesite.
OCR
Para tal flujo se consume un endpoint del servicio texto del vínculo para ocultar o recortar datos de las imágenes que se reciben en la tarea.
Api google maps
Esta API nos permite obtener la latitud y longitud de la dirección escrita por un ejecutivo. Los nameValue de las preguntas donde se capture cada dato debe incluir:
- street_cw
- outdoorNumber_cw
- suburb_cw
- postalCode_cw
- delegation_cw
- stateCode_cw
- state_cw
- country_cw
Se requiere un KEY para poder utilizarlo.
Api COPOMEX (antes SEPOMEX)
Esta API es un proyecto independiente a SEPOMEX, en donde se busca tener la información actualizada de los códigos postales de todo México.
Aheeva
Este servicio nos permite realizar llamadas telefónicas mientras se tiene la tarea, se cuenta con un widget para realizar esta acción: Widget Aheeva
Componentes
Visor de Documentos
Los documentos pueden ser formato pdf, png, jpg, entre otros. La condición para poder visualizar los pdf es que la url de estos contenga las letras "PDF". Además, en estos documentos se puede utilizar el servicio de ocr que oculta o muestra cierta información del documento.
Para poder visualizar los documentos, un ejemplo de la estructura en el cuestionario debe ser:
{
"documents": [
{
"id": 1,
"url": "",
"type": "COMPROBANTE...",
"custom_document_request": "operation_items=NOMBRE,DOMICILIO&operation=delete"
}
]
}
Donde "documents" es un JSON Array con el tipo de documentos que se quieren visualizar, ya sea por pregunta (se coloca en el cuestionario en el objeto que se requiera dentro de "verifications") o de manera general en todas las preguntas (se coloca en el campo "addData" de un objeto dentro de "generalProperties" cuyo "addType" sea "generalDocuments"). Cada objeto "documents" (correspondiente a un tipo de documento), contiene:
- "id" (OBLIGATORIO), número que indica el orden en que debe aparecer el documento.
- "url" (OBLIGATORIO), url de algún documento que se quiera mostrar sin importar la entrada de datos de la tarea, o bien, se deja vacío para tomar la url de los datos de entrada de la tarea.
- "type" (OBLIGATORIO), es el tipo de documento que se quiere visualizar, en otras palabras, sirve para encontrar en la entrada de datos de la tarea el documento que se requiere. NOTA: Si en la entrada de datos de la tarea hay más de un documento que coincida con el type, se mostrarán todos los coincidentes.
- "custom_document_request" (OPCIONAL), si es diferente de vacío indica que se debe utilizar el servicio de ocr para obtener la imagen, ésta debe haber pasado antes por el servicio que la almacena en la base de multimedia. Lo que se coloque en este campo define el tipo de operación que se debe aplicar a esta imagen, para más información ver: (UUUUUUUUUUUUUUUUUUUURRRRRRRRRRRRRRLLLLLLLLLLLLLL DE SERVICIO OCR) .
Además el formato que se debe seguir en la entrada de datos de la tarea es:
{
"docs": [
{
"url": "https://...",
"type": "COMPROBANTE..."
}
]
}
Donde "docs" es un JSON Array. Cada objeto contiene:
- "url" (OBLIGATORIO), url del documento.
- "type" (OBLIGATORIO), tipo/identificador del documento; si se desea visualizar este documento, este campo debe coincidir con el puesto en el campo "type" del cuestionario.
Tablas
Se pueden crear tablas de n columnas por m filas, aunque se recomienda no exceder de 3 columnas y 5 filas para evitar overflow. Los datos que se pueden colocar en cada celda pueden ser datos de la sesión, escritos por el crowdworker, de la entrada de datos de la tarea, o escritos en el cuestionario. Un ejemplo de la estructura en el cuestionario debe ser:
{
"rows": [
{
"columnA": {
"defaultValue": "NOMBRES"
},
"columnB": {
"type": "session",
"nameValue": "displayName"
},
"columnC": {
"type": "client",
"nameValue": "nombre"
},
"columnD": {
"type": "crowdworker",
"nameValue": "nombre_cw"
}
}
],
"headings": {
"columnA": "DATOS EN CUALQUIER TAREA",
"columnB": "DATOS SESIÓN",
"columnC": "DATOS CLIENTE",
"columnD": "DATOS CAPTURADOS"
}
}
Donde:
- "headings" (OBLIGATORIO), es un JSON que contiene los encabezados de la tabla, al mismo tiempo, los keys se nombran de acuerdo con un nombre propuesto que identifique cada columna.
- "rows" (OBLIGATORIO), es un JSON Array donde cada objeto corresponde a un reglón de la tabla; cada objeto tiene como campos los nombres propuestos en "headings". Cada campo será un JSON que puede contener:
- "defaultValue" (OPCIONAL), el dato en la celda se coloca tal cuál esté escrito.
- "nameValue" (OPCIONAL; OBLIGATORIO SI EXISTE "type"), el dato en la celda se coloca de acuerdo con el valor del campo que se escriba; este campo se buscará en el objeto indicado en "type".
- "type" (OPCIONAL; OBLIGATORIO SI EXISTE "nameValue"), si se escribe "client", se buscará el campo definido en "nameValue" en la entrada de datos de la tarea; si se escribe "crowdworker", se buscará el campo definido en "nameValue" en los datos escritos por el ejecutivo en preguntas anteriores, cuyo "nameValue" dentro de "input" de la pregunta coincida; si se escribe "session", se buscará el campo definido en "nameValue" en los datos de la sesión.
Además, permite realizar una llamada a un servicio (actualmente sólo soporta GET y utiliza los datos de la celda seleccionada) cuya respuesta se puede desplegar a partir de un botón "i". Un ejemplo de la estructura en el cuestionario debe ser:
{
"rows": [
{
"columnA": {
"defaultValue": "CÓDIGO POSTAL"
},
"columnC": {
"type": "client",
"nameValue": "postalCode",
"servicePop": {
"serviceToCall": "https://api.copomex.com/query/get_colonia_por_cp/",
"serviceMethod": "GET",
"serviceData": {
"message": {
"token": {
"defaultValue": "pruebas"
}
},
"serviceToCallEnd": [
{
"type": "client",
"nameValue": "postalCode"
}
]
},
"serviceResponseValue": "response",
"serviceResponseTitle": "Colonias:"
}
},
"columnD": {
"type": "crowdworker",
"nameValue": "postalCode_cw",
"servicePop": {
"serviceToCall": "https://api.copomex.com/query/get_colonia_por_cp/",
"serviceMethod": "GET",
"serviceData": {
"message": {
"token": {
"defaultValue": "pruebas"
}
},
"serviceToCallEnd": [
{
"type": "client",
"nameValue": "postalCode_cw"
}
]
},
"serviceResponseValue": "response",
"serviceResponseTitle": "Colonias:"
}
}
}
],
"headings": {
"columnA": "DATOS EN CUALQUIER TAREA",
"columnC": "DATOS CLIENTE",
"columnD": "DATOS CAPTURADOS"
}
}
Donde además de contener "headings" y "rows", en cada campo de un objeto dentro de "rows" se le puede añadir:
- "servicePop" (OPCIONAL), JSON que contiene los elementos para hacer la llamada a un servicio:
- "serviceToCall" (OBLIGATORIO), url del servicio a llamar.
- "serviceMethod" (OBLIGATORIO), método del servicio a llamar (actualmente sólo soporta GET).
- "serviceData" (OBLIGATORIO), datos para el servicio a llamar.
- "serviceResponseValue" (OPCIONAL), nombre del campo a mostrar como resultado del servicio.
- "serviceResponseTitle" (OPCIONAL), título que se mostrará junto con el resultado del servicio.
- "servicePop" (OPCIONAL), JSON que contiene los elementos para hacer la llamada a un servicio:
Cabe destacar que se puede visualizar la tabla por pregunta (se coloca en el campo "addData" de un objeto dentro de "particularProperties", dentro de "input", cuyo "addType" sea "table") o de manera general en todas las preguntas (se coloca en el campo "addData" de un objeto dentro de "generalProperties" cuyo "addType" sea "table").
Ventanas emergentes
Se coloca un botón que al presionarse despliega una ventana. La url puede conformarse por texto escrito en el cuestionario, así como datos escritos por el ejecutivo, de la sesión, y de la entrada de datos de la tarea.
Para poder visualizar esta característica, un ejemplo de la estructura en el cuestionario debe ser:
{
"url": [
{
"defaultValue": "https://www.google.com/maps/place/"
},
{
"type": "crowdworker",
"nameValue": "street_cw",
},
{
"defaultValue": "+"
},
{
"type": "crowdworker",
"nameValue": "outdoorNumber_cw",
}
],
"label": "VER EN MAPA"
}
Donde:
- "url" (OBLIGATORIO), es un JSON ARRAY donde se incluyen las partes de la url de la ventana emergente, cada parte de la url se construye a partir un objeto compuesto por:
- "defaultValue" (OPCIONAL), la parte de la url es tal cuál esté escrito.
- "nameValue" (OPCIONAL; OBLIGATORIO SI EXISTE "type"), la parte de la url se coloca de acuerdo con el valor del campo que se escriba; este campo se buscará en el objeto indicado en "type".
- "type" (OPCIONAL; OBLIGATORIO SI EXISTE "nameValue"), si se escribe "client", se buscará el campo definido en "nameValue" en la entrada de datos de la tarea; si se escribe "crowdworker", se buscará el campo definido en "nameValue" en los datos escritos por el ejecutivo en preguntas anteriores, cuyo "nameValue" dentro de "input" de la pregunta coincida; si se escribe "session", se buscará el campo definido en "nameValue" en los datos de la sesión.
- "label" (OPCIONAL), etiqueta del botón que despliega la ventana emergente, si no se incluye, el valor default es "INGRESAR".
Se puede añadir esta característica por pregunta (se coloca en el campo "addData" de un objeto dentro de "particularProperties", dentro de "input", cuyo "addType" sea "popWindow") o de manera general en todas las preguntas (se coloca en el campo "addData" de un objeto dentro de "generalProperties" cuyo "addType" sea "popWindow").
Botones para llamar servicios
Muestra un botón que al presionarse hace la llamada a un servicio definido, existe la posibilidad de mostrar la respuesta en un modal. Actualmente sólo soporta servicios con método POST.
Para poder visualizarlo, un ejemplo de la estructura en el cuestionario debe ser:
{
"serviceToCall": "https://layer-api-web-service.autonomation.calidad-architect.com/v1/api/get_afi_info",
"serviceMethod": "POST",
"serviceData": {
"solicitudId": "solicitudId"
},
"serviceResponseViewer": true,
"serviceResponseValue": "detalle",
"serviceResponseTitle": "HISTORIAL DE ERRORES DEL CLIENTE",
"label": "HISTORIAL DE ERRORES"
}
Donde:
- "serviceToCall" (OBLIGATORIO), url del servicio a llamar.
- "serviceMethod" (OBLIGATORIO), método del servicio a llamar (actualmente sólo soporta POST).
- "serviceData" (OBLIGATORIO), datos para el servicio a llamar, los campos que se coloquen los busca en el data_received de la tarea y los reemplaza, por ejemplo si el data_received incluye un campo que se llame solicitudId cuyo valor es 1234, entonces los datos que se enviarían serían:
{
"solicitudId": "1234"
}
- "serviceResponseViewer" (OPCIONAL), en caso de "true" mostrará la respuesta del servicio en un modal.
- "serviceResponseValue" (OPCIONAL), nombre del campo a mostrar como resultado del servicio en caso de tener "true" en "serviceResponseViewer".
- "serviceResponseTitle" (OPCIONAL), título que se mostrará junto con el resultado del servicio en caso de tener "true" en "serviceResponseViewer".
- "label" (OPCIONAL), etiqueta del botón que realiza la llamada al servicio indicado, si no se incluye, el valor default es "ENVIAR".
Por otra parte, si se desea que el serviceData incluya datos del data_result que se va formando en la tarea, o datos de session, o datos estáticos, un ejemplo de la estructura en el cuestionario puede ser:
{
"serviceToCall": "https://layer-api-web-service.autonomation.calidad-architect.com/v1/api/get_afi_info",
"serviceMethod": "POST",
"serviceData": {
"message": {
"tel": {
"type": "client",
"nameValue": "telefono"
},
"ejecutivo": {
"type": "session",
"nameValue": "worker_uuid"
},
"seleccion": {
"type": "crowdworker",
"nameValue": "nameValuePreguntaAnterior"
},
"claves": {
"type": "client",
"nameValue": [
"clave1",
"clave2"
]
},
"mensaje": {
"defaultValue": "Es un mensaje genérico."
}
}
},
"serviceResponseViewer": true,
"serviceResponseValue": "detalle",
"serviceResponseTitle": "HISTORIAL DE ERRORES DEL CLIENTE",
"label": "HISTORIAL DE ERRORES"
}
Donde el campo que cambia es:
- "serviceData" (OBLIGATORIO), datos para el servicio a llamar. Contiene un campo llamado message, el cuál es un json con los campos necesarios para la llamada al servicio. Cada campo tiene como valor un json de configuración, el cuál se compone de:
- "defaultValue" (OPCIONAL), el valor es tal cuál esté escrito.
- "nameValue" (OPCIONAL; OBLIGATORIO SI EXISTE "type"), el valor se coloca de acuerdo con el valor del campo que se escriba; este campo se buscará en el objeto indicado en "type".
- "type" (OPCIONAL; OBLIGATORIO SI EXISTE "nameValue"), si se escribe "client", se buscará el campo definido en "nameValue" en la entrada de datos de la tarea (data_receive); si se escribe "crowdworker", se buscará el campo definido en "nameValue" en los datos escritos por el ejecutivo en preguntas anteriores (data_result), cuyo "nameValue" dentro de "input" de la pregunta coincida; si se escribe "session", se buscará el campo definido en "nameValue" en los datos de la sesión del ejecutivo. Además, nameValue puede ser un arreglo que contenga los keys de múltiples campos dentro de un type (ya sea session, client o crowdworker).
Se puede añadir esta característica por pregunta (se coloca en el campo "addData" de un objeto dentro de "particularProperties", dentro de "input", cuyo "addType" sea "serviceButton") o de manera general en todas las preguntas (se coloca en el campo "addData" de un objeto dentro de "generalProperties" cuyo "addType" sea "serviceButton").
SpeechText
Coloca un área con texto que se puede estilizar con etiquetas HTML, además el texto puede incluir datos escritos por el ejecutivo, de la sesión, y de la entrada de datos de la tarea.
Para poder visualizarlo, un ejemplo de la estructura en el cuestionario debe ser:
{
"speechText": "Sr(a)<strong> ______ </strong>, le confirmo el monto que me proporcionó, es: <br><br><strong>$ ______ </strong>. <br><br> Gracias por su colaboración, le atendió <strong> ______ </strong>, de Apoyo Financiero.",
"dataToReplace": [
{
"type": "client",
"nameValue": "nombre"
},
{
"type": "crowdworker",
"nameValue": "salario_cw"
},
{
"type": "session",
"nameValue": "displayName"
}
],
"strForReplacement": "______"
}
Donde:
- "speechText" (OBLIGATORIO), es el texto que se colocará; aquí es donde se pueden colocar etiquetas HTML.
- "strForReplacement" (OPCIONAL; OBLIGATORIO SI EXISTE "dataToReplace"), es una cadena que se busca en "speechText", en caso de encontrar coincidencias, éstas serán sustituidas con los elementos en "dataToReplace".
- "dataToReplace" (OPCIONAL; OBLIGATORIO SI EXISTE "strForReplacement"), es un JSON Array, donde cada objeto corresponde a una coincidencia a sustituir en "speechText", cada uno se compone de:
- "nameValue" (OBLIGATORIO), texto sustituto de acuerdo con el valor del campo que se escriba; este campo se buscará en el objeto indicado en "type".
- "type" (OBLIGATORIO), si se escribe "client", se buscará el campo definido en "nameValue" en la entrada de datos de la tarea; si se escribe "crowdworker", se buscará el campo definido en "nameValue" en los datos escritos por el ejecutivo en preguntas anteriores, cuyo "nameValue" dentro de "input" de la pregunta coincida; si se escribe "session", se buscará el campo definido en "nameValue" en los datos de la sesión.
Se puede añadir esta característica por pregunta (se coloca en el campo "addData" de un objeto dentro de "particularProperties", dentro de "input", cuyo "addType" sea "speechTextArea") o de manera general en todas las preguntas (se coloca en el campo "addData" de un objeto dentro de "generalProperties" cuyo "addType" sea "speechTextArea").
Pestañas
Permite agregar pestañas con contenidos diversos. Los contenidos pueden ser Visores de documentos, Tablas, SpeechText, Ventanas embebidas.
Para poder visualizarlo, un ejemplo de la estructura en el cuestionario debe ser:
{
"properties": [
{
"tab": 1,
"label": "TÍTULO DE LA PESTAÑA",
"addData": {
...
},
"addType": "..."
}
]
}
Donde:
- "properties" (OBLIGATORIO), es un JSON Array donde cada objeto corresponde a una pestaña. Este objeto se compone por:
- "tab" (OBLIGATORIO?), es un identificador (número) de la pestaña, sirve para ordenarlo o para saber a qué pestaña se refiere (no lo muestra al ejecutivo).
- "label" (OPCIONAL), es el título o etiqueta que llevará la pestaña para ser identificada por el ejecutivo en el front.
- "addData" (OPCIONAL; OBLIGATORIO SI EXISTE "addType"), corresponde al "addData" del contenido que contendrá la pestaña.
- "addType" (OPCIONAL; OBLIGATORIO SI EXISTE "addData"), corresponde al "addType" del contenido que contendrá la pestaña.
Este componente se añade de manera general en todas las preguntas (se coloca en el campo "addData" de un objeto dentro de "generalProperties" cuyo "addType" sea "multiTab"); aunque existe la posibilidad de seleccionar sólo la(s) pestaña(s) que se desea(n) mostrar si se coloca la siguiente estructura por pregunta (en el campo "addData" de un objeto dentro de "particularProperties", dentro de "input", cuyo "addType" sea "showMultiTab"):
{
"selectTab": [
1,
2
]
}
Donde:
- "selectTab" (OBLIGATORIO), es un Array de números que corresponden a los identificadores de las pestañas (campo "tab" de la pestaña que se definió) que se mostrarán.
Características adicionales
Código
Content
Otros componentes
DataTable
ImageSelector
PopupWindow
Características
Las características del podlet dependen del cuestionario, sin embargo, el podlet interpreta cada sección del cuestionario de manera distinta.
Interpretación del 'inputType'
inputType: empty
No hace acción alguna.
inputType: list
Muestra un dropdown cuyas opciones se toman del json de códigos. El valor que se encuentre en "nameValue" se busca en el json de códigos.
inputType: inputText
Coloca un componente de tipo input para que el ejecutivo pueda escribir. Si se coloca un valor en "nameValue" que coincida con algún dato de entrada de la tarea (dataObject), el input se inicializará con el dato encontrado.
inputType: labelText
Si encuentra algún dato de entrada de la tarea (dataObject) que coincida con el valor en "nameValue", imprimirá dicho dato; en caso contrario, no mostrará nada. Este es el inputType DEFAULT.
inputType: panel
Divide la pantalla central en 2 secciones (superior e inferior) para poder colocar diferentes documentos.
inputType: date
Muestra un componente que permite desplegar un calendario y seleccionar una fecha.
inputType: inputTextRestricted
Al igual que el inputType: inputText, coloca un componente de tipo input para que el ejecutivo pueda escribir. La diferencia es que no se puede hacer copy/paste y los caracteres se muestran como asteriscos.
