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

Tutoriais
1

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
image693×83 6.09 KB

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
image757×188 9.42 KB

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”

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

image
image832×333 33.4 KB
. 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
image723×180 8.41 KB

4 curtidas
2

Que show Élcio! :clap: :clap: :clap:
Obrigado pela contribuição! :heart_eyes: :heart_eyes: :heart_eyes:

1 curtida
3

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

<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
Layout do Formulário Dinâmico726×139 867 Bytes

image
Formulário Exibido no Site730×202 12 KB

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

1 curtida
4

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 ?

1 curtida
5

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)

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:

    <iframe style="border:none;width:100%;height:100%" 
        src="//www.smartworks.com.br/indicador_barra.php?parametro1={?INPUT AlgumCampo}&parametro2={?PARAM AlgumParametro}">
</iframe>

  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.

1 curtida
6

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

7

Olá @Matheus_Espindola!

Seja bem vindo a comunidade.

Você pode fazer a barra de progresso usando o elemento Progress, 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 da coluna.

1 curtida