Ejemplo de panel personalizado: Demostración de Grupos (Etiquetas) y Usuarios

Los paneles personalizados en GpsGate son combinaciones que utilizan recursos de la API REST. Puedes mostrar dinámicamente datos de GpsGate y otros sistemas empresariales directamente en las aplicaciones.

Requisitos

• Habilita el App Builder como se muestra aquí.

Introducción

GpsGate lanza nuevos recursos de API cada mes. (Para ver una lista de los recursos disponibles, por favor visita esta página en tu servidor GpsGate: http://host_name/comGpsGate/api/v.1/test (reemplaza host_name con la dirección IP o el nombre de host de tu servidor)).

En este ejemplo, utilizamos dos de los recursos de la API REST (Grupos (Etiquetas) y Usuarios) para crear un panel combinado. Recomendamos que alojes todos tus paneles personalizados en la carpeta ”\GpsGateServer\IIS\VehicleTracker\CustomPanels” en tu servidor GpsGate. El código fuente del ejemplo que explicamos en este artículo del blog se puede descargar al final de la página.

Los paneles personalizados son páginas HTML simples que se alojan en tu servidor GpsGate. Dado que las aplicaciones de seguimiento y los paneles personalizados están alojados en el mismo servidor bajo el mismo dominio, puedes comunicarte con los recursos de la API REST de GpsGate sin autenticación. En la práctica, la autorización se realiza en segundo plano utilizando la información de tu sesión, que está disponible después de iniciar sesión en tu aplicación.

El Panel Personalizado para Usuarios/Grupos (Etiquetas)

Nota: Este panel personalizado solo es compatible con servidores Onsite. 

En este ejemplo, leemos todos los Grupos (Etiquetas) y Usuarios de una aplicación desde la API REST de GpsGate y los visualizamos en un gráfico generado por una biblioteca de JavaScript de terceros llamada D3. Las operaciones GET de la API REST de GpsGate devuelven objetos JSON en el cuerpo de la respuesta. Para leer y analizar los resultados JSON, utilizamos el lector JSON integrado en la biblioteca D3. Puedes leer más sobre los lectores de datos de D3 aquí. Podemos usar la URL de nuestro panel personalizado para construir una URL al recurso de la API. Nuevamente, esto se debe a que tanto la API como nuestro panel personalizado están bajo el mismo dominio:

En las líneas anteriores, creamos un enlace al recurso de Usuarios utilizando la ubicación actual de la página donde las variables “applicationid” y “pagesize” se analizan desde la cadena de consulta. Esto significa que cuando abrimos esta página HTML desde un script de ventana de VehicleTracker, necesitamos pasar el id de la aplicación y el tamaño de la página como parámetros. Se utilizan comandos similares para crear un enlace al recurso de Grupos (Etiquetas):

El otro parámetro que nuestro panel personalizado acepta a través de la cadena de consulta es “Usuario”. Solo los usuarios con un nombre que incluya el valor de este parámetro son visibles.

El resto de la página trata sobre construir un gráfico y visualizarlo usando la biblioteca D3. Por favor, lee los comentarios en el código fuente para obtener detalles del algoritmo. Ten en cuenta que, como se mencionó antes, no utilizamos ningún método de autorización en la página ya que el sistema recurre a la autorización de sesión cuando no hay una clave de API presente.

Despliegue del panel personalizado

Para desplegar la página combinada, simplemente copiamos la página HTML y todos sus recursos (archivos css, archivos js y bibliotecas de terceros) en la carpeta ”\GpsGateServer\IIS\VehicleTracker\CustomPanels\TagUserPanel”. Ten en cuenta que puedes abrir esta página directamente usando su URL si tienes una sesión (es decir, si has iniciado sesión en una pestaña diferente de tu navegador).

Usando el panel en la aplicación

En este paso, tenemos una página lista, y solo necesitamos abrirla dentro de la aplicación. Hay diferentes maneras de abrir una página personalizada dentro de una aplicación. En este ejemplo, utilizamos tanto el script de clic como el script de ventana para abrir nuestro panel personalizado.

Para crear un script de ventana, sigue estos pasos:

1. En tu aplicación, ve al App Builder.
2. Elige un nombre para la nueva aplicación y selecciona los Roles como  _Administrator.
3. En el segundo paso, (Scripts de Clic) presiona el botón + Script de Clic.
4. Elige WindowsMenu como Tipo y presiona el botón Editar para escribir tu script.
5. Copia y pega el siguiente script y presiona Guardar después.
6. Reemplaza server_address en el script con la dirección real de tu servidor.

El script abre la página especificada y tiene el “applicationid” codificado porque los scripts se crean por aplicación.

Ahora tienes un script de ventana que abre nuestro panel personalizado. Para abrir el panel, selecciona el nombre de tu script desde el menú Ventana. Puede integrarse a un espacio de trabajo, cambiarse a una ventana, moverse y guardarse como cualquier otro panel.

Tenga en cuenta que no es posible incrustar todas las URL como un iframe. Por ejemplo, incrustar una página con una URL HTTP en una página HTTPS no funcionará. Para abrir este tipo de página desde el Rastreador de Activos, consulte la sección Abrir una URL en la Nueva Ventana del Navegador a continuación.

Una alternativa para abrir el panel personalizado es usar el “Menú de Clic Derecho del Usuario”. En este enfoque, podemos enviar el nombre del usuario como el valor de búsqueda predeterminado.

Siga estos pasos para crear un “Menú de Clic Derecho del Usuario”:

1. En su aplicación, vaya al Constructor de Aplicaciones.
2. Haga clic en el botón + App y elija un nombre para la nueva aplicación.
3. En el segundo paso, (Hacer clic en Scripts) presione el botón + Click Script.
4. Elija UserRightClick como Tipo y presione el botón Editar para escribir su script.
5. Copie y pegue el siguiente script y presione Guardar después.
6. Reemplace server_address en el script con la dirección real de su servidor.

El script es muy similar al script que escribimos en el script de ventana. La única diferencia es que enviamos un parámetro de usuario adicional. El valor de este parámetro es el nombre del usuario sobre el que hicimos clic derecho.

El parámetro de nombre se utiliza en nuestra página HTML personalizada para propagar el campo de búsqueda. Ahora tenemos un panel personalizado que podemos abrir eligiendo UserTagsApp desde el menú de Ventanas o haciendo clic derecho sobre un usuario:

Abrir una URL en la Nueva Ventana del Navegador

También puede activar la apertura de una URL específica desde un script en una nueva ventana del navegador. Aquí se explica cómo modificar el script en el ejemplo anterior para abrir una nueva ventana del navegador: