Objetivos

Muchos proyectos y productos hacen uso de los Formularios y Dashboards.

Por lo que en este tutorial pretendemos explicar que pasos, componentes y configuraciones hay que realizar para desplegar el template web de plataforma y que muestre en función del rol del usuario unas opciones de menú u otras, estas opciones de menú serán los distintos formularios, dashboards o componentes.

Componentes Necesarios

Template web

Es un proyecto Vue, que incluye:
- Integración nativa con el Identity Manager de la Plataforma.
- Despliegue del distribuible como aplicación web de la Plataforma.
- Uso de los componentes de Aplicación y Realm de la Plataforma para la securización.

Realm

Permite crear dominios de seguridad para tus aplicaciones y utilizar estos dominios desde tus aplicaciones a través de la autenticación y autorización del Identity Manager

Aplicación

El concepto de Proyecto o Aplicación en Plataforma permite crear un Entorno colaborativo en el que los usuarios de plataforma con diferentes roles pueden crear los conceptos de Plataforma agrupados, permitiendo asignar también un dominio de seguridad, una aplicación web, etc., desde un único punto.

Internacionalización

El servicio de internacionalización nos permite tener gestionados de manera centralizada los ficheros de internacionalización para aplicaciones, dashboards y formularios.

Fomularios

El objetivo de esta funcionalidad es soportar dentro de Onesait Platform el desarrollo de aplicaciones Web con un enfoque NoCode. Así, desde el Control Panel podrás crear formularios, asignarles Entidades (y datasources) y hacer navegación entre formularios.

Dashboards

La plataforma permite la creación y visualización de potentes cuadros de mando sobre la información gestionada por ella, consumibles desde diferentes tipos de dispositivos y con capacidades analíticas y de Data Discovery.

Creación de usuarios

El primer paso debería ser crear los usuarios.

Para esto si contamos con una cuenta de administrador de la plataforma podemos crear todos los usuarios accediendo a esta entrada

Sino pues cada usuario debería darse de alta o bien desde la pantalla de login del control panel o a partir de servicios rest del API del control panel de plataforma

Deberiamos crear los usuarios con rol developer o analytics que serán los que produzcan los formularios y dashboards, así como entidades, datasources y demás componentes necesarios.

Para el ejemplo crearemos un usuario asset_dev que será el desarrollador del contenido y luego otros dos usuarios cada uno con un rol distinto para ver como gestionar y mostrar recursos en funcion de los roles estos serán asset_user1 y asset_user2.

Creación de Formularios y Dashboards

Accederemos a la plataforma utilizando el usuario con rol developer en el caso del ejemplo sería asset_dev.

crearemos tres formularios para el ejemplo

employeeInformationList : listado con la información de los empleados

createEmployeeInformation: formulario para la inserción de datos de nuevos empleados

currentReport: Generamos un pequeño informe a partir de los datos de los empleados.

Se puede consultar este enlace para ver como crear los formularios.

¿Cómo trabajar con OP Forms?

y un dashboard kpisEmployees donde se mostrarán unos kpis a partir de la información de los datos de empleados

También dejamos el enlace con la información para poder desarrollar un dashboard desde 0.

Dashboard Engine

Cada uno de estos elementos tienen entidades y datasources asociados.

Creación de los archivos de internacionalización

Crearemos un fichero de internacionalización para el web template y otro u otros para los formularios y dashboard ya que estos se asignan a cada uno de estos componentes de manera independiente podemos crear un fichero para todos los formularios y dashboards o varios y luego utilizarlos bajo nuestro criterio.

Para el ejemplo crearemos un archivo para el web template y otro para el resto.

Los crearemos en ingles y castellano

Creación del Realm

Como se indicaba anterior mente tendremos que crear un Realm para gestionar los permisos a los usuarios por roles.

En primer lugar creamos los roles en este caso para el ejemplo analyst y manager

y acontinuación asignamos a los usuarios los roles.

Estos roles se utilizarán posteriormente en el fichero de configuración centralizado.

Definir un tema personalizado para el web template

Con un usuario con rol administrador en el control panel podemos crear un tema, escribiendo el código css que queramos que se ejecute en el web template.

Para esto accedemos a esta entrada del menú, asignamos un identificador y en el apartado CSS podemos incluir nuestro propio código css.

Generar el archivo de configuración centralizado

El web template necesita un archivo de configuracion centralizado para guardar propiedades tales como el nombre del Realm y del ID del cliente a utilizar, el título de la aplicación, el nombre del archivo de internacionalización, las propiedades del logotipo, etc.

También se podrá definir los menús de navegación (con sus iconos correspondientes) así como los permisos a los diferentes roles del Realm.

Las propiedades más importantes a configurar son:

realmId: el nombre del Realm de Onesait Platform.
clientId: el nombre del cliente del Realm.
secret: el token a utilizar en el cliente del Realm.
title: el nombre que queremos darle al proyecto.
i18n: el nombre del archivo de configuración de idioma.
project: el nombre de la aplicación de configuración centralizada.
productInfo: las propiedades del logotipo del proyecto. Las principales son:

suite: nombre de la suite. Por ejemplo: «suite».
product: el nombre del producto. Por ejemplo: «product name»
productModule: el nombre del módulo del producto. Por ejemplo: «module»
onesait: si se marca, se ocultan las propiedades de product y productModule. Por defecto está en «false».

appVersion: hace referencia a capas de seguridad. Por defecto está a 0.
customizacion: capa de personalización del frontend.

Para mostrar el selector de idiomas, hay que poner a «true» la propiedad «user.showLanguage».
Para cambiar el esquema de colores, se pueden tocar las propiedades CSS de «styles».

navigationAllowed: corresponde al listado de permisos de acceso de los diferentes roles respecto a los componentes del menú lateral (qué ve cada rol del Realm, no cada usuario).

navigation: componentes del menú lateral de la aplicación.

El del ejemplo que estamos construyendo sería así:

[
    {
        "realmId": "asset",
        "clientId": "asset",
        "secret": "Secrettttt",
        "title": "Onesait Platform Tutorial",
        "i18n": "webtemplate_asseti18n",
        "project": "asset_application",
        "productInfo": {
            "suite": "platform",
            "product": "OneOps",
            "productModule": " ",
            "secondary": false,
            "negative": false,
            "simple": false,
            "onesait": false,
            "accentBlock": false
        },
        "pluginsOpts": {
            "filterDatasources": {}
        },
        "appVersion": 0,
        "customization": {
            "showActiveFilters": false,
            "showFilters": false,
            "showFavorites": false,
            "user": {
                "showTheme": false,
                "showLanguage": true
            },
            "styles": {
                "--color-bg-interactive": "#2e4454",
                "--color-border-interactive": "#2e4454",
                "--color-bg-interactive-soft": "#2e4454",
                "--color-bg-hover-2": "#c8e0de"
            }
        },
        "globalFilters": [],
        "initialNavigation": [
            {
                "type": "component",
                "path": "/forms",
                "role": "manager",
                "params": {
                    "formcode": "employeeInformationList-asset_dev"
                },
                "id": "Forms"
            },
            {
                "type": "dashboard",
                "role": "analyst",
                "id": "kpisEmployees"
            }
        ],
        "navigationAllowed": [
            {
                "role": "manager",
                "components": [
                    {
                        "id": "employeeInformationList",
                        "options": {}
                    },
                    {
                        "id": "currentReport",
                        "options": {}
                    }
                ]
            },
            {
                "role": "analyst",
                "components": [
                    {
                        "id": "kpisEmployees",
                        "options": {}
                    }
                ]
            }
        ],
        "navigation": {
            "employeeInformationList": {
                "cssClass": "my-custom-class",
                "langs": {
                    "en": "Employee Information List",
                    "es": "Listado Información Empleados"
                },
                "icon": "file-add",
                "type": "component",
                "componentId": "employeeInformationList",
                "to": "/forms/employeeInformationList-asset_dev/"
            },
            "currentReport": {
                "cssClass": "my-custom-class",
                "langs": {
                    "es": "Informe Actual",
                    "en": "Current Report"
                },
                "icon": "file-filled",
                "type": "component",
                "componentId": "currentReport",
                "to": "/forms/currentReport-asset_dev/"
            },
            "kpisEmployees": {
                "cssClass": "my-custom-class",
                "langs": {
                    "es": "Indicadores Empleados",
                    "en": "Kpis Employees"
                },
                "icon": "review",
                "dashboardId": "kpisEmployees",
                "to": "/dashboard/kpisEmployees"
            }
        }
    }
]

Crear la Aplicación y asociar los recursos

Ahora toca crear la aplicación y asociar los recursos en función de los roles del realm para restringir el acceso a los componentes por rol.

La denominaremos para el ejemplo asset_application

La enlazamos con el Realm creado anteriormente

En este paso ya deberíamos tener creados las entidades, el fichero de configuración centralizado, formularios, dashboards,… para poder darle acceso en la aplicación en funcion de los roles.

Accedemos a los recursos de la aplicación y damos permiso a estos recursos por roles

También habría que incluir las entidades y datasources usados por formularios y dashboards.

Como se puede apreciar se han asignado los formularios al rol manager y el dashboard al rol analyst.

Configurar proyecto web y desplegarlo

Por último, sólo faltaría subir el web template a la Plataforma. Previo a ello, tendrás que configurar un par de archivos con variables de entorno para definir en el proyecto los endpoints a los que apuntarás.

Para ello, con un IDE cualquiera, abre el proyecto Vue y abre estos dos archivos: .env.production y .env.development.local, los cuales se encuentran en la raíz del proyecto.

Ambos archivos son idénticos, así que los cambios de uno se pueden copiar íntegramente en el otro archivo.

Aquí, indica los nombres de los diferentes elementos que tienes:

El proyecto, que corresponde con la Aplicación de Onesait Platform.
El nombre del archivo de internacionalización.
La URL del entorno de la Plataforma.
El nombre del archivo de configuración.
El tipo de autorización y autentificación.

Contenido del fichero env.production

# REQUIRED CONFIGURATION
VUE_APP_APPLICATION = assetapp
VUE_APP_PROJECT = asset_application
VUE_APP_PLATFORM = https://lab.onesaitplatform.com
VUE_APP_PLATFORM_I18n = webtemplate_asseti18n
VUE_APP_PLATFORM_CONFIGURATION = ASSETCONFIGURATION
VUE_APP_LOGIN_TYPE = realm
VUE_APP_AUTH_TYPE = KEYCLOAK
VUE_APP_KEYCLOAK_REALMID = onesaitplatform
VUE_APP_KEYCLOAK_CLIENTID = asset
VUE_APP_THEME = ''

# ADDITIONAL CONFIGURATION
VUE_APP_I18N_LOCALE = es
VUE_APP_I18N_FALLBACK_LOCALE = es

# APP ENDPOINTS
VUE_APP_USERINFO = '/controlpanel/api/users'
VUE_APP_USERINFO_REALM = '/controlpanel/api/realms'
VUE_APP_USERINFO_REALM_ELEMENTS = '/controlpanel/api/projects'
VUE_APP_CONFIGURATION = '/controlpanel/api/configurations/'
VUE_APP_USER_AVAILABLE_APPS = '/controlpanel/api/realms/member'
VUE_APP_APPDS = ''
VUE_APP_USERDS = ''

Descripción de las variables

VUE_APP_APPLICATION = (nombre de la aplicación para cuando se despliega para web/nombre_aplicación)

VUE_APP_PROJECT = ( proyecto/ aplicación donde se asigna el realm y los recursos)
VUE_APP_PLATFORM = https://… (host)
VUE_APP_PLATFORM_I18n = (identificador del fichero internacionalizacion)
VUE_APP_PLATFORM_CONFIGURATION = ASSETCONFIGURATION (fichero configuracion centralizado)
VUE_APP_LOGIN_TYPE = realm (tipo de autenticacion puede ser default, realm)
VUE_APP_AUTH_TYPE = KEYCLOAK (poner KEYCLOAK en caso de KEYCLOAK sino cualquier otro valor o dejar vacío)
VUE_APP_KEYCLOAK_REALMID = onesaitplatform (realmid de keycloak)
VUE_APP_KEYCLOAK_CLIENTID = asset (client id de keycloak)
VUE_APP_THEME = '' (tema de plataforma se recogen los css del tema y se aplican en la aplicación)

La única regla de este archivo de entorno es que los nombres de los elementos deben coincidir exactamente; si algo está en mayúsculas, así tiene que estar en la Plataforma.

Hecho esto, puedes montar el distribuible del proyecto Vue, ya sea con npm:

npm run build

O con yarn:

yarn build

Cuando se termine de montar, mete todo el contenido de la carpeta dist en un archivo ZIP, que será lo que subirás a los proyectos web de la Plataforma.

Una vez subido, tendrás tu activo listo para su uso

Acceder a la aplicación web creada

Tras desplegar la webapp desde el control panel ya sólo nos quedaría acceder a ella y comprobar que para los distintos usuarios se ve tal y como lo hemos configurado por lo tanto accederiamos desde el listado de webapps clicando sobre el

Podemos comprobar que la primera pantalla es la de login, por lo tanto ya vemos que sin haber tenido que crear una aplicación con código tan sólo usando la ya existente y configurandola tenemos una aplicación securizada en este caso contra keycloack.

Si accedemos con el usuario con rol manager asset_user2 El menú que aparece es el definido con dos entradas una con el formulario employeeInformationList y otra con currentReport

Si accedemos con el otro usuario asset_user1 en el menú sólo tendremos una entrada kpisEmployees

Tutorial uso Templates Web con Formularios