[RESOLVIDO] Imagem Dinâmica em Aba de Formulário

Formulários
#1

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?

1 Curtida
#2

Utilizando JavaScript há como encontrar os dados.
Com a biblioteca JQuery um passo inicial é identificar a lista

    que contém as páginas
  • :

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

    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):

    paginas[0].firstChild.nextSibling.childNodes[1]

    O título (da primeira página):

    paginas[0].firstChild.nextSibling.childNodes[2]
#3

Eduardo, obrigado pela atenção!
Vou tentar e posto aqui o resultado.

#4

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.

#5

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.

#6

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.

#7

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):

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:

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.