Executando duas ações com a função onClick

Bom dia pessoal, tudo bom!

Estou precisando executar duas funções em um botão, sendo uma enviar 0 ou 1, e a outra executar um script, abaixo segue modelo em que estou trabalhando, porém não está funcionando, alguém poderia por gentileza me dar um help ?

script para servidor

var s ="";
var Habilitado = “HAB”;
var Desabilitado = “DES”;

if(value)
{
s+= “<button type=“button” onclick='mango.view.setPoint(”+ point.id +", “”+ pointComponent.id +"", “false”);return false; mango.view.executeScript(‘SC_742305’);’/>" +Desabilitado+"";
}
else
{
s+= “<button type=“button” onclick='mango.view.setPoint(”+ point.id +", “”+ pointComponent.id +"", “true”);return false; mango.view.executeScript(‘SC_528232’);’/>"+Habilitado+"";
}
return s;

Bom dia. Vamos resolver seu problema por partes.

O que é um script para servidor?

Primeiramente, eu vou dar uma definição genérica de script para servidor. Um script para servidor é um “código Javascript” (na verdade é um pouco mais complicado, mas para facilitar vamos tratá-lo assim) que é executado no servidor onde está instalado o ScadaBR. Conforme ocorre essa execução, o código apresentará um valor de retorno (aquilo que vem depois da instrução return). Tudo o que estiver contido nesse valor de retorno será escrito como código HTML no navegador do cliente.

Para facilitar, criamos uma variável, geralmente chamada s, para armazenar o código HTML de retorno no formato de texto (string). O que torna o script para servidor tão dinâmico é que podemos colocar dentro dessa variável de retorno o valor de outras variáveis interessantes, como value (que sempre apresenta o valor do data point selecionado) ou point.id (que apresenta o id do data point).

Entendido isso, vamos à parte de criação do código propriamente dita.

Criando código HTML

Em primeiro lugar, você parece ter se confundido com os elementos HTML. Existem basicamente duas tags HTML distintas para criar botões: uma é a <button>Texto do botão</button> que tem uma marcação de abertura e outra de fechamento, enquanto a outra é a <input type="button" value="Texto do botão"> que não usa marcação de fechamento. A diferença entre elas é mínima, no ScadaBR a única diferença perceptível é que <input> assume um estilo padronizado enquanto <button> vai ter uma aparência diferente dependendo do navegador.

Dentro de qualquer elemento html, podemos colocar atributos de eventos, como é o caso do onclick (esse atributo contém um código Javascript que será executado quando você clicar sobre o elemento). No seu caso, se você quer invocar dentro desse código duas funções diferentes, basta usar um ponto e vírgula separando as duas funções. Por exemplo:

<input type="button" onclick="funcao1(); funcao2();" value="Texto do botão">

Ou, mais próximo do que você está tentando fazer:

<input type="button" onclick="mango.view.setPoint([número], [número], [número]); mango.view.executeScript('SC_528232');" value="Texto do botão">

Obs.: 1- Não se preocupe com as partes mencionadas como [número], vou explicá-las abaixo. 2- O uso de return false; no meio de um onclick é totalmente desnecessário.

Colocando o HTML dentro do script para servidor

Agora que sabemos como criar um código HTML de um botão, temos de transformar esse código em uma string Javascript. Fazemos isso colocando o texto entre aspas (" "), porém, temos de ter cuidado em não misturar as aspas que são do código HTML com as que usamos para embuti-lo no script. Um exemplo:

s += "<input type="button" value="Ligar" >

Se você notar bem, no código acima há partes do código que não foram incluídas dentro da string (a string é a parte colorida), isso porque o Javascript entendeu que as aspas que foram colocadas após type= eram para encerrar o conteúdo da string, e não faziam, portanto, parte da mesma. Para resolver isso temos 3 possibilidades:

  1. Usar aspas simples (’ ') no lugar de aspas duplas (" ")
s += "<input type='button' value='Ligar' >"
  1. Colocar antes uma contrabarra ( \ ) para forçar o Javascript a ignorar uma aspa
s += "<input type=\"button\" value=\"Ligar\" >"
  1. Trocas as aspas pela entidade HTML &quot; que é reconhecida como aspa pelo HTML mas ignorada pelo Javascript.
s += "<input type=&quot;button&quot; value=&quot;Ligar&quot; >"

Mesclando o conteúdo de variáveis diferentes

Entendido como se faz para usar as aspas de uma string, vejamos como fazemos para adicionar outras variáveis dentro dessa string. Por exemplo:

var s = "<p>";
s +=  value + "</p>";
return s;

No código acima, criamos a variável de retorno s na primeira linha, usando a palavra especial var, e demos a ela o valor "<p>", que é a string de uma tag HTML para parágrafos de texto.

Na segunda linha usamos dois símbolos especiais. O símbolo +=, no contexto acima, serve para adicionar mais conteúdo na variável string, sem remover o conteúdo já existente (esse símbolo só pode ser usado imediatamente após o nome da variável s). O símbolo + serve para concatenar (unir) o valor da variável value com o da string "</p>". Se considerássemos que a variável value tivesse o valor numérico 32, o resultado final desse código seria uma variável s armazenando o texto "<p>32</p>".

É aqui que entramos novamente na questão da função mango.view.setPoint([número], [número], [número]);. Essa função precisa de três parâmetros numéricos: o primeiro é o id do data point (que vem da variável point.id), o segundo é um número identificador do componente na Representação Gráfica (que vem da variável pointComponent.id) e o terceiro é o valor que você quer escrever no data point (que é uma escolha arbitrária).

Como já vimos como adicionar o valor de outras variáveis na variável de retorno, podemos dar um exemplo de como usar a função mango.view.setPoint(....) para escrever o valor false:

s += "mango.view.setPoint(" + point.id + "," + pointComponent.id + "," + "false);"

Para encerrar a epopeia

Por fim, agora que já sabemos como escrever o código, podemos criar o botão que execute tanto um comando de set point [mango.view.setPoint(....)] quanto um comando de execução de script [mango.view.executeScript(....)] :

// Cria duas variáveis para armazenar o texto do botão
var habilitar = "HAB";
var desabilitar = "DES"
// Inicia uma variável s vazia
var s = "";

// Testa o valor do datapoint
if (value == true) { 
// Caso o valor seja true:
    s += "<input type='button' ";
    // Acrescentando o texto do botão
    s += "value='" + desabilitar + "' ";
    // Acrescentando o comando onclick
    s += "onclick='mango.view.setPoint(" + point.id + "," + pointComponent.id + "," + "false);  mango.view.executeScript(&quot;SC_742305&quot;); '";
    // Fechando a tag do botão
    s += ">";
} else { 
// Caso o valor seja false:
    s += "<input type='button' ";
    // Acrescentando o texto do botão
    s += "value='" + habilitar + "' ";
    // Acrescentando o comando onclick
    s += "onclick='mango.view.setPoint(" + point.id + "," + pointComponent.id + "," + "true);  mango.view.executeScript(&quot;SC_742305&quot;); '";
    // Fechando a tag do botão
    s += ">";
}

// Encerra o script e retorna a variável s
return s;

Me desculpe por ter escrito um texto tão longo para responder essa pergunta, mas creio que agora você será capaz de entender melhor como usar os scripts para servidor. Boa sorte!

3 curtidas

Muito obrigado pela atenção, está bem explicado !

Que aula meu caro, simplesmente sensacional, muito obrigado por compartilhar de forma tão detalhada.