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

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

archivo 1.png

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.

image-1652948925548.png

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 );
3. Para saber como se llaman las tablas, podemos ejecutar el siguiente comando. Este retornará los nombres de las tablas y los atributos de las misma
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.

api_botones_2.png

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

Icono:ejemplo_Icono.png

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_boton.png

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.

partners.png

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'

Modal:
api_ajaxExterno1.jpg

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

Sidebar:

api_ajaxExterno2.jpg

Ejemplo del sidebar que sale en plataforma donde se mostrara el resultado de la petición AJAX externa

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.

api_ajaxExterno3.png

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>