# Componente de Barra de Progresso com Indicadores de Realização e Meta

**URL:** <https://community.latromi.com.br/t/componente-de-barra-de-progresso-com-indicadores-de-realizacao-e-meta/499>\
**Category:** Tutoriais\
**Created:** [Outubro 28, 2020, 8:49pm UTC](https://community.latromi.com.br/t/componente-de-barra-de-progresso-com-indicadores-de-realizacao-e-meta/499 "2020-10-28T20:49:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![elcio.rosa](https://community.latromi.com.br/user_avatar/community.latromi.com.br/elcio.rosa/32/373_2.png) [@elcio.rosa](https://community.latromi.com.br/u/elcio.rosa)\
**Post date:** [Outubro 28, 2020, 8:49pm UTC](https://community.latromi.com.br/t/componente-de-barra-de-progresso-com-indicadores-de-realizacao-e-meta/499/1 "2020-10-28T20:49:50Z")

</div>

Hey buddy,

Em contribuição a comunidade, compartilho um componente que pode ser facilmente utilizados em **consultas** e **formulários** do Latromi: **barra de progresso com indicador de realização e indicador de meta**.

 ![image](https://community.latromi.com.br/uploads/default/original/1X/4026ea3410d6e8a65a27e7018b46cec06b782960.png)

Para utilizar o componente, sigas as etapas.

**1** - Crie uma consulta (GRID) inserindo uma consulta SQL, atribua um valor para uma STRING passando os valores em um **iframe** conforme abaixo.

 ![image](https://community.latromi.com.br/uploads/default/original/1X/a7b7d16e7ba63ca0f6bc631f2ba25485be25eefb.png)

**2** - Defina os valores dos parametros da **URL** de acordo com respectivos paramêtros da sua consulta concatenando-os.

**3** - Para utilização deste componente utilize o seguinte link:  
“[http://www.smartworks.com.br/indicador\_barra.php?labelsuperior=Faturamento:%20R$%20164.321.812,00&fontsizefat=16&percfat=65&cor=lawngreen&percmeta=55&labelmeta=R$%20125.565%20meta%20atingida%20até%20o%20momento](http://www.smartworks.com.br/indicador_barra.php?labelsuperior=Faturamento:%20R%24%20164.321.812,00&fontsizefat=16&percfat=65&cor=lawngreen&percmeta=55&labelmeta=R%24%20125.565%20meta%20atingida%20at%C3%A9%20o%20momento)”

**4** - Abaixo a relação de parâmetros que deve utilizar, passando os valores pelo método GET:

 ![image](https://community.latromi.com.br/uploads/default/original/1X/a3068d2c9e95307d56da60302e901dd9b8d58e15.png) . Caso não tenha interesse em utilizar algum dos paramêtros poderá deixar em branco, ou simplesmente não utilizar.

**5** - Agora que o componente está na sua biblioteca, poderá incorporar aos seus formulários e personalizar de acordo com os seus atributos.

 ![image](https://community.latromi.com.br/uploads/default/original/1X/8b926b0103ce75b460c46ee2cd62a5389e46a80a.png)

---

<div class="post-metadata">

**Author:** ![thiago.cascaes](https://community.latromi.com.br/letter_avatar_proxy/v4/letter/t/8e8cbc/32.png) [@thiago.cascaes](https://community.latromi.com.br/u/thiago.cascaes)\
**Post date:** [Outubro 28, 2020, 9:10pm UTC](https://community.latromi.com.br/t/componente-de-barra-de-progresso-com-indicadores-de-realizacao-e-meta/499/2 "2020-10-28T21:10:18Z")

</div>

Que show Élcio! 👏 👏 👏  
Obrigado pela contribuição! 😍 😍 😍

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Outubro 29, 2020, 3:01pm UTC](https://community.latromi.com.br/t/componente-de-barra-de-progresso-com-indicadores-de-realizacao-e-meta/499/3 "2020-10-29T15:01:48Z")

</div>

Show @elcio.rosa!

Obrigado pela contribuição.

Complementando o seu exemplo, este gráfico também poderia ser usado dentro de um campo do tipo **HtmlElement** do Formulário, sem a necessidade de utilizar uma Consulta.

A marcação HTML do `iframe` poderia ser adicionada na propriedade **Template Html** ou através da instrução **Popular Campos e Variáveis** dos Procedimentos.

Além do mais, como os campos do Formulário já possuem altura e largura definida, o `iframe` poderia usar `width:100%; height: 100%`:

```auto
<iframe style="border:none;width:100%;height:100%" 
        src="//www.smartworks.com.br/indicador_barra.php?labelsuperior=Faturamento:%20R%24%20164.321.812,00&fontsizefat=16&percfat=65&cor=lawngreen&percmeta=55&labelmeta=R%24%20125.565%20meta%20atingida%20at%C3%A9%20o%20momento">
</iframe>

```

 ![image](https://community.latromi.com.br/uploads/default/original/1X/98a2763f700cb84d3140f5139a4dbfa4cfef5f7f.png "Layout do Formulário Dinâmico")

 ![image](https://community.latromi.com.br/uploads/default/original/1X/65e87f8a9b0be399444ab095d797bcbca1e24670.png "Formulário Exibido no Site")

Outra dica, seria omitir o protocolo `http`, deixando apenas `//` no início da URL. Dessa maneira, ela vai assumir o protocolo no qual o site (neste caso o Latromi) está sendo executado.

Antes  
`http://www.smartworks.com.br/indicador_barra.php`

Depois  
`//www.smartworks.com.br/indicador_barra.php`

---

<div class="post-metadata">

**Author:** ![josimar.picoloto](https://community.latromi.com.br/user_avatar/community.latromi.com.br/josimar.picoloto/32/1102_2.png) [@josimar.picoloto](https://community.latromi.com.br/u/josimar.picoloto)\
**Post date:** [Outubro 29, 2020, 3:42pm UTC](https://community.latromi.com.br/t/componente-de-barra-de-progresso-com-indicadores-de-realizacao-e-meta/499/4 "2020-10-29T15:42:41Z")

</div>

Daniel, vou fazer uma pergunta de amador hehehe

Fiquei com dúvidas de onde vou passar os valores ‘variáveis’ no link para que o indicador se molde conforme os valores vão mudando na consulta.

Poderia dar um exemplo disso ?

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Outubro 29, 2020, 4:14pm UTC](https://community.latromi.com.br/t/componente-de-barra-de-progresso-com-indicadores-de-realizacao-e-meta/499/5 "2020-10-29T16:14:13Z")

</div>

Olá @josimar.picoloto

Essa é uma pergunta bem pertinente. Segue resposta abaixo

## Consulta

Se você for usar na Consulta como no exemplo do @elcio.rosa, você vai precisar concatenar os parâmetros da URL no Comando SQL. Algo parecido com isso:

(Exemplo usando PostgreSQL)

```sql
SELECT 
'<iframe ' 
|| ' src="//www.smartworks.com.br/indicador_barra.php'
|| '?labelsuperior=Faturamento:%20R%24%20' || CAST(tabela.valormeta AS VARCHAR)
|| '&fontsizefat=16'
|| '&percfat=' || CAST(tabela.percfat AS VARCHAR)
|| '&cor=lawngreen'  
|| '&percmeta=' || '{?PARAM PercMeta}'
|| '&labelmeta=R%24%20' || CAST(tabela.valormetaatingida AS VARCHAR) || '%20meta%20atingida%20at%C3%A9%20o%20momento'
||'"></iframe>'
FROM tabela
WHERE campo.numero = 1

```

## Formulário

### Atualização usando Record

Se você for usar o gráfico em um campo do tipo **HtmlElement** do Formulário Dinâmico, você vai usar a mesma técnica de concatenação da Consulta, porém em um Procedimento:

1. Adicione uma instrução do tipo **Criar Record** para montar o Comando SQL

2. Adicione uma instrução **Popular Campos e Variáveis** para preencher o campo do tipo **HtmlElement** com o valor retornado no Comando SQL da Record.

### Usando Template Html

Também é possível usar a substituição de parâmetros na propriedade **Template Html** , mas essa abordagem é bem menos flexível:

1. Adicione a código HTML na propriedade Template Html do campo do tipo HtmlElement, usando a marcação dos campos que deseja substituir. Algo parecido com isso:

2. Sempre que quiser atualizar o gráfico utilizando o valor atualizado dos campos, basta chamar a instrução **Atualizar Fonte de Dados** do Procedimento, e marcar o campo do tipo HtmlElement que deseja atualizar.

---

<div class="post-metadata">

**Author:** ![Matheus\_Espindola](https://community.latromi.com.br/user_avatar/community.latromi.com.br/matheus_espindola/32/47_2.png) [@Matheus\_Espindola](https://community.latromi.com.br/u/Matheus_Espindola)\
**Post date:** [Maio 7, 2021, 6:27pm UTC](https://community.latromi.com.br/t/componente-de-barra-de-progresso-com-indicadores-de-realizacao-e-meta/499/6 "2021-05-07T18:27:56Z")

</div>

Boa tarde, o link em questão esta quebrado.  
Teria outra alternativa ?

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Maio 10, 2021, 3:12pm UTC](https://community.latromi.com.br/t/componente-de-barra-de-progresso-com-indicadores-de-realizacao-e-meta/499/7 "2021-05-10T15:12:51Z")

</div>

Olá @Matheus_Espindola!

Seja bem vindo a comunidade.

Você pode fazer a barra de progresso usando o elemento [Progress](https://www.w3schools.com/tags/tag_progress.asp), nativo do HTML.

O resultado será mais simples do que o componente compartilhado pelo @elcio.rosa, mas você pode incrementar com outros elementos HTML.

No Formulário Dinâmico, use um campo do tipo **HtmlElement** para escrever o código HTML.

Se for uma consulta, você pode montar um código HTML para ser _Injetado_ na página diretamente pelo SQL ou usar o [Template HTML](https://community.latromi.com.br/t/novo-template-html/538) da coluna.