Histórico da Página

(Obrigatório)

Informações Gerais

   Legenda: 1 – Inovação 2 – Manutenção (Os demais campos devem ser preenchidos para ambos os processos). 

(Obrigatório)

Objetivo

Converter o portlet existente em Flex para a nova tecnologia HTML, afim de permitir que o usuário tenha um dashboard mais dinâmico.

(Obrigatório)

Pré Requisitos

Framework deve liberar a evolução no componente totvs-widget e melhorias no totvs-chart

http://fluig.totvs.com/portal/p/10097/post/totvs-html-framework/4858721

http://fluig.totvs.com/portal/p/10097/post/totvs-html-framework/4858336

http://fluig.totvs.com/portal/p/10097/post/totvs-html-framework/4860841

Definição da Regra de Negócio

Portlet Funil de Vendas.

O portlet de funil de vendas, disponível em Flex e Área de trabalho do contexto portal,  será convertido para HTML5, utilizando os padrões do Totvs HTML Framework. As funcionalidades do portlet permanecem as mesmas porem não haverá a opção de visualizar em grade, para substituir essa funcionalidade será implementado um detalhamento, onde ao clicar sobre cada série do gráfico, será aberta a interface de lista de oportunidades apresentando apenas a oportunidade as oportunidades que compõe a série do gráfico, ou fazendo uso do detalhamento geral, que será apresentada irá apresentar todas as oportunidades que compõe o gráfico.

Esta versão também não possuirá atualização automática de dados, para permitir que seja possível atualizar os dados apresentados, será disponibilizado um botão de atualização que ao executar realiza a busca dos dados e atualiza o gráfico (protótipo 01).

Este portlet deve ser adicionado no cadastro de programas (men012aa) para os grupos de segurança "AAT, REP, GCM"

Configurações Gráfico

Este portlet possuirá uma área de configuração para filtrar os dados que devem gerar o gráfico e como deve ser visualizado, são eles;

  Visão:

    Funil por: [Valor, Quantidade, Quantidades Número de Itens]Vidas]

   O item Número de vidas deve ser apresentado somente quando o gestão de planos estiver ativo.

  Filtro de dados:

    Estratégia de Vendas: Permite selecionar uma estratégia de venda.

    Responsável: Permite selecionar o responsável pela oportunidade.

    Campanha: Permite selecionar uma campanha de venda.

    Data de Previsão de fechamento: Permite informar um range de datas para localizar as oportunidades previstas para serem fechadas neste período.

    Data de fechamento: Permite informar um range de datas para localizar as oportunidades fechadas neste período.

    Data de Criação: Permite informar um range de datas para localizar as oportunidades cadastradas neste período.

    Total de Oportunidades: Permite informar quantas oportunidades serão apresentadas no gráfico.

    Considerar suspensos: Permite informar que as oportunidades suspensas serão consideradas na busca.

    Ao acessar a interface de filtro, deve-se carregar os filtros já parametrizado no acesso anterior.

    Os dados que serão apresentados na seleção acima devem seguir a mesma regra do filtro avançado de Oportunidade.

    Ao aplicar o filtro, devem ser consideradas as mesmas regras existentes no filtro avançado de oportunidade, desta forma o usuário poderá visualizar apenas as oportunidades que lhe são permitidas, além disto, os filtros informados devem ser armazenados para que no próximo acesso ao portlet, os mesmos filtros sejam considerados na busca.

   Os filtros armazenados são para o portlet x usuário, ou seja, como o portlet pode estar em mais de um dashboard, o filtro é único pra ele, independente de onde estar sendo apresentado.

   Visto que o portlet de funil existente no contexto portal já possui todas as regras definidas e ajustadas para o contexto html, deve-se reaproveitar as mesmas sendo necessário ajustes na parte visual de componente de gráfico.

Gráfico

  Deve-se utilizar gráfico de colunas funil (protótipo 01) e barras (protótipo 02).

  Ao acessar o portlet, deve-se utilizar a visão funil, e o número de colunas a ser apresentado deverá respeitar a configuração "Total de Oportunidades", seguindo pela legenda que irá possuir a razão social da conta da oportunidade e o valor da oportunidadecaso o usuário pressionar o link "Previsto x Realizado" deve-se apresentar o gráfico de barras.

  As cores para as séries do gráfico serão geradas aleatoriamentedos valores realizados do gráfico deverão respeitar a cor que foi definida no cadastro da fase da estratégia de venda, já as séries dos valores previstos (metas) devem possuir uma cor azul.

  Ao acessar o portlet, deve-se realizar a pesquisa de oportunidades baseado no filtro parametrizado, quando a pesquisa não retornar resultados, o gráfico deve ficar vazio e deverá ser apresentada uma mensagem para o usuário informado que não foram encontradas oportunidades com os filtros informados.

  Quando a pesquisa de dados não tenha sucesso devido a ausência de configuração, apresentar uma mensagem para o usuário solicitando que a configuração seja realizada.  Informações sobre o componente de gráfico pode ser obtidas aqui: Totvs Chart

  http://demos.telerik.com/kendo-ui/funnel-charts/funnel-labels

 Cliente Selecionado

  O widget deverá escutar o evento de seleção de cliente do widget de cliente selecionado de distribuição.

  Quando o evento for disparado deverá verificar se houve um cliente selecionado, se o cliente selecionado estiver disponível no CRM, a pesquisa deverá ser refeita levando em consideração o cliente selecionado e deverá ser apresentado um identificador visual junto ao hiperlink de detalhamento, afim de indicar que os dados estão considerando a conta selecionada.

  Quando não houver conta selecionada a pesquisa deverá ser refeita considerando apenas os filtros do widget e o icone de pessoa deverá ser emitido.

  Caso exista uma conta selecionada e o usuário acesse as configurações e altere o filtro do widget do CRM, a pesquisa deverá ser realizada considerando os novos filtros e a conta seleciona.

  Evento: $rootScope.$on('selectedcustomer', function(event) {

  Icone: glyphicon glyphicon-user

Fonte exemplo para geração do gráfico de barras

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="chart"></div>
<script>
    $("#chart").kendoChart({
      
      series: [{        
        type: "bar",
        zIndex: 1,
        colorField: "valueColor",
        tooltip: {
          visible: true,
          template: "Realizado: ${category} : ${value}"
        },
        data: [
            { name: "Realizado", value: 70, valueColor: "silver" },
          { value: 15, valueColor: "orange" },
          { value: 10, valueColor: "yellow" },
          { value: 5, valueColor: "#E0EEE0" }
        ]
      },{
        //name: "Previsto",
        type: "bar",
        zIndex: 1,
        color: "#36648B",
        tooltip: {
          visible: true,
          template: "Previsto: ${category} : ${value}"
        },
        data: [60,20,10,10]
      }],
      valueAxis: {
         majorGridLines: {
           visible: true
         }
      },
      categoryAxis: {
        categories: ["Prospecção", "Primeiro Contato", "Negociação",  "Fechamento"],
        majorGridLines: {
                        visible: false
                    }
      }
    });
</script>
</body>
</html>

<!-- testar em http://dojo.telerik.com/IWiZO -->

Opcional

Protótipo de Tela

Protótipo 01

Prototipo 02

(Opcional)

Estrutura de Menu

<Informações utilizadas na linha Datasul>.

Procedimentos

Programas