Ir para o conteúdo principal

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

?>
Voltar ao topo