Autor Tópico: [RESOLVIDO] Imagem Dinâmica em Aba de Formulário  (Lida 625 vezes)

ValterSouza

  • Intermediário
  • ***
  • Mensagens: 198
[RESOLVIDO] Imagem Dinâmica em Aba de Formulário
« Online: Setembro 05, 2017, 01:24:27 am »
Tenho um formulário onde coloquei cinco páginas (abas), cada uma com um LABEL e uma IMAGEM inicial.
Haveria como alterar a IMAGEM da aba em função do conteúdo de um campo existente na aba?
Ou, talvez, alterar a cor da fonte do label em função do conteúdo do campo?

« Última modificação: Setembro 08, 2017, 01:49:02 pm por ValterSouza »

Eduardo Henrique Belinatti

  • Intermediário
  • ***
  • Mensagens: 127
    • Prefeitura Municipal de Limeira
    • Email
Re:Imagem Dinâmica em Aba de Formulário
« Responder #1 Online: Setembro 05, 2017, 04:36:55 pm »
Utilizando JavaScript há como encontrar os dados.
Com a biblioteca JQuery um passo inicial é identificar a lista <ul> que contém as páginas <li> :

O nome padrão da classe css para capturar os id's das páginas é scTabLine, então:

Código: [Selecionar]
var paginas = $(".scTabLine").children();


A variável paginas irá conter atributos de cada página, sendo um vetor, onde a paginas[0] contém dados da primeira, paginas[1] da segunda e assim por diante.


A imagem (da primeira página):
Código: [Selecionar]
paginas[0].firstChild.nextSibling.childNodes[1]

O título (da primeira página):
Código: [Selecionar]
paginas[0].firstChild.nextSibling.childNodes[2]


Eduardo Henrique Belinatti
Analista Programador de Sistemas
ehbelinatti@gmail.com

ValterSouza

  • Intermediário
  • ***
  • Mensagens: 198
Re:Imagem Dinâmica em Aba de Formulário
« Responder #2 Online: Setembro 06, 2017, 08:31:58 am »
Eduardo, obrigado pela atenção!
Vou tentar e posto aqui o resultado.

ValterSouza

  • Intermediário
  • ***
  • Mensagens: 198
Re:Imagem Dinâmica em Aba de Formulário
« Responder #3 Online: Setembro 07, 2017, 09:42:25 pm »
Tentei ver a possibilidade de implementar conforme sua sugestão do Eduardo, mas não vi maneira, talvez por minha limitação em JavaScript.
Analisando as necessidades e comentários de outros colegas aqui do forum e, ainda, as propriedades do formulário do tipo ABAS, cheguei à conclusão que o SC não dá suporte nativo à manipulação de suas propriedades.
Vi uma sugestão do colega Haroldo, aqui mesmo no forum, sugerindo usar BLOCOS no formato de apresentação em ABAS. Talvez seja essa a solução, pois esse tipo de ABA tem várias propriedades que podem ser alteradas, como cor de fundo do título da ABA, fonte, etc., o que atenderia a minha necessidade de mudar visualmente a ABA em função do valor de um campo do bloco.
Vou tentar e postarei aqui o resultado, mas se algum colega passou por essa necessidade de puder me dizer como alterar a propriedade background do título da ABA, agradeceria muito.

ValterSouza

  • Intermediário
  • ***
  • Mensagens: 198
Re:Imagem Dinâmica em Aba de Formulário
« Responder #4 Online: Setembro 08, 2017, 09:56:52 am »
Criei a function abaixo através do menu JavaScript, na configuração do projeto. O primeiro comando seria para mudar o background da primeira ABA, o segundo, para desabilitar a segunda ABA:

function sc_form_onload()
{
document.getElementById('id_tabs_0_0').style.background-color: #FF0000;
document.getElementById('id_tabs_0_1').style.pointerEvents= "none";

}

Na execução, ão dá erro, mas também não produz qualquer resultado.
Tentei também criar um Médodo JavaScript através a opção de menu Programação e, no evento OnLoad, chamei o método, mas também não rolou.
Segui o mesmo roteiro daquele exemplo de CADASTRO EM ETAPAS; também não funcionou.


ValterSouza

  • Intermediário
  • ***
  • Mensagens: 198
Re:Imagem Dinâmica em Aba de Formulário
« Responder #5 Online: Setembro 08, 2017, 01:34:57 pm »
Consegui.
Na function acima, coloquei a seguinte sintaxe:

if ({group_id}=1)  // condição para o campo
{
document.getElementById('id_tabs_0_0').style.backgroundColor = "#ff0000";
}
else
{
document.getElementById('id_tabs_0_0').style.backgroundColor = "#FF6600";
}

Espero que ajude quem necessitar disso no futuro.

Eduardo Henrique Belinatti

  • Intermediário
  • ***
  • Mensagens: 127
    • Prefeitura Municipal de Limeira
    • Email
Re:[RESOLVIDO] Imagem Dinâmica em Aba de Formulário
« Responder #6 Online: Setembro 12, 2017, 09:32:15 am »
Opa Valter que bom que funcionou a alteração da cor background.

Para alterar a imagem em uma aba (não sei se você tentou) mas utilizando a sua lógica de identificar o id do elemento diretamente consegui mas precisei repetir o título da aba (supondo que seja Aba 01 porém dá para aproveitar e alterar o título):

Código: [Selecionar]
var nova_imagem = "<img src='/scriptcase/app/prj01/_lib/img/imagem.png' align='absmiddle'>Aba 01";
document.getElementById('id_tabs_0_0').innerHTML(nova_imagem);

com biblioteca JQuery:
Código: [Selecionar]
var nova_imagem = "<img src='/scriptcase/app/prj01/_lib/img/imagem.png' align='absmiddle'>Aba 01";
$('#id_tabs_0_0').html(nova_imagem);

OBS: Utilizei o alinhamento absmiddle já utilizado pelo ScriptCase no elemento, esse atributo serve para alinhar a imagem no centro de forma vertical de acordo com o texto, no caso, da aba.
Eduardo Henrique Belinatti
Analista Programador de Sistemas
ehbelinatti@gmail.com