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

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