Personalização da Plataforma - JS

A seguir, apresentamos exemplos de código JavaScript que podem ser utilizados para personalizar suas plataformas.

Personalização de cores em Ícones 3D

Esta funcionalidade permite personalizar as cores dos nossos ícones 3D que são exibidos na plataforma, facilitando a identificação visual dos Ativos no mapa.

A configuração é realizada por meio de código JavaScript, o qual permite definir regras dinâmicas para alterar as cores de acordo com o estado ou comportamento dos Ativos.

 

Como funciona?

Você pode modificar as cores dos ícones com base em diferentes variáveis do Ativo, como:

Isso permite que a cor do ícone mude automaticamente segundo condições definidas.

 

Variáveis de cor disponíveis

Os ícones 3D permitem personalizar diferentes partes por meio de parâmetros enviados por GET:

Exemplo de como utilizar estas variáveis:

 

Variáveis para condições

Você pode utilizar as seguintes variáveis para definir regras de mudança de cor:

 

Exemplos de eventos

Para aplicar mudanças baseadas em eventos, o dispositivo deve reportá-los corretamente. Abaixo estão alguns exemplos de eventos que você pode utilizar:

Existem muitos outros eventos disponíveis. Você pode contatar a equipe de Suporte Técnico para obter a lista completa.

 

Definição de condições

Você pode criar regras utilizando operadores lógicos:

Exemplos:

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


Exemplo de configuração

Abaixo, um exemplo de como definir cores conforme velocidade e ignição:

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 com OnStatus

Também é possível alterar cores conforme estados definidos no OnStatus. Exemplo:

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

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

Considerações:

 

Onde configurar?

Você deve adicionar o código JavaScript em:

Partners → Clientes → Permissões (ícone de engrenagem) → Personalização de plataformas → Todas as plataformas → JavaScript personalizado

  1. Cole o código no campo correspondente
  2. Salve as alterações

archivo 1.png

Uma vez configurado, os ícones 3D mudarão de cor automaticamente conforme as condições definidas.

Botões e ações personalizadas em listagens

Botões e ações personalizadas em listagens

Dentro da plataforma, você encontrará listagens do tipo tabela e rolagem, e a elas podem ser adicionados botões personalizados cujas ações você mesmo poderá definir.

   
image-1652948925548.png

Exemplo dos tipos de tabela onde a personalização pode ser aplicada:

Nota: esses botões personalizados só poderão ser adicionados dentro das plataformas, desde que a listagem/tabela onde desejam utilizá-los esteja usando data tables do tipo rolagem. Não é possível usá-los para a listagem de ativos da plataforma. Para poder utilizar essas funções, é necessário ter conhecimento de linguagem JavaScript. Recomendamos primeiro testar seu código no console do navegador e, em seguida, subir esse código JavaScript para sua plataforma.

Exemplo passo a passo

1. Definimos primeiro o objeto do botão

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. Depois que temos o botão definido, devemos adicioná-lo à tabela. No exemplo abaixo o adicionamos à tabela de lugares.

customPlaform.tableAddAction( '#tbl-lugares', 'addButton', btn );
3. Para saber como se chamam as tabelas, podemos executar o seguinte comando. Este retornará os nomes das tabelas e os atributos das mesmas.
customPlaform.tables_loaded

4. Devemos agora criar a função que executará o botão.

function test_function( idelement ){
  alert('My test_function [idelement:'+idelement+']');
}

Aqui deixamos o exemplo de código completo. Para testá-lo, basta colar na console e depois ir à lista de lugares, onde vocês verão um novo botão 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", //ícone da biblioteca
  id: "fun1-", //nomes + id de elemento.
  title: "func1"}

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

function test_function( idelement ){
  alert('My test_function [idelement:'+idelement+']');
}

Assim ficará o novo botão verde que foi adicionado à lista de lugares da plataforma.

api_botones_2.png

Adicionar botões na barra de navegação da plataforma

A função descrita a seguir será útil para adicionar botões na barra de navegação da plataforma.

Esta função está disponível para que os botões possam ser configurados a partir da personalização das plataformas

Há duas opções de botões que podem ser adicionadas na barra: Ícone e Botão no menu principal.

Icono:ejemplo_Icono.png

Exemplo de onde o botão tipo ícone é adicionado na barra.

Observações: Os novos ícones serão adicionados à esquerda dos ícones que já estão disponíveis por padrão na plataforma.

Botão no menu principal:

ejemplo_boton.png

Exemplo de onde o botão é adicionado no menu principa

Observações: Os novos botões serão inseridos no menu principal da plataforma ou, se houver muitos botões configurados, o novo botão será adicionado ao menu suspenso 'mais opções'.

Forma de invocar a função addNavbarButton()

En primeiro lugar, você deve acessar a plataforma "Partners". Uma vez dentro, na opção superior, clique em "Opções" e entre na seção "personalização de plataformas".

Uma vez na "personalização de plataformas", acesse Cliente -> Javascript personalizado. Ao entrar, será exibido um campo de texto onde você poderá adicionar código JS personalizado.

Para utilizar as funções dessa ferramenta, deve-se chamar a variável global '_addButton' e em seguida acessar seu atributo/função 'addNavbarButton', que recebe como argumentos um objeto com os parâmetros necessários para a criação do botão e o carregamento correto das informações.

javascipt 1.png

NOTA: Para cada novo botão, deve-se chamar a função "_addButton.addNavbarButton(botonEjemplo)" com o objeto a ser criado, conforme será mostrado mais adiante.

AVISO: Para realizar requisições a sites externos, é necessário ter o CORS 'Access-Control-Allow-Origin' habilitado em seu servidor; caso contrário, as solicitações serão rejeitadas e nenhuma informação será exibida.

Observações Gerais

Os seguintes são obrigatórios em qualquer botão que se queira configurar:

1- load_in_modal

2- target_position

No caso de usar um Modal, os seguintes atributos são obrigatórios:

1- load_in_modal

2- modal_url (Caso carregue conteúdo externo)

Todas as opções de botões podem ser configuradas como tipo "ícone" ou tipo "menu". Dependendo do caso, devem ser adicionados os atributos e configurações necessários.

Exemplos dos tipos de botões

1. Botão tipo ícone

Definimos primeiro o objeto com os argumentos necessários.

AVISO: Neste caso, é obrigatório definir o atributo "target_position" com o valor "icon".

AVISO: Neste caso, é obrigatório definir o atributo "icon_class" com algum valor do catálogo de ícones disponíveis em a url http://library.service24gps.com/iconos.html.

OBSERVAÇÃO: O seguinte objeto é um exemplo de um botão tipo "Ícone", com o qual se carrega um modal com conteúdo externo.

var myButton = {}; //Deve declarar uma variável do tipo objeto para adicionar os atributos necessários.
  myButton.btn_name = 'Botão Ícone'; // String que será exibido como tooltip (no caso do botão ícone) (OBRIGATÓRIO)
  myButton.load_in_modal = true; // Para que o conteúdo seja exibido no modal, deve-se definir como true (OBRIGATÓRIO). 
  myButton.modal_title = 'Conteúdo Externo De Teste'; // Este é o título que é exibido no cabeçalho do modal
  myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php',// URL à qual será feita a solicitação (OBRIGATÓRIO)
  myButton.modal_width = '30%';// Define-se o tamanho da largura do modal.
  myButton.modal_height = '50%';// Define-se o tamanho da altura do modal.
  myButton.css_class = 'myClass';// Caso queira adicionar um estilo personalizado ao botão, pode fazê-lo especificando o nome da classe.
  myButton.target_position = 'icon';// Para definir um botão do tipo ícone, este campo deve ser especificado como "icon" (OBRIGATÓRIO).
  myButton.icon_class = 'i-cog';//  Deve-se especificar um ícone do catálogo de ícones disponíveis em http://library.service24gps.com/iconos.html.

_addButton.addNavbarButton(myButton); // Sempre que um novo botão for criado, deve-se invocar a variável _addButton e chamar a função .addNavbarButton(); à qual deve ser enviado como parâmetro o objeto criado.
var myButton = {}; //Deve declarar uma variável do tipo objeto para adicionar os atributos necessários.
  myButton.btn_name = 'Botón Icono'; // String que será exibida como tooltip (no caso do botão ícone) (OBRIGATÓRIO).
  myButton.load_in_modal = true; // Para que o conteúdo seja exibido no modal, deve-se definir como true (OBRIGATÓRIO).
  myButton.modal_title = 'Contenido Externo De Prueba';// Este é o título que é exibido no cabeçalho do modal
  myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php',// URL à qual será feita a solicitação (OBRIGATÓRIO).
  myButton.modal_width = '30%';// Define-se o tamanho da largura do modal.
  myButton.modal_height = '50%';// Define-se o tamanho da altura do modal.
  myButton.css_class = 'myClass';// Caso queira adicionar um estilo personalizado ao botão, pode fazê-lo especificando o nome da classe.
  myButton.target_position = 'icon';// Para definir um botão do tipo ícone, este campo deve ser especificado como "icon" (OBRIGATÓRIO).
  myButton.icon_class = 'i-cog';// Deve-se especificar um ícone do catálogo de ícones disponíveis em http://library.service24gps.com/iconos.html.

_addButton.addNavbarButton(myButton); // Sempre que um novo botão for criado, deve-se invocar a variável _addButton e chamar a função .addNavbarButton(); à qual deve ser enviado como parâmetro o objeto criado.

Neste caso, sendo um botão do tipo Ícone, o elemento é adicionado à esquerda dos botões que já estão disponíveis por padrão.

É possível configurar um botão do tipo ícone com as demais funcionalidades, como:

1- Carregar conteúdo externo em um modal

2- Carregar conteúdo externo JSON em um modal

3- Chamar uma função de JS

4- Carregar conteúdo em uma nova janela.

2. Botão no menu principal

Definimos primeiro o objeto com os argumentos necessários.

AVISO: Neste caso, é obrigatório definir o atributo "target_position" com o valor "menu".

OBSERVAÇÃO: O seguinte objeto é um exemplo de um botão do tipo "menu", com o qual é carregado um modal com conteúdo externo em JSON.

var myButton = {};
  myButton.btn_name = 'Botão Menu';// String que será exibida como rótulo do botão (OBRIGATÓRIO)
  myButton.load_in_modal = true;
  myButton.modal_title = 'Conteúdo Externo De Teste';
  myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxJSON.php',//URL para a qual a solicitação será feita (OBRIGATÓRIO)
  myButton.modal_width = '30%';
  myButton.modal_height = '50%';
  myButton.css_class = 'myClass';
  myButton.target_position = 'menu';// Para definir um botão do tipo menu, este campo deve ser especificado como "menu" (OBRIGATÓRIO)

_addButton.addNavbarButton(myButton);
var myButton = {};
  myButton.btn_name = 'Botão Menu';// String que será exibida como rótulo do botão (OBRIGATÓRIO)
  myButton.load_in_modal = true;
  myButton.modal_title = 'Conteúdo Externo De Teste';
  myButton.modal_url = 'https://plataforma.service24gps.com/loadExternalAjaxJSON.php',// URL para a qual a solicitação será feita (OBRIGATÓRIO)  
  myButton.modal_width = '30%';
  myButton.modal_height = '50%';
  myButton.css_class = 'myClass';
  myButton.target_position = 'menu';// Para definir um botão do tipo menu, este campo deve ser especificado como "menu" (OBRIGATÓRIO)

_addButton.addNavbarButton(myButton);

Neste caso, por ser um botão do tipo Menu, o botão é adicionado ao final dos elementos do menu, mas antes do botão "sair".

NOTA: No caso de haver o submenu "Mais opções", o novo botão será adicionado ao final dos elementos do submenu.

É possível configurar um botão do tipo menu com as demais funcionalidades, como:

1- Carregar conteúdo externo em um modal

2- Carregar conteúdo externo JSON em um modal

3- Chamar uma função de JS

4- Carregar conteúdo em uma nova janela

3. Botão para carregar conteúdo externo em nova janela

Definimos primeiro o objeto com os argumentos necessários.

AVISO: Para esta opção, é obrigatório configurar o atributo "href" com a URL da página que será aberta em uma nova vista.

AVISO: Para esta opção, é obrigatório configurar o atributo "href_target" com o parâmetro "_blank".

OBSERVAÇÃO: O seguinte objeto é um botão do tipo "menu", que ao clicar abre a página https://www.google.com em uma nova janela.

 var myButton = {};
  myButton.btn_name = 'Carregar Nova Janela';
  myButton.href = 'https://www.google.com'; // URL da página que será carregada em uma nova janela (OBRIGATÓRIO)
  myButton.href_target = '_blank';// Deve-se declarar este atributo como '_blank' para abrir uma nova janela; caso contrário, a página atual será substituída.
  myButton.css_class = 'myClass';
  myButton.target_position = 'menu';

_addButton.addNavbarButton(myButton);
var myButton = {};
  myButton.btn_name = 'Carregar Nova Janela';
  myButton.href = 'https://www.google.com'; // URL da página que será carregada em uma nova janela (OBRIGATÓRIO)
  myButton.href_target = '_blank';// Este atributo deve ser declarado como '_blank' para abrir uma nova janela; caso contrário, a página atual será substituída.
  myButton.css_class = 'myClass';
  myButton.target_position = 'menu';

_addButton.addNavbarButton(myButton);

OBSERVAÇÃO: Neste caso, não são utilizados os atributos para um modal, pois será aberta uma janela independente do site.

 

4. Botão para executar uma função JavaScript

Definimos primeiro o objeto com os argumentos necessários.

AVISO: Para esta opção, é necessário usar o atributo "onclick" e, como parâmetro, deve-se atribuir a função que deseja executar.

OBSERVAÇÃO: O seguinte objeto é um botão do tipo "menu", que ao clicar sobre o botão exibe um alert.

var myButton = {};
  myButton.btn_name = 'Mostrar Alerta';
  myButton.css_class = 'myClass';
  myButton.onclick = 'alert('Alerta');'; // Deve-se especificar a função que será executada ao clicar no botão (OBRIGATÓRIO)
  myButton.target_position = 'menu';

_addButton.addNavbarButton(myButton);
var myButton = {};
  myButton.btn_name = 'Mostrar Alerta';
  myButton.css_class = 'myClass';
  myButton.onclick = 'alert('Alerta');'; // Deve-se especificar a função que será executada ao clicar no botão (OBRIGATÓRIO)
  myButton.target_position = 'menu';

_addButton.addNavbarButton(myButton);

OBSERVAÇÃO: Neste caso, pode ou não usar os atributos para um modal, dependendo de se em alguma função é necessário exibir conteúdo no modal.

5.Botão para mostrar em um modal um ponto no mapa do Open Street Maps

Definimos primeiro o objeto com os argumentos necessários.

AVISO: Para esta opção, é obrigatório configurar o atributo "tipo_mapa" com o parâmetro "osm".

AVISO: Para esta opção, é obrigatório configurar o atributo "latitud" com a coordenada do ponto a ser exibido no mapa.

AVISO: Para esta opção, é obrigatório configurar o atributo "longitud" com a coordenada do ponto a ser exibido no 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 a cartografia do Open Street Maps, deve-se especificar este campo como "osm".
  myButton.latitud = '19.043806339673186';//Deve-se especificar a latitude do ponto a ser exibido no mapa.
  myButton.longitud = '-98.19825315772778';//Deve-se especificar a latitude do ponto a ser exibido no 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ão para mostrar em um modal um ponto no mapa do Google Maps.

Definimos primeiro o objeto com os argumentos necessários.

AVISO: Para esta opção, é obrigatório configurar o atributo "tipo_mapa" com o parâmetro "google".

AVISO: Para esta opção, é obrigatório configurar o atributo "latitude" com a coordenada do ponto a ser exibido no mapa.

AVISO: Para esta opção, é obrigatório configurar o atributo "longitude" com a coordenada do ponto a ser exibido no mapa.

var myButton = {};
  myButton.btn_name = 'Mapa Google';
  myButton.load_in_modal = true;
  myButton.modal_title = 'Exemplo 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 a cartografia do Google Maps, deve-se especificar este campo como "google"
  myButton.latitud = '19.043806339673186';//Deve-se especificar a latitude do ponto a ser exibido no mapa
  myButton.longitud = '-98.19825315772778';//Deve-se especificar a longitude do ponto a ser exibido no mapa

  _addButton.addNavbarButton( myButton );
 var myButton = {};
  myButton.btn_name = 'Mapa Google';
  myButton.load_in_modal = true;
  myButton.modal_title = 'Exemplo 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 a cartografia do Google Maps, deve-se especificar este campo como "google"
  myButton.latitud = '19.043806339673186';//Deve-se especificar a latitude do ponto a ser exibido no mapa
  myButton.longitud = '-98.19825315772778';//Deve-se especificar a longitude do ponto a ser exibido no mapa

  _addButton.addNavbarButton( myButton );

Ejemplo de um arquivo PHP para ser configurado em seu servidor e aceitar solicitações externas.

Lembre-se de que esses cabeçalhos são importantes para serem configurados para que as solicitações ao seu servidor sejam realizadas corretamente.

<?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();
  }

?>

Fazer solicitações a servidores ou sites externos

Forma de invocar a função loadExternalAjax()A função descrita a seguir será útil para fazer solicitações a seus servidores ou a sites externos que o permitam e obter as informações necessárias para implementá-las.

Essa função pode ser implementada nos JavaScripts personalizados que foram utilizados na personalização das plataformas, para que a solicitação possa ser invocada automaticamente e manipular os dados da plataforma com o que foi obtido

Existem 2 formas de mostrar as informações obtidas por meio da função; seja de forma flutuante através de: 'Modal' ou exibindo na barra lateral da plataforma: 'Sidebar'

Modal:
api_ajaxExterno1.jpg

Exemplo do modal onde será mostrado o resultado da solicitação AJAX externa.

Observações: O retângulo VERMELHO marca o título do modal, o retângulo AZUL indica o 'body' do modal, onde se pode inserir HTML que venha da solicitação ou que seja indicado nos argumentos ao chamar a função. O retângulo LARANJA indica o 'footer' do modal, que pode ser editado e modificado com as informações obtidas pela solicitação

Sidebar:

api_ajaxExterno2.jpg

Exemplo do sidebar que aparece na plataforma onde será mostrado o resultado da solicitação AJAX externa.

Observações: O retângulo AZUL indica o 'body' do sidebar, onde se pode inserir HTML que venha da solicitação ou que seja indicado nos argumentos ao chamar a função. O retângulo LARANJA indica o 'footer' do sidebar, que pode ser editado e modificado com as informações obtidas pela solicitação

Forma de invocar a função loadExternalAjax()

Para poder invocar a função, deve-se chamar a variável global que já está habilitada 'customPlaform' e, em seguida, acessar seu atributo/função 'loadExternalAjax', a qual recebe como argumentos certos parâmetros para seu correto funcionamento.

NOTA: Esta função é assíncrona e possui uma promessa de retorno, portanto, é possível usar '.then(function(response){})' para realizar a manipulação do DOM tanto do 'modal' quanto do 'sidebar' com base nos dados obtidos desta solicitação.

OBSERVAÇÃO: Tanto o 'modal' quanto o 'sidebar' compartilham o mesmo DOM, que pode ser personalizado, e sua estrutura é a que está mostrada a seguir; para inserir dados em cada seção, simplesmente aponte para os 'ID' de cada elemento genérico.

ADVERTÊNCIA: Para realizar solicitações a sites externos, deve-se ter habilitado o CORS 'Access-Control-Allow-Origin' em seu servidor; caso contrário, as solicitações serão rejeitadas e nenhuma informação será exibida.

<div id="bodyResult">
</div>
<div id="footerResult">
</div>

Exemplo passo a passo

1. Primeiro, definimos o objeto com os argumentos necessários para a solicitação

NOTA: Se você colocar o 'dataType', lembre-se de tratar o 'response' de acordo com o formato especificado e conforme configurou a resposta em seu servidor; se, por outro lado, não for colocado nenhum e for omitido, o response sempre chegará em formato 'Texto', portanto, você deverá tratar essa string posteriormente de acordo com suas necessidades

let argumentos = {
  url: 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php', // URL para a qual a solicitação será feita (OBRIGATÓRIO).
  type: 'GET', // Tipo de solicitação: GET / POST (OBRIGATÓRIO)
  dataType: 'JSON', //O tipo de dado de retorno da solicitação por DEFAULT é 'JSON' (opcional). Ex.: 'html', 'JSON', etc.
  data: {}, // OBJETO com os dados necessários para a solicitação, Ex.: {'apiKey':123456789,'token':AbcDeF123456789}; por DEFAULT é {} (opcional)
  target: 'sidebar', // String de como se deseja mostrar os dados, seja em 'modal' ou 'sidebar', são as únicas opções; por DEFAULT é 'modal' (opcional)
  async: false, //booleano que indica se a solicitação AJAX será assíncrona ou não; por DEFAULT é false (opcional)
  title: 'Título de la Ventana del Modal', //Título do Modal que deseja que apareça, não se aplica para 'sidebar'; se não colocar, por DEFAULT é 'Visualizador'.
  innerHtml: '<b>PRUEBA HTML</b>', //HTML que deve ser carregado primeiro no 'body', tanto no 'modal' quanto no 'sidebar'; isso é útil se você tiver seu próprio HTML que deseja manipular assim que a solicitação for concluída e entrar na seção do 'THEN()'; por DEFAULT não é inserido nenhum HTML (opcional).
heigthModal: '570', // Altura do 'modal' em pixels, não se aplica para o 'sidebar'; por DEFAULT é '570' (opcional).
  widthModal: '60%', //Largura do 'modal' em porcentagem, não se aplica para o 'sidebar'; por DEFAULT é '60%' (opcional)

2. Chamar a função

customPlaform.loadExternalAjax(argumentos).then(function (response) {
  //AQUI VAI O CÓDIGO A SER EXECUTADO APÓS A SOLICITAÇÃO.
})

3. Dentro da seção do 'then()', você pode colocar qualquer código JS para manipular o DOM do 'modal' ou do 'sidebar' com as informações recebidas em 'response

customPlaform.loadExternalAjax(argumentos).then(function (response) {
  $('#bodyResult').append('<div id="divTest">Prueba: ' + response.atributo + '</div>');
})

4. Por último, uma vez que a função esteja montada, você pode implementá-la em 'Plataformas Personalizadas', na seção 'Cliente' em 'JavaScript Personalizado', para que seja executada automaticamente toda vez que a plataforma iniciar.

Aqui deixamos o exemplo de código completo. Para testá-lo, basta colá-lo no console.

NOTA: Neste exemplo, contém um setTimeout para evitar que, ao carregar a plataforma, ele 'sobreponha'

//EXEMPLOS

//HTML
setTimeout(() => {
  let argumentos = {
    url: 'https://plataforma.service24gps.com/loadExternalAjaxHTML.php',
    type: 'GET',
    data: {},
    target: 'modal',
    async: false,
    title: 'Título da Janela do Modal.',
    innerHtml: '<b>PRUEBA HTML</b>',
    heigthModal: '570',
    widthModal: '60%',
  }
  customPlaform.loadExternalAjax(argumentos).then(function (res) {
    $('#bodyResult').append(res);//ESPECIFICA-SE QUE O QUE SE ESPERA RECEBER COMO RESPOSTA DO SERVIDOR É UM JSON PARA AUTOTRANSFORMAR O TIPO DE DADO.
  })
}, 5000);

//JSON
setTimeout(() => {
  let argumentos = {
    url: 'https://plataforma.service24gps.com/loadExternalAjaxJSON.php',
    type: 'GET',
    dataType: 'JSON',//ESPECIFICA-SE QUE O QUE SE ESPERA RECEBER COMO RESPOSTA DO SERVIDOR É UM JSON PARA AUTOTRANSFORMAR O TIPO DE DADO.
    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);//NESTE CASO, COMO O SERVIDOR RETORNA UM OBJETO COM A CHAVE 'msg' ONDE VEM O HTML COMO STRING, PROCEDE-SE A ACESSÁ-LA PARA INSERIR NO DOM.
  })
}, 5000);

Assim, o código seria adicionado na implementação do JavaScript personalizado na personalização das plataformas

javascrip.png

Exemplo de um arquivo PHP para ser configurado em seu servidor e aceitar solicitações externas

Lembre-se de que esses cabeçalhos são importantes para serem configurados a fim de realizar as solicitações ao seu servidor corretamente.

//EXEMPLOS
<?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 É simplesmente o texto de preenchimento das imprensas e arquivos de texto. Lorem Ipsum tem sido o texto padrão de preenchimento das indústrias desde o ano 1500, quando um impressor (Nota do tradutor: pessoa que se dedica à impressão) desconhecido usou uma galeria de textos e os misturou de tal forma que conseguiu fazer um livro de textos modelo. Não só sobreviveu 500 anos, mas também se tornou um texto de preenchimento em documentos eletrônicos, permanecendo essencialmente igual ao original. Foi popularizado nos anos 60 com a criação das folhas 'Letraset', que continham trechos de Lorem Ipsum, e mais recentemente com softwares de autoedição, como por exemplo o Aldus PageMaker, que inclui versões de Lorem Ipsum
    </div>
  </body>
</html>