2 campos sobrepostos sendo um preenchido de acordo a porcentagem

Formulário
#1

Bom dia, galera…

Sou novo com o scriptcase e confesso que estou amando esta ferramenta que tanto nos ajuda na hora de desenvolver nossas aplicações…
Bem gostaria de saber como para colocar um campo sobreposto a outro…
Tenho um campo onde estabeleço algumas cores para ele e de acordo a cor uma porcentagem, pois bem gostaria de posicionar esse outro campo que mostra a porcentagem centrado no campo das cores…
Ah e se possível gostaria de saber como fazer com que o campo de cores fosse preenchido de acordo a porcentagem…
Vocês poderiam me ajudar com isso?
Estou anexando a imagem de como esta hoje e segue alguns códigos que utilizo para preencher o campo de cor e porcentagem…

Criei o método FillProgressBar onde o chamo no onLoad do formulário

$_dt_ini_mani = {dt_ini_manifestacao};

if (empty({dt_fim_manifestacao})) {
$_dt_fim_mani = date(“Y-m-d H:i:s”);
} else {
$_dt_fim_mani = {dt_fim_manifestacao};
}

$_progress_value = 0;
{_progress_value} = ‘0%’;

if ({id_prazos_sla} == 17) {
$_prazo_sla = date(‘Y-m-d H:i:s’, strtotime(’+3 days’, strtotime($_dt_ini_mani)));
} elseif ({id_prazos_sla} == 16) {
$_prazo_sla = date(‘Y-m-d H:i:s’, strtotime(’+2 days’, strtotime($_dt_ini_mani)));
} else {
$_prazo_sla = date(‘Y-m-d H:i:s’, strtotime(’+1 days’, strtotime($_dt_ini_mani)));
}

$_dt_result1 = strtotime($_dt_fim_mani) - strtotime($_dt_ini_mani);
$_dt_result2 = strtotime($_prazo_sla) - strtotime($_dt_ini_mani);
$_progress_value = round((($_dt_result1 / $_dt_result2) * 100), 2);

if ($_progress_value > 100) {
{_progress_value} = “+100,00%”;
} else {
{_progress_value} = number_format($_progress_value,2,",",".") . “%”;
}

if($_progress_value < 30){
$_color_field = ‘green’;
}elseif(($_progress_value >= 30) && ($_progress_value < 70)){
$_color_field = ‘blue’;
}elseif(($_progress_value >= 70) && ($_progress_value < 100)){
$_color_field = ‘yellow’;
}else{
$_color_field = ‘red’;
}

sc_ajax_javascript(’_set_color_field’, array(’_progress_value’, ‘black’));
sc_ajax_javascript(’_set_backgroundcolor_field’, array(’_progress_bar’, $_color_field));

E os métodos JavaScript abaixo:

function _set_color_field(_name_field, _color_field)
document.F1[_name_field].style.color = _color_field;

function _set_backgroundcolor_field(_name_field, _color_field)
document.F1[_name_field].style.backgroundColor = _color_field;

Desde já agradeço imensamente a oportunidade de vir aqui pedir essa ajuda e aqueles ou aquelas que me ajudar…
Eduardo Mendes

exemplo_campo_sc_sla.PNG

#2

Aplique uma cor de fundo ao campo percentual.

#3

Verdade, não tinha pensado nisso… Muito obrigado Haroldo…

Agora, saberia me dizer como fazer com que o background do campo fosse preenchido de acordo a porcentagem até atingir os 100%?

Eduardo Mendes.

#4

Crie um campo do tipo label e adicione a ele conforme a condição um valor html com uma tag div com o fundo na cor desejada e com o valor do percentual indicado.

{campo_label}="

{campo percentual}%
";

Onde $cor conterá o valor da cor desejava conforme o valor do percentual.

#5

Haroldo,

Obrigado pelo retorno…

Eu substitui _progress_value abaixo por _progress_bar e aconteceu o mesmo que você sugeriu… vlw msm, mas o que eu gostaria que acontecesse é que o campo fosse preenchido com a cor conforme a porcentagem fosse aumentando até atingir 100% e com isso o preenchimento total do campo… como se fosse um progress bar…

Entendeu? Vlw hein… abs!!!

Eduardo Mendes

#6

aí seriam duas divs uma de tamanho fixo e a mais interna com tamanho proporcional ao percentual.