Personalización Plataforma - JS
A continuación les presentamos ejemplos de código JavaScript que pueden utilizar para personalizar sus plataformas.
- Personalización de colores en Iconos 3D
- Botones y acciones personalizadas en listados
- Agregar botones en el navbar de la plataforma
- Realizar peticiones a servidores o sitios externos
Personalización de colores en Iconos 3D
A continuación detallamos cómo personalizar los colores de nuestros iconos 3D.
Para iniciar esta personalización se requiere el uso de código JAVASCRIPT para el cual detallamos en este documento, ejemplos de cómo utilizar el mismo para poder cambiar los colores de cada parte del icono.
Funcionamiento del código Javascript.
Podrás aplicar colores a los iconos de los activos, según vayan cambiando las siguientes variables de los mismos como: Velocidad, Orientación, Eventos o Ignición.
Variables que soportan los iconos:
Nuestros iconos 3D soportan que se les envíen por GET las siguientes llaves con su correspondiente valor.
/*
//Para definir los colores de los activos, podemos utilizar las siguientes varibles por GET:
c => COLOR_CHASIS_CABINA
b => COLOR_DE_CAJA
a => COLOR_DE_CAJA2
p => COLOR_PARABRISAS
t => COLOR_LUCES_TRASERAS
f => COLOR_LUCES_FRENTE
alpha => TRANSPARENCIA_DE_ICONO
//Un ejemplo de como se utilizan estas variables puede ser el siguiente.
//Aplanadora 3d original en amarillo
https://plataforma.redgps.com/commons/svg/3d_aplanadora.php?grados=120
//Aplanadora 3d Azul.
https://plataforma.redgps.com/commons/svg/3d_aplanadora.php?grados=120&c=488AC9
*/
Variables que soporta la plataforma para realizar las validaciones y cambios de colores:
Estas son las variables que se pueden utilizar en las condiciones de colores.
speed
ignition
compass
event
device_id
last_report
last_conection
driver_id
external_bat
device_bat
Ejemplo de como utilizar las variables y en condiciones.
//Las variables anteriores se pueden utilizar con condiciones como
speed >= 0
las opciones exitentes son
llave == valor, llave >= valor, llave <= valor, llave > valor, llave < valor
//Las condiciones se puede concatenar con OR o AND
llave == valor && llave1 >= valor1
llave == valor || llave1 >= valor1
Ejemplo completo de cómo aplicar condiciones y cambios de color en base a la velocidad y la ignición de los activos.
Para concluir con la funcionalidad del cambio de colores, debes crear un arreglo javascript similar al que se muestra a continuación donde se definen las condiciones y qué colores se aplicará según cada condición que definas.
var assets_colors = [
{ condition: 'speed == 0 && ignition == 0', values: '?c=D23155&a=D23155&b=D23155' }, //off and stopped
{ condition: 'speed == 0 && ignition == 1', values: '?c=F9DC77&a=F9DC77&b=F9DC77' }, //idle
{ condition: 'speed >= 1 && ignition == 1', values: '?c=71BA51&a=71BA51&b=71BA51' }, //on and in motion
{ condition: 'speed >= 1 && ignition == 0', values: '?c=5D3FD3&a=5D3FD3&b=5D3FD3' }, //towed
];
$(document).ready(function () {
if(_checkIconColors){
_checkIconColors.validateAssetsColors();
}
});
ID de eventos que puedes utilizar para cambiar de color a tus activos:
1 Ubicación
3 Activo Detenido
4 Botón de Pánico ON
7 Desconexión de Bateria
10 Conexión de batería
12 Desconexión de antena GPS
13 Ignición ON
14 Ignición OFF
20 Batería Baja GPS
21 Conexión a la corriente
22 Desconexión de la corriente
25 Impacto
47 Ralentí
56 Ocupado
57 Libre
67 Descarga de cemento
69 Levantamiento de batea
77 Caja Abierta
78 Caja Cerrada
Es importante mencionar que es necesario que tu dispositivo reporte como tal el evento para que pueda cambiar de color. Si necesitas otros ID de eventos, favor de contactar al equipo de Soporte Técnico.
Dónde aplicamos el código Javascript.
Este arreglo de datos en Javascript donde se definieron los colores de los activos según su variables se debe colocar en la sección de personalización de plataformas, esto se realiza en la plataforma Partners en el listado de clientes y luego haciendo click en la acción de los engranajes y luego en la pestaña de "personalización de plataformas".
Como se ve en la imagen anterior, se debe agregar el código javascript de ejemplo en la caja de texto y luego guardar los cambios para que mediante el javascript personalizados los iconos 3D puedan cambiar de color según los cambios de estado que se hayan definido.
Botones y acciones personalizadas en listados
Dentro de la plataforma, usted encontrará listados de tipo tabla, scroll y a ellos se le puede agregar botones personalizados cuyas acciones usted mismo podrá definir.
Ejemplo de los tipos de tabla donde se puede aplicar la personalización
Nota: estos botones personalizados solo se podrán agregar dentro las plataformas siempre y cuando el listado / tabla donde quieran utilizarlo, este utilizando los data tables tipo scroll. No se puede usar para el listado de activos de la plataforma. Para poder utilizar estas funciones deben tener conocimiento de lenguaje javascript. Recomendamos primero probar su código en la consola del navegador y para luego subir este código javascript a su plataforma.
Ejemplo paso a paso
1. Definimos primero el objeto del botón.
var btn = {
campos: ["id"], //object atribute send to function
class: "bt xs green ico", //button class
function: "test_function", //function to execute, its your new function
icon: "i-radio-check", //icon defined on out library
id: "fun1-", //its added to button id atrributte
title: "func1" //its a title of button
}
2. Luego que tenemos el botón definido debemos agregarlo a la tabla. en el ejemplo de abajo lo agregamos a la tabla de lugares.
customPlaform.tableAddAction( '#tbl-lugares', 'addButton', btn );
customPlaform.tables_loaded
4. Debemos ahora crear la función que ejecutará el botón
function test_function( idelement ){
alert('My test_function [idelement:'+idelement+']');
}
Aquí les dejamos el ejemplo de código completo. Para probarlo solo lo deben pegar en la consola y luego ir al listado de lugares donde verán un nuevo botón color verde.
var btn = {
campos: ["id"], //object atribute send to function
class: "bt xs green ico", //button class
function: "test_function", //function to execute
icon: "i-radio-check", //icono de la librería
id: "fun1-", //Nombres + id de elemento.
title: "func1"}
customPlaform.tableAddAction( '#tbl-lugares', 'addButton', btn );
function test_function( idelement ){
alert('My test_function [idelement:'+idelement+']');
}
Así se verá el nuevo botón de color verde que se agregó al listado de lugares de la plataforma.
Agregar botones en el navbar de la plataforma
La función que se describe a continuación le será útil para poder agregar botones en el navbar de la plataforma.
Esta función se encuentra disponible para que se puedan configurar botones desde la personalización de plataformas.
Hay dos opciones de botones que se pueden agregar en la barra: Icono y Botón en el menú principal
Ejemplo de donde se agrega el botón tipo icono en la barra
Observaciones: Los nuevos iconos serán agregados en la parte izquierda de los iconos que se tiene por default en la plataforma.
Botón en menú principal:
Ejemplo de donde se agrega el botón en el menú principal
Observaciones: Los nuevos botones, se insertarán en el menú principal de la plataforma, o en su defecto si se tienen configurados bastantes botones, el nuevo botón se agregara al menú desplegable "más opciones"
Forma de invocar la función addNavbarButton()
En primer lugar, debe ingresar a la plataforma "Partners", una vez dentro, en la opción superior debe dar clic en "Opciones" y entrar en la sección "personalización de plataformas"
Una vez dentro de "personalización de plataformas", debe ingresar a Cliente->Javascript personalizado, una vez dentro se mostrará un text area, donde podrá agregar código JS personalizado.
Para utilizar las funciones de esta herramienta, se debe mandar a llamar a la variable global '_addButton' y enseguida acceder a su atributo/función 'addNavbarButton', la cual recibe como argumentos un objeto con los parámetros requeridos para la creación del botón y la carga correcta de la información.
NOTA: Por cada nuevo botón se debe de llamar a la función "_addButton.addNavbarButton(botonEjemplo)" con el objeto a crear como se mostrara más adelante.
ADVERTENCIA: Para realizar peticiones a sitios externos debe tener habilitado el CORS 'Access-Control-Allow-Origin' en su servidor, de lo contrario, serán rechazadas las solicitudes y no se mostrará ninguna información
Observaciones Generales
Los siguientes obligatorios en cualquier botón que se quiera configurar:
1- load_in_modal
2- target_position
En el caso de usar un Modal, los siguientes atributos son obligatorios:
1- load_in_modal
2- modal_url (En caso de cargar contenido externo)
Todas las opciones de botones, se pueden configurar como tipo "icono" o tipo "menu", dependiendo el caso se deben agregar los atributos y configuración necesarios
Ejemplos de los tipos de botones
1. Botón tipo icono
Definimos primero el objeto con los argumentos necesarios.
ADVERTENCIA: En este caso es obligatorio definir el atributo "target_position" con el valor "icon".
ADVERTENCIA: En este caso es obligatorio definir el atributo "icon_class" con algún valor del catálogo de iconos disponibles en la url http://library.service24gps.com/iconos.html.
OBSERVACIÓN: El siguiente objeto es un ejemplo de un botón tipo "Icono", con el cual se carga un modal con contenido externo.
var myButton = {}; //Debe declarar una variable tipo object para agregar los atributos necesarios
myButton.btn_name = 'Botón Icono'; // String que se mostrara como tooltip (en el caso de botón icono) (OBLIGATORIO)
myButton.load_in_modal = true; // Para que se muestre el contenido en el modal, se debe colocar true (OBLIGATORIO)
myButton.modal_title = 'Contenido Externo De Prueba';// Este es el título que se muestra en la cabecera del modal
myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php',// URL a la que se va a solicitar la petición (OBLIGATORIO)
myButton.modal_width = '30%';// Se define el tamaño del ancho del modal
myButton.modal_height = '50%';// Se define el tamaño de la altura del modal
myButton.css_class = 'myClass';// En caso de querer agregar un estilo personalizado al botón, se puede hacer especificando el nombre de la clase
myButton.target_position = 'icon';// Para definir un botón de tipo icono se debe especificar este campo como "icon" (OBLIGATORIO)
myButton.icon_class = 'i-cog';// Se debe especificar un icono del catálogo de iconos disponibles en http://library.service24gps.com/iconos.html
_addButton.addNavbarButton(myButton); // Cada vez que se cree un nuevo botón se debe de invocar a la variable _addButton y se debe llamar a la función .addNabvarButton(); a la cual se le debe enviar como parámetro el objeto creado
var myButton = {}; //Debe declarar una variable tipo object para agregar los atributos necesarios
myButton.btn_name = 'Botón Icono'; // String que se mostrara como tooltip (en el caso de botón icono) (OBLIGATORIO)
myButton.load_in_modal = true; // Para que se muestre el contenido en el modal, se debe colocar true (OBLIGATORIO)
myButton.modal_title = 'Contenido Externo De Prueba';// Este es el título que se muestra en la cabecera del modal
myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php',// URL a la que se va a solicitar la petición (OBLIGATORIO)
myButton.modal_width = '30%';// Se define el tamaño del ancho del modal
myButton.modal_height = '50%';// Se define el tamaño de la altura del modal
myButton.css_class = 'myClass';// En caso de querer agregar un estilo personalizado al botón, se puede hacer especificando el nombre de la clase
myButton.target_position = 'icon';// Para definir un botón de tipo icono se debe especificar este campo como "icon" (OBLIGATORIO)
myButton.icon_class = 'i-cog';// Se debe especificar un icono del catálogo de iconos disponibles en http://library.service24gps.com/iconos.html
_addButton.addNavbarButton(myButton); // Cada vez que se cree un nuevo botón se debe de invocar a la variable _addButton y se debe llamar a la función .addNabvarButton(); a la cual se le debe enviar como parámetro el objeto creado
En este caso, al ser un botón de tipo Icono, el elemento se agrega a lado izquierdo de los botones que se tienen por default
Se puede configurar un botón de tipo icono con las demás funcionalidades, como:
1- Cargar contenido externo en un modal
2- Cargar contenido externo JSON en un modal
3- Llamar una función de JS
4- Cargar contenido en una nueva ventana.
2. Botón en el menú principal
Definimos primero el objeto con los argumentos necesarios.
ADVERTENCIA: En este caso es obligatorio definir el atributo "target_position" con el valor "menu".
OBSERVACIÓN: El siguiente objeto es un ejemplo de un botón tipo "menu", con el cual se carga un modal con contenido externo JSON.
var myButton = {};
myButton.btn_name = 'Botón Menu';// String que se mostrara como label del botón (OBLIGATORIO)
myButton.load_in_modal = true;
myButton.modal_title = 'Contenido Externo De Prueba';
myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxJSON.php',//URL a la que se va a solicitar la petición (OBLIGATORIO)
myButton.modal_width = '30%';
myButton.modal_height = '50%';
myButton.css_class = 'myClass';
myButton.target_position = 'menu';// Para definir un botón de tipo menú se debe especificar este campo como "menu" (OBLIGATORIO)
_addButton.addNavbarButton(myButton);
var myButton = {};
myButton.btn_name = 'Botón Menu';// String que se mostrara como label del botón (OBLIGATORIO)
myButton.load_in_modal = true;
myButton.modal_title = 'Contenido Externo De Prueba';
myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxJSON.php',//URL a la que se va a solicitar la petición (OBLIGATORIO)
myButton.modal_width = '30%';
myButton.modal_height = '50%';
myButton.css_class = 'myClass';
myButton.target_position = 'menu';// Para definir un botón de tipo menú se debe especificar este campo como "menu" (OBLIGATORIO)
_addButton.addNavbarButton(myButton);
En este caso, al ser un botón de tipo Menú, el botón se agrega al final de los elementos del menú pero, antes del botón, "salir"
NOTA: En el caso de contar con el submenú "Más opciones", el nuevo botón se agregará al final de los elementos del submenú
Se puede configurar un botón de tipo menú con las demás funcionalidades, como:
1- Cargar contenido externo en un modal
2- Cargar contenido externo JSON en un modal
3- Llamar una función de JS
4- Cargar contenido en una nueva ventana
3. Botón para cargar contenido externo en nueva ventana
Definimos primero el objeto con los argumentos necesarios.
ADVERTENCIA: Para esta opción es obligatorio configurar el atributo "href" con el URL de la página que se abrirá en una nueva vista.
ADVERTENCIA: Para esta opción es obligatorio configurar el atributo "href_target" con el parámetro "_blank".
OBSERVACIÓN: El siguiente objeto es un botón de tipo "menu" con el cual al dar clic abre la página https://www.google.com en una nueva ventana
var myButton = {};
myButton.btn_name = 'Cargar Nueva Ventana';
myButton.href = 'https://www.google.com'; // URL de la página que se va a cargar en una nueva ventana (OBLIGATORIO)
myButton.href_target = '_blank';// Se debe declarar de este atributo como '_blank' para abrir una nueva ventana, de no ser así se remplazara la página actual
myButton.css_class = 'myClass';
myButton.target_position = 'menu';
_addButton.addNavbarButton(myButton);
var myButton = {};
myButton.btn_name = 'Cargar Nueva Ventana';
myButton.href = 'https://www.google.com'; // URL de la página que se va a cargar en una nueva ventana (OBLIGATORIO)
myButton.href_target = '_blank';// Se debe declarar de este atributo como '_blank' para abrir una nueva ventana, de no ser así se remplazara la página actual
myButton.css_class = 'myClass';
myButton.target_position = 'menu';
_addButton.addNavbarButton(myButton);
OBSERVACIÓN: En este caso no se utilizan los atributos para un modal dado que se abrirá una ventana independiente del sitio.
4. Botón para ejecutar una función JavaScript
Definimos primero el objeto con los argumentos necesarios.
ADVERTENCIA: Para esta opción es necesario usar el atributo "onclick" y como parámetro se debe asignar la función que desee ejecutar.
OBSERVACIÓN: El siguiente objeto es un botón tipo "menu" con el cual al dar clic sobre el botón muestra un alert.
var myButton = {};
myButton.btn_name = 'Mostrar Alerta';
myButton.css_class = 'myClass';
myButton.onclick = 'alert('Alerta');'; // Se debe especificar la función que se va a ejecutar al dar clic sobre el botón (OBLIGATORIO)
myButton.target_position = 'menu';
_addButton.addNavbarButton(myButton);
var myButton = {};
myButton.btn_name = 'Mostrar Alerta';
myButton.css_class = 'myClass';
myButton.onclick = 'alert('Alerta');'; // Se debe especificar la función que se va a ejecutar al dar clic sobre el botón (OBLIGATORIO)
myButton.target_position = 'menu';
_addButton.addNavbarButton(myButton);
OBSERVACIÓN: En este caso puede o no utilizar los atributos para un modal, depende de si en alguna función se requiere imprimir contenido en el modal.
5. Botón para mostrar en un modal un punto en mapa de Open Streat Maps
Definimos primero el objeto con los argumentos necesarios.
ADVERTENCIA: Para esta opción es obligatorio configurar el atributo "tipo_mapa" con el parámetro "osm":
ADVERTENCIA: Para esta opción es obligatorio configurar el atributo "latitud" con la condenada del punto a mostrar en el mapa
ADVERTENCIA: Para esta opción es obligatorio configurar el atributo "longitud" con la condenada del punto a mostrar en el mapa
var myButton = {};
myButton.btn_name = 'Mapa OSM';
myButton.load_in_modal = true;
myButton.modal_title = 'Ejemplo Mapa OSM';
myButton.modal_width = '50%';
myButton.modal_height = '60%';
myButton.css_class = 'myClass';
myButton.target_position = 'icon';
myButton.icon_class = 'i-cog';
myButton.tipo_mapa = 'osm';// Para utilizar la cartografía de Open Street Maps, se debe especificar este campo como "osm"
myButton.latitud = '19.043806339673186';//Se debe de especificar la latitud del punto a mostrar en el mapa
myButton.longitud = '-98.19825315772778';//Se debe de especificar la longitud del punto a mostrar en el mapa
_addButton.addNavbarButton(myButton);
var myButton = {};
myButton.btn_name = 'Mapa OSM';
myButton.load_in_modal = true;
myButton.modal_title = 'Ejemplo Mapa OSM';
myButton.modal_width = '50%';
myButton.modal_height = '60%';
myButton.css_class = 'myClass';
myButton.target_position = 'icon';
myButton.icon_class = 'i-cog';
myButton.tipo_mapa = 'osm';// Para utilizar la cartografía de Open Street Maps, se debe especificar este campo como "osm"
myButton.latitud = '19.043806339673186';//Se debe de especificar la latitud del punto a mostrar en el mapa
myButton.longitud = '-98.19825315772778';//Se debe de especificar la longitud del punto a mostrar en el mapa
_addButton.addNavbarButton(myButton);
6. Botón para mostrar en un modal un punto en mapa de Google Maps
Definimos primero el objeto con los argumentos necesarios.
ADVERTENCIA: Para esta opción es obligatorio configurar el atributo "tipo_mapa" con el parámetro "google":
ADVERTENCIA: Para esta opción es obligatorio configurar el atributo "latitud" con la condenada del punto a mostrar en el mapa
ADVERTENCIA: Para esta opción es obligatorio configurar el atributo "longitud" con la condenada del punto a mostrar en el mapa
var myButton = {};
myButton.btn_name = 'Mapa Google';
myButton.load_in_modal = true;
myButton.modal_title = 'Ejemplo Mapa Google';
myButton.modal_width = '50%';
myButton.modal_height = '60%';
myButton.css_class = 'myClass';
myButton.target_position = 'icon';
myButton.icon_class = 'i-cog';
myButton.tipo_mapa = 'google';// Para utilizar la cartografía de Google Maps, se debe especificar este campo como "google"
myButton.latitud = '19.043806339673186';//Se debe de especificar la latitud del punto a mostrar en el mapa
myButton.longitud = '-98.19825315772778';//Se debe de especificar la longitud del punto a mostrar en el mapa
_addButton.addNavbarButton( myButton );
var myButton = {};
myButton.btn_name = 'Mapa Google';
myButton.load_in_modal = true;
myButton.modal_title = 'Ejemplo Mapa Google';
myButton.modal_width = '50%';
myButton.modal_height = '60%';
myButton.css_class = 'myClass';
myButton.target_position = 'icon';
myButton.icon_class = 'i-cog';
myButton.tipo_mapa = 'google';// Para utilizar la cartografía de Google Maps, se debe especificar este campo como "google"
myButton.latitud = '19.043806339673186';//Se debe de especificar la latitud del punto a mostrar en el mapa
myButton.longitud = '-98.19825315772778';//Se debe de especificar la longitud del punto a mostrar en el mapa
_addButton.addNavbarButton( myButton );
Ejemplo de un archivo PHP para ser configurado en su servidor y acepte peticiones externas
Recuerde que estos encabezados son importantes que se configuren para poder realizar las peticiones a su servidor correctamente.
<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST");
header("Allow: GET, POST");
$method = $_SERVER['REQUEST_METHOD'];
if($method == "OPTIONS") {
die();
}
?>
Realizar peticiones a servidores o sitios externos
La función que se describe a continuación le será útil para poder realizar peticiones a sus servidores o a sitios externos que lo permitan y poder obtener la información necesaria e implementarla.
Esta función puede ser implementada en los JavaScript personalizados que se implementaron en la personalización de plataformas para que de forma automática pueda ser invocada la solicitud y manipular los datos de la plataforma con lo obtenido.
Existen 2 formas de mostrar la información obtenida mediante la función; ya sea de forma flotante mediante: 'Modal' o mostrarlo en la barra lateral de la plataforma: 'Sidebar'
Ejemplo del modal donde se mostrara el resultado de la petición AJAX externa
Observaciones: El recuadro ROJO marca el título del modal, el recuadro AZUL indica el 'body' del modal donde se puede insertar HTML que llegue de la petición o que se indique en los argumentos al llamar la función, el recuadro NARANJA indica el 'footer' del modal que puede ser editado y modificado mediante la información que se traiga con la petición
Observaciones: El recuadro AZUL indica el 'body' del sidebar donde se puede insertar HTML que llegue de la petición o que se indique en los argumentos al llamar la función, el recuadro NARANJA indica el 'footer' del sidebar que puede ser editado y modificado mediante la información que se traiga con la petición
Forma de invocar la función loadExternalAjax()
Para poder invocar la función debe mandar a llamar la variable global que ya se encuentra habilitada 'customPlaform' y enseguida acceder a su atributo/función 'loadExternalAjax', la cual recibe como argumentos ciertos parámetros para su correcto. funcionamiento.
NOTA: Esta función es asíncrona y posee una promesa de retorno por lo que es posible usar '.then(function(response){})' para poder realizar la manipulación del DOM tanto del 'modal' como del 'sidebar' en base a los datos que se obtengan de esta petición.
OBSERVACIÓN: Tanto el 'modal' como el 'sidebar' comparten el mismo DOM que puede ser personalizado y que su estructura es la que se muestra a continuación; para ingresar datos en cada sección simplemente apunte a los 'ID' de cada elemento genérico.
ADVERTENCIA: Para realizar peticiones a sitios externos debe tener habilitado el CORS 'Access-Control-Allow-Origin' en su servidor, de lo contrario, serán rechazadas las solicitudes y no se mostrará ninguna información.
<div id="bodyResult">
</div>
<div id="footerResult">
</div>
Ejemplo paso a paso
1. Definimos primero el objeto con los argumentos necesarios para la petición.
NOTA: Si se coloca el 'dataType' recuerde que debe tratar el 'response' según el formato especificado y conforme configuro la respuesta en su servidor; si por el contrario, no se coloca ninguno y se omite, el response siempre llegara en formato 'Texto', por lo que deberá tratar esa cadena posteriormente según sus necesidades
let argumentos = {
url: 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php', // URL a la que se va a solicitar la petición (OBLIGATORIO)
type: 'GET', // Tipo de petición: GET / POST (OBLIGATORIO)
dataType: 'JSON', //Tipo de dato de retorno de la petición por DEFAULT es 'JSON'(opcional). Ej.: 'html','JSON', etc.
data: {}, // OBJETO con datos necesarios para la petición, Ej.: {'apiKey':123456789,'token':AbcDeF123456789}; por DEFAULT es {} (opcional)
target: 'sidebar', // String de como se quiere mostrar la data, ya sea en 'modal' ó 'sidebar', son las únicas opciones; por DEFAULT es 'modal' (opcional)
async: false, // booleano que iníca si la petición AJAX va a ser asíncrona o no; por DEFAULT es false (opcional)
title: 'Título de la Ventana del Modal', // Título del Modal que quiera que aparezca, no aplica para 'sidebar', sino pone ninguno por DEFAULT es 'Visualizador'
innerHtml: '<b>PRUEBA HTML</b>', //HTML que se debe cargar primero en el 'body' tanto en el 'modal' como en el 'sidebar'; esto es útil si tiene su propio HTML que quiere manipular una vez se complete la petición y entre en el apartado del 'THEN()'; por default no se inserta ningún HTML (opcional)
heigthModal: '570', //Alto del 'modal' en pixeles, no aplica para el 'sidebar'; por DEFAULT es '570' (opcional)
widthModal: '60%', //Ancho del 'modal' en porcentaje, no aplica para el 'sidebar'; por DEFAULT es '60%' (opcional)
}
2. Mandar a llamar la función:
customPlaform.loadExternalAjax(argumentos).then(function (response) {
// AQUI VA EL CÓDIGO A EJECUTAR DESPUES DE LA PETICIÓN
})
3. Dentro del apartado del 'then()', se puede poner cualquier código js para manipular el DOM del 'modal' o 'sidebar' con la información recibida en 'response'
customPlaform.loadExternalAjax(argumentos).then(function (response) {
$('#bodyResult').append('<div id="divTest">Prueba: ' + response.atributo + '</div>');
})
4. Por último, una vez ya armada la función, la puede implementar en 'Plataformas Personalizadas', en el apartado de 'Cliente' en 'JavaScript Personalizado' para que se ejecute automáticamente cada vez que inicie la plataforma
Aquí les dejamos el ejemplo de código completo. Para probarlo solo lo deben pegar en la consola.
NOTA: En este ejemplo contiene un setTimeout para evitar que al cargar la plataforma lo 'sobre escriba'.
//EJEMPLOS
//HTML
setTimeout(() => {
let argumentos = {
url: 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php',
type: 'GET',
data: {},
target: 'modal',
async: false,
title: 'Título de la Ventana del Modal',
innerHtml: '<b>PRUEBA HTML</b>',
heigthModal: '570',
widthModal: '60%',
}
customPlaform.loadExternalAjax(argumentos).then(function (res) {
$('#bodyResult').append(res);//EN ESTE CASO COMO EL SERVIDOR DEVUELVE TODA LA CADENA DEL HTML, NO ES NECESARIO ACCEDER A UN ELEMENTO, POR LO QUE DIRECTAMENTE SE INSERTA LA RESPUESTA AL DOM
})
}, 5000);
//JSON
setTimeout(() => {
let argumentos = {
url: 'https://plataforma.service24gps.com/loadExternalAjaxJSON.php',
type: 'GET',
dataType: 'JSON',//SE ESPECIFICA QUE LO QUE ESPERA RECIBIR COMO RESPUESTA DEL SERVIDOR ES UN JSON PARA AUTO TRASNFORMAR EL TIPO DE DATO
data: {},
target: 'modal',
async: false,
title: 'Título de la Ventana del Modal',
innerHtml: '<b>PRUEBA HTML</b>',
heigthModal: '570',
widthModal: '60%',
}
customPlaform.loadExternalAjax(argumentos).then(function (res) {
$('#bodyResult').append(res.msg);//EN ESTE CASO COMO EL SERVIDOR DEVUELVE UN OBJETO CON LA LLAVE 'msg' DONDE VIENE EL HTML COMO CADENA, SE PROCEDE A ACCEDER A ELLA PARA INSERTARLA EN EL DOM
})
}, 5000);
Así se agregaría el código en la implementación del Javascript personalizado en la personalización de plataformas.
Ejemplo de un archivo PHP para ser configurado en su servidor y acepte peticiones externas
Recuerde que estos encabezados son importantes que se configuren para poder realizar las peticiones a su servidor correctamente
//EJEMPLO
<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST");
header("Allow: GET, POST");
$method = $_SERVER['REQUEST_METHOD'];
if($method == "OPTIONS") {
die();
}
?>
<html>
<body>
<div>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</div>
</body>
</html>