# 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

Esta funcionalidad te permite personalizar los colores de nuestros iconos 3D que se muestran en la plataforma, facilitando la identificación visual de los Activos en el mapa.

La configuración se realiza mediante código JavaScript, el cual permite definir reglas dinámicas para cambiar los colores según el estado o comportamiento de los Activos.

##### **¿Cómo funciona?**

Puedes modificar los colores de los iconos en función de distintas variables del Activo, como:

- Velocidad
- Ignición
- Eventos
- Orientación
- Estados configurados en OnStatus

Esto permite que el color del icono cambie automáticamente según condiciones definidas.

##### **Variables de color disponibles**

Los iconos 3D permiten personalizar distintas partes mediante parámetros enviados por GET:

- **c** → Carrocería
- **b** → Caja
- **a** → Caja 2
- **p** → Cristales
- **t** → Faros traseros
- **f** → Faros delanteros
- **alpha** → Transparencia del icono

**Ejemplo de cómo utilizar estar variables:**

- Aplanadora 3D original en amarillo: [https://plataforma.redgps.com/commons/svg/3d\_aplanadora.php?grados=120](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](https://plataforma.redgps.com/commons/svg/3d_aplanadora.php?grados=120&c=488AC9)

##### **Variables para condiciones**

Puedes utilizar las siguientes variables para definir reglas de cambio de color:

- speed
- ignition
- compass
- event
- device\_id
- last\_report
- last\_conection
- driver\_id
- external\_bat
- device\_bat

##### **Ejemplos de eventos**

Para aplicar cambios basados en eventos, el dispositivo debe reportarlos correctamente. A continuación se muestran algunos ejemplos de eventos que puedes utilizar:

- 3 → Activo detenido
- 4 → Botón de pánico ON
- 7 → Desconexión de batería
- 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
- 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

Existen muchos más eventos disponibles. Puedes contactar al equipo de Soporte Técnico para obtener el listado completo.

##### **Definición de condiciones**

Puedes crear reglas utilizando operadores lógicos:

- ==, >=, <=, >, <
- AND (&&)
- OR (||)

**Ejemplos:**

```JavaScript
    speed >= 0
    ignition == 1 && speed > 0
    event == 4 || event == 25
```

##### **Ejemplo de configuración**

A continuación se muestra un ejemplo de cómo definir colores según velocidad e ignición:

```JavaScript
var assets_colors = [
    { condition: 'speed == 0 && ignition == 0', values: '?c=D23155&a=D23155&b=D23155' }, // detenido y apagado
    { condition: 'speed == 0 && ignition == 1', values: '?c=F9DC77&a=F9DC77&b=F9DC77' }, // ralentí
    { condition: 'speed >= 1 && ignition == 1', values: '?c=71BA51&a=71BA51&b=71BA51' }, // encendido y en movimiento
    { condition: 'speed >= 1 && ignition == 0', values: '?c=5D3FD3&a=5D3FD3&b=5D3FD3' }, // remolcado
];

$(document).ready(function () {
	if(_checkIconColors){
		_checkIconColors.validateAssetsColors();
	}
});
```

##### **Uso con OnStatus**

También puedes cambiar colores según estados definidos en OnStatus. Ejemplo:

```JavaScript
var assets_colors_onstatus ={group_id: 1259, color_var: "c,b,a"}; 
var assets_colors = [];

$(document).ready(function () {
	if(_checkIconColors){
		_checkIconColors.validateAssetsColors();
	}
});
```

**Consideraciones:**

- Solo se puede utilizar un grupo de estados.
- Si no defines <span style="color: rgb(35, 111, 161);">color\_var</span>, se aplicará únicamente a la variable **c (Carrocería)**.
- Esta configuración tiene prioridad sobre cualquier otra regla definida.
- <span style="text-align: justify;">El <span style="color: #236fa1;">group\_id</span> lo obtienes al ingresar a la plataforma **OnStatus**, dentro del módulo **Grupos de estados** encontrarás las pestañas de los grupos que tengas creados, al poner el cursor encima se mostrará un tooltip con el ID del grupo deseado.</span>

##### **¿Dónde se configura?**

Debes agregar el código JavaScript en:

**Partners → Clientes → Permisos (engranaje) → Personalización de plataformas → Todas las plataformas → JavaScript personalizado**

1. Pega el código en el campo correspondiente
2. Guarda los cambios

[![archivo 1.png](https://docs.redgps.com/uploads/images/gallery/2022-10/scaled-1680-/44zarchivo-1.png)](https://docs.redgps.com/uploads/images/gallery/2022-10/44zarchivo-1.png)

Una vez configurado, los iconos 3D cambiarán de color automáticamente según las condiciones definidas.

# 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](https://docs.redgps.com/uploads/images/gallery/2022-05/scaled-1680-/image-1652948925548.png)](https://docs.redgps.com/uploads/images/gallery/2022-05/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.

```JavaScript
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.

```JavaScript
customPlaform.tableAddAction( '#tbl-lugares', 'addButton', btn );
```

<div id="bkmrk-3.-para-saber-como-s">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</div><div id="bkmrk--1"></div>```JavaScript
customPlaform.tables_loaded
```

4\. Debemos ahora crear la función que ejecutará el botón

```JavaScript
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.

```JavaScript
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.

<div id="bkmrk--2"><div>[![api_botones_2.png](https://docs.redgps.com/uploads/images/gallery/2022-06/scaled-1680-/api-botones-2.png)](https://docs.redgps.com/uploads/images/gallery/2022-06/api-botones-2.png)</div></div><div id="bkmrk--3"></div><div id="bkmrk--4"></div>

# 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](https://docs.redgps.com/uploads/images/gallery/2022-06/scaled-1680-/Ihdejemplo-icono.png)](https://docs.redgps.com/uploads/images/gallery/2022-06/Ihdejemplo-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](https://docs.redgps.com/uploads/images/gallery/2022-06/scaled-1680-/ejemplo-boton.png)](https://docs.redgps.com/uploads/images/gallery/2022-06/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-&gt;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](https://docs.redgps.com/uploads/images/gallery/2022-06/scaled-1680-/partners.png)](https://docs.redgps.com/uploads/images/gallery/2022-06/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](http://library.redgps.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.

```JavaScript
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

```

```JavaScript
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.

```JavaScript
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);
```

```JavaScript
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

```JavaScript
 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);
```

```JavaScript
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.

```JavaScript
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);
```

<div id="bkmrk--5"></div>```JavaScript
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

```JavaScript
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);
```

```JavaScript
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

```JavaScript
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 );
```

<div id="bkmrk--6"></div>```JavaScript
 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

<?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](https://docs.redgps.com/uploads/images/gallery/2022-06/scaled-1680-/api-ajaxexterno1.jpg)](https://docs.redgps.com/uploads/images/gallery/2022-06/api-ajaxexterno1.jpg)

Ejemplo del modal donde se mostrara el resultado de la petición AJAX externa

**Observaciones:** El recuadro <span style="color: #993300;">**ROJO**</span> marca el título del modal, el recuadro <span style="color: #00ccff;">**AZUL**</span> 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 <span style="color: #ff9900;">**NARANJA**</span> 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](https://docs.redgps.com/uploads/images/gallery/2022-06/scaled-1680-/api-ajaxexterno2.jpg)](https://docs.redgps.com/uploads/images/gallery/2022-06/api-ajaxexterno2.jpg)

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

**Observaciones:** El recuadro <span style="color: #33cccc;">**AZUL**</span> 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 <span style="color: #ff9900;">**NARANJA**</span> 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.

```HTML
<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

```JavaScript
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:

```JavaScript
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'

```JavaScript
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'.

```JavaScript
//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](https://docs.redgps.com/uploads/images/gallery/2022-06/scaled-1680-/api-ajaxexterno3.png)](https://docs.redgps.com/uploads/images/gallery/2022-06/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

```PHP
//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>
```

<div id="bkmrk--5"></div></body></html>