Ampliación del cliente web

Puede actualizar, modificar y personalizar la presentación del cliente Web mediante su propio código HTML, CSS o JavaScript en el navegador.

Puede aprovechar las ventajas de las extensiones para realizar cambios visuales en el cliente Web y personalizar la aplicación. El cliente Web aloja el código HTML o CSS personalizado, lo que facilita la modificación y la asistencia.

Obtenga más información sobre:

• Adición de una extensión

• Ejemplo de extensión

Adición de una extensión

Antes de continuar, tenga en cuenta que, aunque Host Access for the Cloud permite planificar y utilizar código personalizado, el equipo que generó el propio código debe proporcionar asistencia al mismo.

Al añadir extensiones al cliente Web, las modificaciones están visibles para todos los usuarios y se aplican a todas las sesiones.

Para añadir una extensión

1. Abra <directorio_de_instalación>/sessionserver/microservices/sessionserver/service.yml.

2. Añada extensions_enabled al valor existente de la propiedad SPRING_PROFILES_ACTIVE. Utilice comas para separar los valores.

   Por ejemplo:

   env:
     - name: SPRING_PROFILES_ACTIVE
       value: tls,extensions_enabled
   

3. Reinicie el servidor de sesión.

4. Cree <directorio_de_instalación>/sessionserver/microservices/sessionserver/extensions/client/index.html para que actúe como punto de entrada. Esta es la ubicación en la que se añade el código HTML, CSS o JavaScript (incluidas las referencias a guiones externos).

Facilitar las extensiones sin la autenticación de cliente

Los archivos incluidos en el directorio /client están protegidos mediante el nivel de autenticación seleccionado en MSS.

Para compartir archivos sin necesidad de la autenticación:

Cree <dir_instalación>/sessionserver/microservices/sessionserver/extensions/public/. Coloque el código en ese directorio, llamándolo mediante la URL /public/*.

Ejemplo de extensión

En este ejemplo, una vez que las extensiones estén habilitadas (consulte el paso 2 mostrado anteriormente), puede añadir código CSS y JavaScript personalizado para cambiar el color de fuente de la etiqueta de menú e imprimir texto en la consola de JavaScript.

Creará tres archivos custom.css, custom.js y index.html.

Paso 1

Localice el archivo index.html, que ha creado en el paso 4 mostrado anteriormente. Esta es la ubicación en la que incluirá los archivos de extensión, lo que creará un punto de entrada:

<!-- Define the link to the external style sheet -->
<link href="client/custom.css" rel="stylesheet">
<!-- Define the external JavaScript file -->
<script src="client/custom.js"></script>

Paso 2

Cambie las etiquetas de menú de color negro a naranja:

Cree el archivo custom.css para cambiar el color a naranja:

/* Change link text to Orange */
a span {
    color: #ff5d28;
}

Paso 3

Cree el archivo custom.js para enviar texto a la consola de JavaScript:

//Print message to the JavaScript console
console.log('Hello World!');

Paso 4

Una vez insertados los archivos en su ubicación, <directorio_de_instalación>/sessionserver/microservices/sessionserver/extensions/client/index.html, los resultados deberían presentar un aspecto similar al siguiente:

Y el texto "Hello World" debería estar visible en la console de JavaScript:

Más información:

Documentación de la API de HACloud