Comportamientos

Introducción

Ésta propiedad permite, mediante información de la BD, realizar modificaciones en la renderización y/o funcionalidad del formulario. Teniendo en cuenta los valores de sus campos.

La misma recibe un arreglo de comportamientos, como por ejemplo:

[
  {
    type: 'navigator',
    icon: 'mdi-arrow-right',
    confirmation: 'Se va a redirigir a otra página, está de acuerdo?',
    attrs: {color: '#12d2f1', fab: true, small: true},
    id_resolver: '/example?nombres_seleccionados=##',
    tooltip_text: 'navegar',
    field_id: '1',
    position: {top: true, left: false},
    visible:true
  },
  {
    type: 'fcn_executer',
    icon: '',
    component_text: 'Guardar',
    confirmation: 'Se va a enviar el formulario, está de acuerdo?',
    attrs: {color: 'blue'},
    fcn_click: 'fn_form',
    args_fcn_click: ['arg1'],
    tooltip_text: 'Guardar formulario',
    validation: true,
    position: {top: false, left: false},
    visible:true
  },
  {
    type: 'modal',
    icon: 'mdi-plus',
    attrs: {color: 'blue', fab: true, small: true},
    tooltip_text: 'Agregar entrada',
    field_id: '2',
    titulo:'Agregar entrada',
    id_resolver:'/example?nombres_seleccionado=##',
    position: {top: true, left: false},
    visible:true
  }
]

⚠️

Importante:

Para que los comportamientos se puedan utilizar es necesario agregar la propiedad id a cada uno de los campos.

Ejemplo:

[
    {
      "type": "IrTextField",
      "props": {
        "id": "1",
        "readonly": false,
        "label": "Input text de prueba",
        "hint": "",
        "value": "",
        "required": true,
        "pattern": "",
        "placeholder": "",
        "title": "",
        "visible": true,
        "width": 2
      }
    }
]

En caso contrario se loggea un error.

Propiedades

Propiedad	Tipo	Útil para	Descripción
type	String	Todos	Aquí se explican los posibles tipos y sus estructuras
attrs	Object	Todos	Contendrá los atributos que se le quieran asignar al botón renderizado. Por defecto los botones tendrán las propiedades fab y small setteadas en true, esto hará que los mismos tengan forma circular y tamaño pequeño respectivamente. El botón contiene la propiedad textStyle para asignar estilos al texto del botón que deberá pasarse dentro de los attrs del comportamiento.
Icon	String	todos	Nombre del icono que se quiere renderizar dentro del botón de comportamiento. El listado de íconos se puede obtener de Íconos.
icon-attrs	Object	todos	Atributos que se aplicarán al icono del botón del comportamiento. Los mismos pueden verse aquí. Por default se aplicara {color: white}
fcn_click	String	fcn_executer	Nombre de la función que se quiere ejecutar.
args_fcn_click	Array	fcn_executer modal	Argumentos enviados en la función detallada en fcn_click, o en caso de modal en la fn_icl_794256_consulta_componentes. Siempre se enviarán como un arreglo hecho string.
dialogAttrs	Object		modal	Atributos que se aplicaran al v-dialog. Por ejemplo {persistent: true}
tooltip_text	String	Todos	Texto que aparece cuando se superpone el mouse sobre el botón renderizado.
field_id	String / Array	modal navigator fcn_executer	Nombre del campo o de los campos de los cuales se va a tomar su valor para enviar como argumento de fcn_click (se armará un arreglo junto con args_fcn_click que será enviado como string) en caso de ser tipo fcn_executer; se navegará a la URL detallada en id_resolver reemplazando ## (debe contener ##, en caso de no tenerlo, no se envía) en caso de ser tipo navigator; o se incluirá en el id_resolver reemplazando ## en caso de ser modal. En el caso que field_id sea de tipo Array. Los valores de los campos que contengan los ids detallados en esta propiedad se enviarán de dos formas diferentes dependiendo el valor de id_resolver: -En el caso que id_resolver contenga ##, se reemplazará por los valores de los campos. -En el caso que id_resolver contenga #field_id1#, #field_id2# donde field_id1 y field_id2 son el primer y el segundo valor del array dettalado en la propiedad field_id, los mismos se reemplazarán con sus valores correspondientes. Ejemplo: #field_id1# se reemplazará por el valor del campo con id field_id1.
titulo	String	modal	Título del dialog que se abrirá.
id_resolver	String	modal navigator	id_resolver que se pasará a IrComponentResolver, sirve para identificar desde donde se está consultando a dicha función. Más detalles en propiedades de ComponenResolver
position	Object / Array	todos	Determina en qué esquina del formulario se ubica el botón correspondiente al comportamiento. Puede tener más de una posición (array), en ese caso el comportamiento se renderizará la cantidad correspondiente de veces y todos ellos tendrán la misma funcionalidad. Tiene la siguiente estructura: position: { top: true, left: false } // O también position: [ { top: true, left: false }, { top: false, left: false } ] las posiciones válidas son left, top y full-width. full-width tiene prioridad sobre las demás, en ese caso tomará el ancho total del formulario situandosé en la parte inferior del mismo.
validation	Boolean	fcn_executer	Determina si para ejecutarse la función detallada en fcn_click van a tener que estar validados o no los campos del formulario.
component_text	String	todos	Texto que aparecerá dentro del botón correspondiente al comportamiento.
confirmation	String	todos	Texto que aparecerá en un IrDialog el cual aparecerá cuando se hace click sobre el botón de comportamiento. El IrDialog contendrá un botón de cancelar y otro de confirmar. Si se selecciona confirmar se ejecutará la acción correspondiente al comportamiento esperado, en caso contrario se cerrará el IrDialog. En caso de que no se envíe esta propiedad, no aparecerá el IrDialog.
visible	Boolean	todos	Determina si se renderizará el comportamiento, en false el mismo no se renderizará. Esta propiedad por defecto tiene el valor true, es decir que se renderizará en comportamiento si la misma no se envía.
pre_api	Object	modal navigator fcn_executer	Determina las consultas que se realizarán antes de que el comportamiento cumpla su función. Aquí se detalla su estructura.
post_api	Object	fcn_executer	Determina las consultas que se realizarán luego de que el comportamiento cumpla su función. Aquí se detalla su estructura.
lazy-validation	Boolean	todos	Determina si el componente no se deshabilita cuando el formulario es inválido. (true no se deshabilita)
modal-position	String	modal	Determina la posición en la que se abrirá el dialog. Las mismas pueden ser left, center, right, top, bottom y fullscreen

Pre_api / Post_api

Propiedades de pre_api / post_api

Propiedad	Tipo	Descripción
config	Object	Define las configuraciones posibles de las consultas que se realizarán. Es posible configurar el mensaje a mostrar cuando las consultas están en proceso con el key loading_message (El mensaje se mostrará en el Toast, eliminando cualquier notificación previa que se esté mostrando o pendiente a mostrarse) y determinar si las consultas se realizan sincrónicamente o asincrónicamente configurando la propiedad sync en true o false.
requests	Array	Contendrá las consultas a realizar. Las mismas tienen la siguiente estructura requerida: {params: {id_proceso: 'exampleProcess'}, url: 'https://example.com'}. Donde params son los parámetros de la consulta y el parámetro id_proceso es requerido. Y url es la URL a la cual se le realizará la consulta.

Ejemplo de pre_api / post_api

Debe tener la siguiente estructura:

{
  "config": {
    "sync": true,
    "loading_message": "Cargando..."
  },
  "request": [
    {
      "url": "https://example.example.com.ar/api/v1/example",
      "params": {
        "id_proceso": "exampleProcess"
      }
    },
    {
      "url": "https://example2.example2.com.ar/api/v1/example2",
      "params": {
        "id_proceso": "exampleProcess2"
      }
    }
  ]
}

Tipos

Nombre	Acción	Estructura
fcn_executer	Genera un botón que al clickearse ejecuta fcn_click enviando como parámetro un arreglo con args_fcn_click y el array correspondiente a todos los campos del formulario. Es importante aclarar que previo a la ejecución de esta función, se ejecutará otra consulta. Nombre de la función: `fn_icl_794256_parametros_funciones`. Parámetros: `id_usuario`, `id_resolver`, arrelgo de todos los campos y `args_fcn_click`. Luego se ejecutará la función especificada en `fcn_click` con la respuesta de `fn_icl_794256_parametros_funciones` enviada como parámetro (JSON). La respuesta esperada se detalla aquí.	{ type: 'fcn_executer', icon: '', component_text: 'Guardar', confirmation: 'Se va a enviar el formulario, está de acuerdo?', attrs: {color: 'blue'}, fcn_click: 'fn_form', args_fcn_click: ['arg1'], tooltip_text: 'Guardar formulario', validation: true, position: {top: false, left: false} }
modal	Genera un componente que al clickearse abre una ventana modal que dentro tiene un IrComponentResolver. En caso de que id_resolver contenga los símbolos ##, los mismos se reemplazarán por el valor del campo con id field_id y se le enviará al IrComponentResolver a través de la propiedad id_resolver.	{ type: 'modal', icon: 'mdi-plus', attrs: {color: 'blue', fab: true, small: true}, tooltip_text: 'Agregar entrada', field_id: '2', titulo:'Agregar entrada', id_resolver:'/example?nombres_seleccionado=##', position: {top: true, left: false} }
navigator	Genera un botón que al clickearse navegará hacia el id_resolver que tenga como valor la propiedad id_resolver. En caso de que id_resolver contenga los símbolos ##, los mismos se reemplazarán por el valor del campo con id field_id. Es necesario recalcar que id_resolver se pasará a formato URL, por lo tanto, por ejemplo, los espacios se transformarán a %20. En caso de que el id_resolver, haciendo los reemplazos de los ## correspondientes, tenga como resultado un valor que sea una URL absoluta (con prefijo http:// o https://), la redirección se hará a dicha URL (fuera del sitio actual) y en la misma pestaña.	{ type: 'navigator', icon: 'mdi-arrow-right', confirmation: 'Texto de confirmación', attrs: {color: '#12d2f1', fab: true, small: true}, id_resolver: '/example?ids_seleccionados=##', tooltip_text: 'navegar', field_id: '1', position: {top: true, left: false} }

Respuesta fcn_executer

Nombre	Descripción
message	mensaje que se mostrará en un IrToast.
color	Color que tendrá el IrToast. Esta propiedad se ignora en caso de que no se envíe la propiedad detallada anteriormente message.
to	Propiedad de tipo Object o string. Si es string: Determina la ruta a la cual se va a redirigir. Si se desea hacer foco en un campo especifico se deberá establecer el query string focus valorizado con valor de la prop id del campo a enfocar. Por ejemplo ?focus=campo_nombre. Si es object: Debe incluir una propiedad id_resolver que determina el id_resolver a navegar. Pueden enviarse las propiedades type que determina el tipo de navegación hacia el nuevo resolver, sus valores posibles son modal y navigator siendo este último el valor por defecto. En caso de ser modal también puede enviarse una propiedad titulo que determinará el título de la ventana modal.
refresh	Determina si el componente IrForm va a volver a renderizarse.
time	Determina el tiempo en milisegundos que el componente IrToast va a estar visible. Por defecto tendrá un valor de 7000.
top	Determina si el componente IrToast va a estar en la parte superior de la pantalla. Por defecto será true.
right	Determina si el componente IrToast va a estar en la parte derecha de la pantalla.
left	Determina si el componente IrToast va a estar en la parte izquierda de la pantalla.
bottom	Determina si el componente IrToast va a estar en la parte inferior de la pantalla.
centered	Determina si el componente IrToast va a estar en el centro de la pantalla.
refreshParent	Determina, en caso de que el IrForm se encuentre dentro de un IrDialog, si el componente padre (el que abrió del IrDialog) va a refrescarse.
icl_mailing	Determina una estructura para definir una serie de emails a enviarse al completarse el llamado a la función definida en fcn_click. Esta propiedad se compone de de un objeto con una estructura definida que será desarrollada Aquí.

{
 message: 'Example',
 color: 'example|#cecece|green',
 to: '/example',
 refresh: false,
 time: 7000,
 top: true
}

Fcn_executer Mailing

La propiedad de respuesta icl_mailing espera una estructura similar a la siguiente. Cabe recalcar que la funcionalidad de ICL mailing es una funcionalidad anclada y especifica de BFLUID. Debido a que la misma va a consultar los datos del servidor SMTP en dicho servicio.

{
  data: [
    {
      recipient: "example@example.com",
      subject: "example mail",
      html: "<p>Hello my friend John!<p>",
      text: "Hello my friend John!",
      additional_information: {
        id: 1
      }
    },
    {
      recipient: "example2@example.com",
      subject: "example mail",
      html: "<p>Hello my friend Jane!<p>",
      text: "Hello my friend Jane!",
      additional_information: {
        id: 2
      }
    }
  ],
  error: {
    message: "Mails failed to send",
    color: "red",
    time: 7000,
    top: true
  },
  success: {
    message: "Mails sent correctly",
    color: "green",
    time: 7000,
    top: true
  },
  fcn_log: "fcn_save_mail_state"
}

Donde las propiedades son:

Nombre	Tipo	Descripción
data	Array	Array que define los datos de los emails que deben ser enviados. Estos serán definidos como objetos, donde se deberá definir: recipient: Receptor del correo. subject: Asunto del correo. html: Version en HTML del cuerpo del correo. text: Versión en texto plano del cuerpo del correo. additional_information: Información adicional que será enviada en la función de BD definida en la propiedad fcn_log, usada por ejemplo para identificar cada uno de los correos.
error	Object	Objeto que define el comportamiento de el Toast que se mostrará informando los casos de error en el envío de correos. Las propiedades aceptadas son: message: (string) Mensaje que se concatenará con la cantidad de emails erroneos. Por ejemplo message: 'emails no enviados' entonces, en el caso de que dos correos no se hayan enviado correctamente, el Toast mostrará: "2 emails no enviados" color: (hexadecimal o string) Color del Toast a mostrar, Ej: #666666. time: (integer) tiempo en milisegundos que se mostrará el Toast antes de cerrarse automáticamente. {position}: (Boolean) que define la posicion donde aparecerá el Toast, Por ejemplo top: true, left: true, el Toast se mostrará arriba a la izquierda.
success	Object	Objeto que define el comportamiento de el Toast que se mostrará informando los casos de de envío correcto de correos. Las propiedades aceptadas son: message: (string) Mensaje que se concatenará con la cantidad de emails enviados correctamente. Por ejemplo message: 'emails enviados correctamente' entonces, en el caso de que dos correos no se hayan enviado correctamente, el Toast mostrará: "2 emails enviados correctamente" color: (hexadecimal o string) Color del Toast a mostrar, Ej: #666666. time: (integer) tiempo en milisegundos que se mostrará el Toast antes de cerrarse automáticamente. {position}: (Boolean) que define la posicion donde aparecerá el Toast, Por ejemplo top: true, left: true, el Toast se mostrará arriba a la izquierda.
fcn_log	String	Función de BD a la que se llamará para informar el estado de el envío de emails, enviando como parámetro de la función un Array, donde por cada email se enviará un objeto que contiene: { response: enviado en caso de envío correcto, con la información del envío. additional_information: objeto de `additional_information` enviada en la estructura de cada correo a enviar. recipient: `recipient` enviada en la estructura de cada correo a enviar. subject: `subject` enviada en la estructura de cada correo a enviar. }

Ejemplo