Customizando Menu da Tela de Oportunidades

Neste post iremos realizar a customização do menu superior da tela de Oportunidades, inserindo botões que serão responsáveis por chamar uma modal quando acionados.

Primeiro, devemos nos certificar de que a rotina padrão possua um PE por meio da localização do seguinte trecho:

View.loadPE('Oportunidade_Detalhes_Novo', main);

Posteriormente, devemos criar um arquivo com o nome do PE que está sendo carregado no arquivo padrão de orçamentos dentro do diretório peJS, conforme ilustra a imagem a seguir:

Após isso, devemos codificar onde iremos colocar nossos botões, no exemplo a seguir estão sendo inseridos ao lado dos botões Salvar e Cancelar:


define([], function() {

	var Oportunidade_Detalhes_Novo_PE = function(main_externo) {
	    'use strict';

        //Variáveis
        var botao_teste_js   = $("");
        var botao_teste_html = $("");

        botao_teste_js.click(function(){
            alert_modal('Exemplo de Modal JS', 'Este modal foi criado em JS', 
                // Confirmar alterações
                'Ok', 
                function() { 
                    alert('Cliquei em OK');
                },
                
                // Cancelar alterações
                true, 
                'Cancelar', 
                function() { 
                    return; 
                }
            );
        });

        botao_teste_html.click(function(){
            View.load('exemplo_tela', function(html_id, detalhes) {
                    detalhes.onclose = null;
                    detalhes.show(null, FORMULARIO.NOVO);
                }, 
                View.ABA.NAO, 
                'exemplo_tela'
            );   
        });

        main_externo.div_group_menu_superior.append(botao_teste_js);
        main_externo.div_group_menu_superior.append(botao_teste_html);
    }

    return Oportunidade_Detalhes_Novo_PE;
});

 

No caso da variavel botao_teste_html o procedimento para carregar o modal ocorre da seguinte forma:

– O html responsável por montar o modal bem como seu javascript (para executar as ações) devem estar contidos na pasta view, dentro de especificos:

Abaixo seu código:

– HTML


 
<div class="modal bs-modal-lg" id="modal_exemplo" tabindex="-1" role="dialog" aria-labelledby="modal_agenda_contatos_parametros_label" aria-hidden="true">
 
<div class="modal-dialog modal-lg">
 
<div class="modal-content">
 
<div class="modal-header">
 
<button type="button" class="btn_cancelar close" aria-hidden="true">&times;</button>
 
<h4 class="modal-title" id="modal_agenda_contatos_parametros_label">Exemplo de Modal</h4>
 
</div>
 
<div class="modal-body">
 
<div class="row">
 
<div class="col-md-4 col-sm-4">
 
<div class="form-group">
 
<label for="edt_nome">Nome Completo</label>
 
<input type="text" class="edt_nome_completo form-control" id="edt_nome" maxlength="50" placeholder="Filtro por nome fantasia">
 
</div>
 
</div>
 
<div class="col-xs-12 col-sm-6 col-md-2 col-lg-2">
 
<div class="form-group">
 
<label for="cbo_motivo" translate="agenda_ativos.bloqueado">Bloqueado?</label><br>
 
<input type="checkbox" class="chk_bloqueado checkbox_bootstrap_toggle">
 
</div>
 
</div>
 
<div class="col-md-3 col-sm-3">
 
<div class="form-group">
 
<label for="edt_telefone">Telefone</label>
 
<input type="text" class="edt_telefone form-control" id="edt_telefone" maxlength="50" placeholder="Filtro por telefone">
 
</div>
 
</div>
 
</div>
 
<div class="row">
 
<div class="col-xs-12">
 
<table class="table table-bordered table-responsive tabela_padrao_bp col-xs-12 col-sm-6 col-md-2 col-lg-2" data-table-name="oportunidade_pe">
 
<thead>
 
<th>ID</th>
 
<th>Nome</th>
 
<th>Cor</th>
 
</thead>
 
<tbody>
 
</tbody>
 
</table>
 
</div>
 
</div>
 
</div>
 
<div class="modal-footer" style="bottom: 0px;">
 
<button type="button" class="btn_cancelar btn btn-default">Cancelar</button>
 
<button type="button" class="btn_salvar btn btn-primary">Salvar</button>
 
</div>
 
</div>
 
</div>
 
</div>
 

 

– Javascript


define([], function() {

    var Exemplo_Tela = function(html_id, detalhes) {
        'use strict';
        var main = this;

        //janela
        this.html_id = html_id;
        this.dialog = $('#' + this.html_id);
        this.title = 'Exemplo Modal';
        this.onclose = null;
        this.tipo = null;
        this.modal = this.dialog.find('.modal');
        this.tabela = this.dialog.find('.tabela_padrao_bp');

        //elementos
        this.btn_cancelar = this.dialog.find('.btn_cancelar');
        this.btn_salvar = this.dialog.find('.btn_salvar');
        this.edt_nome_completo = this.dialog.find('.edt_nome_completo');

        //métodos
        this.show = function(tela_id, tipo) {
            switch (tipo) {
                case FORMULARIO.NOVO:
                    break;
            }

            main.tipo = tipo;    
            main.carregar_dados_tabela();
            show_modal(main.modal.attr('id'));
        };  

        this.carregar_dados_tabela = function(){
           WS.get("exemplo_frisokar/listar/",
                null,
                function(response) {
                    if (response){
                        var dados = response;
                    
                        for(var i=0; i < dados.length; i++){
                            main.tabela.append(''+dados[i].id+''+dados[i].nome+''+dados[i].cor+''); 
                        } 
                    } 
               } 
           ); 
        } 
         
        this.close = function() { 
           close_modal(main.modal.attr('id'));
           if ((typeof main.onclose != "undefined") && (main.onclose)) { 
               main.onclose(); 
           } 
        }; 

        this.unload = function() { 
             main.close(); View.unload(this.html_id); 
        } 

        this.btn_cancelar.unbind('click') 
             .click(function(evt){ 
                  main.unload(); 
              }); 

        this.btn_salvar.unbind('click') 
           .click(function(evt){ 
                 WS.post("exemplo_frisokar/salvar/", 
                          { 
                              nome_completo: main.edt_nome_completo.val() 
                          }, 
                          function(response) { 
                              if (response){ 
                                  alert(JSON.stringify(response)); 
                              } 
                          } 
           ); 
      }); 
    } 
    return Exemplo_Tela; 
});

Abaixo o resultado: