NOTAS INICIALES
Cada usuario dispondrá o creara un par de usuarios en la plataforma con rol developer.
Todos los elementos los crearán con uno de esos dos usuarios.
Los identificadores de los distintos componentes los crearemos escribiendo nuestro identificador de usuario para no utilizar los mismos identificadores por ejemplo para un dashboard “dashboardusuario1”.
Es recomendable tener instalado en el ordenador node con la versión 16.20… y un editor como visual studio code.
CREACIÓN FORMULARIOS
Crear dos formularios para la entidad LoadProcessFile.
Formulario listado utilizando plantilla
Formulario edición utilizando plantilla
Una vez creados hacemos las redirecciones de los botones utilizando el código del formulario
En el formulario de edición redirigimos los botones: Cancel y Create al listado
En el formulario del listado redirigimos los botones:
Al formulario de edición
Y dentro del listado en los botones
Al formulario de edición
Al listado
Cambiar en formulario de edición campo status por componente select dejando el mismo property name
Asignar valores predefinidos
Comprobar navegación y los formularios abriendo el listado en modo vista
INTERNACIONALIZACIÓN OP-FORMS
Crearemos una configuración de internacionalización en este apartado:
Marcando el check público para que desde cualquier aplicación se tenga acceso a esta internacionalización y dos idiomas: ES, EN
En el fichero de internacionalización añadiremos estas entradas para castellano
"processId" :"Id Proceso",
"status" :"Estado",
"filePath":"Ruta del Archivo",
"totalParts" :"Partes Totales",
"processed": "Procesados",
"Cancel": "Cancelar",
"Reset": "Resetear",
"Create": "Crear"
Y estas en la pestaña de ingles
"processId": "Process Id",
"status": "Status",
"filePath": "File Path",
"totalParts": "Total Parts",
"processed": "Processed",
"Cancel": "Cancel",
"Reset": "Reset",
"Create": "Create"
CREACIÓN DASHBOARD
Crearemos un dashboard para mostrar la información de las entidades:
LoadProcess, LoadProcessFile y PARTES_RED_TMP
Creación datasources
Identificador + identificador usuario | Consulta | Entidad |
PARTES_RED_TMP | select c.processId, c.idhc, c.nombre, c.numdocumentoipf, c.fecrealalta, c.fecefectoalta, c.fecbajamedica, c.fecaltamedica, c.idempresa, c.brecaida from PARTES_RED_TMP as c | PARTES_RED_TMP |
loadProcessDatasource | select lp.files, lp.id, lp.notes, lp.date, lp.state, count(reg) as partes from LoadProcess as lp inner join PARTES_RED_TMP as pr ON pr.processId = lp.id | LoadProcess |
TotalProcessParts | select count(c) as count, c.processId from PARTES_RED_TMP as c | PARTES_RED_TMP |
LoadProcessFile | select * from LoadProcessFile | LoadProcessFile |
TotalFileProcess | select count(c) as count, c.processId from LoadProcessFile as c | LoadProcessFile |
Creación Dashboard
Pulsamos el botón de crear
y en la configuración llenamos los campos considerando seleccionar este estilo inicial.
Crearemos estos gadgets con sus correspondientes filtros
Primer gadget
Arrastraremos el gadget dataTable
Utilizaremos este datasource: loadProcessDatasource
La información extra será el FilePath
Hay que tener en cuenta marcar en las interacciones Filter para poder usar este gadget para filtrar al resto
Segundo gadget
Utilizaremos el gadget LineChart y el datasource LoadProcessFile
Tercer gadget
Utilizaremos el gadget kpi OBJ y el datasource TotalfileProcess ObjField: count
Este sería un ejemplo de cómo rellenarlo
Cuarto gadget
Utilizaremos el gadget kpi OBJ y el datasource TotalProcessParts ObjField: count
Quinto gadget
gadget dataTable datasource PARTES_RED_TMP
La información extra será el processId
Sexto gadget
Utilizaremos el gadget Pie Chart, datasource LoadProcessFile
FILTROS GADGETS
Filtraremos todos los gadgets a partir del primer gadget.
Esto lo haremos desde el botón de los datalinks
Tomaremos el campo id como origen y el campo processId en el destino
Comprobaremos que si seleccionamos una entrada de la tabla el resto de gadgets quedarán filtrados.
DESCARGA DEL ONESAITPLATFORM WEB TEMPLATE
Accedemos a esta ulr :
https://github.com/onesaitplatform/onesaitplatform-web-template/
Y nos descargamos el código en un zip
Descomprimimos en local este zip.
Instalamos en los ordenadores node para poder compilarlo
https://nodejs.org/en/download/package-manager
Nos instalamos la versión 16.20...
Podemos comprobar en el terminal si se ha instalado node
Escribiendo node –v
Podemos instalar Visual Studio Code para ver el proyecto en el editor
https://code.visualstudio.com/docs/setup/windows
CREAR INTERNACIONALIZACIÓN DEL WEB TEMPLATE
Una vez abierta la carpeta del web template en el editor, vemos que hay una carpeta config.
Esta contiene la internacionalización en formato json de la aplicación en castellano e ingles para crear el elemento de internacionalización en el control panel
Podemos copiarlas en el fichero de internacionalización que creamos para los formularios o podemos crear una configuración nueva de internacionalización.
Recordar ponerlo PUBLICO
Añadir entradas dentro de
breadcrumb--> para el rastro de migas
navigation --> las entradas del menú , sustituir estos elementos de ejemplo
"write the form-code of the form here": "",
"write the dashboard identifier here":""
CREACIÓN APLICACIÓN
Crearemos una nueva aplicación.
Creación Realm
Teniendo en cuenta marcar el check Public client para dar visibilidad pública
Con dos roles por ejemplo ADMIN y ANALISTA
Tras crearlo volveremos a acceder al realm y en asignación de usuarios, asignaremos cada rol a un usuario distinto para ver que dependiendo del usuario que acceda a la aplicación se dispondrá de una configuración de menú por rol.
Creación configuración centralizada
Crearemos un elemento en la configuración centralizada que contendrá la configuración del Template Web de Plataforma.
Accedemos a esta entrada del menú
Creamos una configuración nueva
Abriremos en el web template el fichero centralicedConfiguration.json
Y copiaremos su contenido para luego modificarlo con nuestros datos.
Asignación de recursos en la aplicación por roles
Accedemos a la aplicación que hemos creado desde el menú y luego en la entrada
Asignamos los recursos a los distintos roles
Para nuestra práctica
Compartiremos
Recurso | Tipo de acceso | Rol |
Configuration | VIEW | ANALISTA |
Configuration | VIEW | ADMIN |
Form edición | MANAGE | ANALISTA |
Form listado | MANAGE | ADMIN |
Form edición | MANAGE | ANALISTA |
Form listado | MANAGE | ADMIN |
Dashboard | MANAGE | ADMIN |
Tras añadir el dashboard se unirán a la tabla los datasources que se utilizan en el dashboard.
COMPILAR ONESAITPLATFORM WEB TEMPLATE
Completar el fichero .env.production
NOTA:
En este punto aún no hemos desplegado el web template por lo que no tendremos esta variable
# name of the created web application
VUE_APP_APPLICATION
Lo que haremos será darle el valor del identificador que pondremos al subir el web template en webApps
NOTA
Completar la contraseña del fichero .npmrc
En el terminal en la raíz de la carpeta del template, ejecutaremos
npm install
Si todo ha ido bien
npm run build
Con esto generaremos los ficheros de distribución en la carpeta /dist
Entramos a la carpeta dist y comprimimos su contenido, es decir entramos a la carpeta y seleccionamos todo los ficheros y carpetas generados y estos serán los que se compriman.
Despliegue del web template en WebApps
Accedemos a esta entrada del menú WebApps
Rellenamos los datos teniendo en cuenta que el main file será index.html
Pulsamos el botón upload zip y subimos el zip con el web template.
Comprobaremos si hemos realizado todos los pasos correctamente abriendo en el navegador una ventana de incognito y accediendo a la url donde se expone el web template.
Accederemos con uno de los usuarios asignados a un rol en el Realm.
Si todo ha ido bien podremos navegar por las distintas opciones del menú.
