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

pulsamos el icono para mostrar la paleta de gadgets

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ú.

platform-doc-es

Taller OP-Forms, Dashboards, Web Template, Aplicaciones y Realms