Instructivo para diseñar formularios en SIP PLUS

Primera etapa: Definición de formulario

En primer lugar, debe definirse el formulario, en el archivo Entities.scala, que se encuentra en la carpeta SIPMobile\shared\src\main\scala\org\paho\sip\entities

Ahí debe agregarse un “case” como lo tienen todos los demás formularios (comienzan en la línea 234), a modo de ejemplo:

** case object SIPNM extends InputForm(33) **

En esta línea va el nombre del formulario (en este caso SIPNM), la sentencia dice que extiende a InputForm y como parámetro va la cantidad de pantallas. En el ejemplo, el formulario es el SIP Near Miss conocido como «SIP Móvil», con 33 pantallas de ingreso de datos.

En caso de que se trate de un formulario que tiene opción para impresión, la línea de declaración del formulario se escribe de la siguiente forma:

** case object SIPNM2 extends InputForm(9, Some(PrintForm.SIPNMPrint)) **

En este caso, la línea es la correspondiente al SIP NM, con sus 9 pantallas y el formulario de impresión.

Los formularios de impresión también deben ser incluidos en este archivo Entities.scala, dentro del case correspondiente, que comienza en la línea 186. Para el caso del SIP NM, la línea es:

** case object SIPNMPrint extends PrintForm(2, Set(Spanish, English, Portuguese)) **

La línea incluye la cantidad de páginas (en este caso, 2) y los idiomas en los que estará disponible.

Es necesario definir los nombres de los sistemas para cada uno de los idiomas. Cada sistema consta de dos nombres: uno corto y uno largo. El corto es el que se utiliza en el menú de opciones y el largo es el nombre completo del sistema. Aclaración: si estos nombres no se incluyen, el SIP no funciona (queda en «loop» tratando de elegir uno u otro nombre, por lo cual si faltan ambos nombres no sale de ahí). Los nombres de los sistemas antiguamente estaban también en el archivo Entities.scala, pero actualmente se encuentran en el archivo CommonMessages.scala que se encuentra en la carpeta SIPMobile\shared\src\main\scala\org\paho\sip

Ejemplo para el SIP NM en su versión móvil:

'FORM_SIPNM -> Map(Spanish -> "Historia Clínica Perinatal - Móvil", English -> "Perinatal Clinical Record - Mobile", Portuguese -> "Historia Clínica Perinatal - Móvil"),
'FORM_SIPNM_SHORT -> Map(Spanish -> "SIP Móvil", English -> "SIP Mobile", Portuguese -> "SIP Móvil"),

Vemos claramente que se utiliza el nombre «SHORT» para definir el texto que aparece en el menú del SIP para cada idioma

Los formularios de impresión también deben incluirse aquí, ejemplo para el SIP NM:

'FORM_SIPNMPRINT -> Map(Spanish -> "Historia Clínica Perinatal - Impresión", Portuguese -> "Historia Clínica Perinatal - Impresión", English -> "Perinatal Clinical Record - Print"),
'FORM_SIPNMPRINT_SHORT -> Map(Spanish -> "HC Base", Portuguese -> "HC Base", English -> "HC Base"),

Segunda etapa: Agregado de variables

Las variables que se usan en los formularios del SIP Plus se encuentran definidas en el archivo dictionary.js, que se encuentra en la carpeta SIPMobile\shared\src\main\resources\js Las variables en ese archivo están definidas en 3 niveles:

  1. Mother’s fields: variables que son de la madre y no cambian (nombre, etnia)
  2. Pregnancy fields: variables que son de cada gesta (embarazo)
  3. Child fields: variables que son de cada producto (recién nacido) Esta estructura está presente en el archivo (cada nivel está dentro del otro) y debe respetarse. Las variables deben agregarse dentro del nivel correspondiente, de lo contrario luego no se podrá realizar correctamente la entrada de datos. Cada variable se define en un bloque como el que sigue: "0001": { type: TEXT, names: { spanish: "Nombre", english: "Name", portuguese: "Nome", dutch: "HOL_Nombre", french: "Prénom" }, properties: { length: 20 } },

La primera línea tiene el número de variable. Son 4 dígitos y debe ser único. En caso de crear nuevas variables, por favor consultar los rangos de números disponibles. La segunda línea tiene el tipo de la variable (en este caso, texto), veremos los distintos tipos de variable a continuación. Luego viene el apartado “names” en el cual está el nombre de la variable en todos los idiomas disponibles. Finalmente, en el apartado “properties” están las propiedades de la variable, que dependen del tipo de la variable. Veremos ahora para cada tipo las propiedades que se pueden definir. 1. Tipo TEXT y LONGTEXT Son las variables para texto, en este caso la única propiedad es el largo (tamaño) en caracteres Ejemplo: "0003": { type: TEXT, names: { spanish: "Domicilio", english: "Address", portuguese: "Endereço", dutch: "HOL_Domicilio", french: "Adresse" }, properties: { length: 50 } }

2. Tipo NUMERIC Son las variables que toman un valor numérico. Las propiedades aquí son la cantidad de dígitos y los rangos que se usan luego en la descripción de la variable. Ejemplo: "0009": { type: NUMERIC, names: { spanish: "Edad materna", english: "Mother's age", portuguese: "Idade materna", dutch: "HOL_Edad materna", french: "Age mère" }, properties: { length: 2, ranges: [0, 15, 20, 35, 44, 50, 100] } },

3. Tipo ENUMERATION Son las variables con valores excluyentes. Aquí las propiedades son la cantidad de valores diferentes, y la descripción de cada uno de ellos. Ejemplo:

   ` "0038": {`
        `type: ENUMERATION,`
        `names: {`
            `spanish: "Ultimo RN previo",`
            `english: "Last previous neonate",`
            `portuguese: "Último RN prévio",`
            `dutch: "HOL_Ultimo RN previo",`
            `french: "Dernier nouveau-né"`
        `},`
        `properties: {`
            `options: 4,`
            `names: {`
                `spanish: ["no sabe", "< 2500g", "normal", "> 4000g"],`
                `english: ["unknown", "< 2500g", "normal", "> 4000g"],`
                `portuguese: ["não sabe", "< 2500g", "normal", "> 4000g"],`
                `dutch: ["HOL_no sabe", "HOL_< 2500g", "HOL_normal", "> 4000g"],`
                `french: ["ne sait pas", "< 2500g", "normal", "> 4000g"]`
            `}`
        `}`
    `},`

En estas variables, el SIP graba como valor en la base de datos un número correlativo (comenzando en 0) para cada una de las opciones. En este ejemplo, si al digitar la historia se elige la opción “normal”, el SIP grabará un 2 en esa variable.

4. Tipo CODE Son las variables codificadas, que en el ingreso de datos se representan con combos para que se elija la opción adecuada. Las propiedades en estos campos son el tamaño (cantidad de dígitos) y el “type”, que contiene el nombre del campo “tipo” en la tabla aux_codes (base MySQL) que es donde se encuentran las opciones. Ejemplo: "0123": { type: CODE, names: { spanish: "Presentación", english: "Presentation", portuguese: "", dutch: "", french: "" }, properties: { length: 5, type: "Presentacion" } },

5. Tipo BOOLEAN Son las variables que tienen una única opción, que puede ser marcada o no. No tiene propiedades Ejemplo: "0010": { type: BOOLEAN, names: { spanish: "Edad materna <15 o >35", english: "Mother's age <15 or >35", portuguese: "Idade materna <15 ou >35", dutch: "HOL_Edad materna <15 o >35", french: "Age mère<15 ou >35" } },

6. Tipo DATE Son las variables que se utilizan para el ingreso de fechas. No tiene propiedades Ejemplo: "0284": { type: DATE, names: { spanish: "Fecha de nacimiento", english: "Date of birth", portuguese: "Data de nascimento", dutch: "HOL_Fecha de nacimiento", french: "Date naissance" } },

7. Tipo TIME Son las variables que se utilizan para el ingreso de horas. No tiene propiedades Ejemplo:   "0370": { type: TIME, names: { spanish: "Egreso RN - hora", english: "Newborn's discharge - time", portuguese: "Alta RN - hora", dutch: "HOL_Egreso RN - hora", french: "Sortie NN - heure" } },

Tercera etapa: Armado del formulario para ingreso de datos

En este caso se utiliza el archivo views.js, que se encuentra en la carpeta SIPMobile\shared\src\main\resources\js Este archivo está organizado en una estructura en la cual se insertan todos los sistemas con el nombre asignado cuando se crearon como entidades.

Ejemplo: sipnm: { 1: { image: "Section-1.png", fields: { "0001": {left: 115, top: 50, width: 310, height: 55, fontSize: 38}, "0002": {left: 580, top: 50, width: 315, height: 55, fontSize: 38}, "0006": { day: {left: 926, top: 60, width: 88, height: 70, fontSize: 68, paddingRight: 6}, month: {left: 1014, top: 60, width: 88, height: 70, fontSize: 68, paddingRight: 6}, year: {left: 1102, top: 60, width: 88, height: 70, fontSize: 68, paddingRight: 6} }, "pregnancy": { "0003": {left: 130, top: 112, width: 770, height: 55, fontSize: 38}, "0004": {left: 140, top: 185, width: 340, height: 55, fontSize: 38}, "0005": {left: 550, top: 185, width: 350, height: 55, fontSize: 48}, "0009": {left: 938, top: 167, width: 89, height: 70, fontSize: 68, paddingRight: 3}, "0010": {left: 1095, top: 204, radius: 18} } } }, 2: { image: "Section-2.png", fields: {

Para cada pantalla de ingreso de datos va su número, la imagen y luego en el apartado “fields” van todos los campos con los datos de posicionamiento en la pantalla.

Las imágenes se llaman “Section-n.png”, en la cual “n” es el número de pantalla. Tienen que estar ubicadas en una carpeta con el nombre del sistema, bajo SIPMobile\app\src\main\resources\img.
Las imágenes en los distintos idiomas tienen el mismo nombre, porque cada una de las carpetas de los sistemas tiene subcarpetas con el nombre del idioma (english, spanish, portuguese), que es donde el SIP las va a buscar según el idioma elegido. Los campos a pedir en cada pantalla se deben colocar respetando el nivel de cada variable (paciente, pregnancy, child) y dentro de cada sección debemos ponerlas en el orden que se quiera navegar entre ellos. Si el orden en que se piden los datos no respeta la clasificación en niveles (por ejemplo, una variable de nivel “child” se pide antes que una de nivel “pregnancy”), se les puede agregar a los campos un atributo “order” para especificar un orden diferente.

Para los campos de tipo texto o numéricos, los atributos a especificar en cada uno son su posición (left, top) y su tamaño (width, height) y el tamaño de la letra (fontSize). En el caso de los tipos enumerados o booleanos (representados por círculos) se debe especificar la posición (left, top) y el radio del círculo (radius).

Para poder ubicar los campos más fácilmente, el sistema cuenta con una ayuda. Se habilita mediante una propiedad que se llama showCoordinates definida en un archivo llamado Configuration.scala que se encuentra en la carpeta SIPMobile\app\src\main\scala\org\paho\sip\app.

En la línea 41 se encuentra esta propiedad, si la ponemos en true aparece una opción para ayudar al posicionamiento correcto: a

Lo que se debe hacer es posicionar el mouse sobre el control y pulsar el botón derecho para los enumerados o booleanos y el botón izquierdo para todos los demás.
Arrastrando el mouse hasta cubrir el campo por completo, va generando los pixeles de posicionamiento y tamaño. El botón “Copiar” copia los valores elegidos al portapapeles de Windows para que luego sean colocados en el archivo views.js.
Es una gran ayuda para poder posicionar los campos.

Si el formulario que estamos editando es muy grande (por ejemplo, los formularios de impresión) en el mismo archivo de configuración hay otro parámetro para ajustar. En la línea 48, la propiedad minFormDimension tiene por defecto el valor 120 que es el correcto, pero si se le pone por ejemplo 1500, el formulario se ve más grande y es más fácil ubicar los controles.****

Ambas propiedades deben volver luego a sus valores habituales (false y 120, respectivamente) para que al subir los cambios no quede esa ayuda en pantalla.
Para no tener que hacer esto cada vez, es posible enviar un parámetro en el momento de iniciar la versión de desarrollo.

El parámetro se llama debug y si lo mandamos en true, automáticamente activa la ayuda y la dimensión grande de los formularios:

http://localhost:9000?debug=true