Crie suas próprias telas

O Next BP possui um sistema de "views", sendo possível carrega-las em abas ou em modal.

Uma view é composta por dois arquivos, um HTML e outro JavaScript.

Segue abaixo um exemplo prático:

[Diretório Next BP]/webservice/especificos/view/exemplo/modal.html

<div class="modal bs-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn_cancelar close">&times;</button>
                <h4 class="modal-title">Exemplo 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 Fantasia</label>
                            <input type="text" class="edt_nome form-control" maxlength="50" placeholder="Filtro por nome fantasia">
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <label for="edt_razao_social">Razão Social</label>
                            <input type="text" class="edt_razao_social form-control" maxlength="50" placeholder="Filtro por razão social">
                        </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" maxlength="50" placeholder="Filtro por telefone">
                        </div>
                    </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_pesquisar btn btn-primary">Pesquisar</button>                
            </div>
        </div>
    </div>
</div>

[Diretório Next BP]/webservice/especificos/view/exemplo/modal.js

define([], function() {

    var Exemplo_Modal = function(html_id) {
        'use strict';
        var main = this;

        // janela
        this.html_id = html_id;
        this.dialog = $('#' + this.html_id);
        this.modal = this.dialog.find('.modal');
        this.modal.attr('id', this.html_id + '_modal');
        this.onselect = null;
        this.onclose = null;

        // elementos
        this.edt_nome = this.dialog.find('.edt_nome');
        this.edt_razao_social = this.dialog.find('.edt_razao_social');
        this.edt_telefone = this.dialog.find('.edt_telefone');
        this.btn_cancelar = this.dialog.find('.btn_cancelar');
        this.btn_pesquisar = this.dialog.find('.btn_pesquisar');        

        // métodos
        this.show = function(nome) {
            set_focus(main.edt_nome);
            show_modal(main.modal.attr('id'));
        };

        // close
        this.close = function() {
            close_modal(main.modal.attr('id'));

            if ((typeof main.onclose != "undefined") && (main.onclose)) {
                main.onclose();
            }  
        };

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

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

        this.btn_pesquisar.unbind('click');
        this.btn_pesquisar.click(function() {
            alert_modal('Título', 'Clicou em Pesquisar');
        });

    }

    return Exemplo_Modal;

});

Para abrir a view, execute o código:

View.load(
    "exemplo/modal",
    function(html_id, exemplo_modal){
        exemplo_modal.show();
    },
    View.ABA.NAO,
    true
);

Comportamento no ambiente novo (beta)

As telas criadas conforme este manual rodam sem alteração no ambiente novo: o mesmo par .html + .js, o mesmo define([], function() { ... }), o mesmo View.load(..., true). O que muda é onde a tela aparece e quais bibliotecas estão disponíveis.

Onde a tela abre

O ambiente legado abre telas em abas internas; o novo é uma aplicação de página única. O View.ABA passou a ser lido assim:

`View.ABA`	Ambiente novo
`NAO`	a tela é anexada à página e se exibe sozinha, via `show_modal` (é o caso do exemplo acima)
`POPUP`	painel lateral
`SIM` / `MULTIPLAS`	página própria, no endereço `/tela/<pasta>/<nome>`

Duas consequências: o endereço da página pode ser recarregado ou compartilhado (a tela remonta), mas nesse caminho o callback do View.load não é executado — tela que dependa dele para receber parâmetros abre vazia. E não há mais várias telas abertas em abas ao mesmo tempo.

Bibliotecas disponíveis

jQuery continua disponível (3.7.1), assim como os helpers globais mais usados — show_modal, close_modal, set_focus, add_option, alert_saved, alert_modal, somar_horas, formatDate, FORMULARIO, entre outros. As varreduras declarativas também: [permissao], [translate] e [manual] continuam valendo, e as classes cep, cpf e cnpj continuam aplicando máscara.

O que não está disponível:

Recurso	O que acontece	Alternativa
DevExtreme (`dxDataGrid`, `dxDateBox`, `dxSelectBox`, ...)	a chamada é ignorada e um aviso aparece no console do navegador	a tela precisa ser reescrita com os componentes do ambiente novo
`selectpicker`, `maskMoney`, `bootstrapSwitch`, `bootstrapToggle`, `tooltip`, `clockpicker`, `datepicker`, `tinymce`, `sortable`	idem: a chamada é ignorada, o elemento continua funcionando na forma nativa (`<select>`, `<input>`, `<textarea>`)	componentes do ambiente novo

Nenhuma dessas ausências interrompe a tela: o restante do código continua executando. Se algo não aparecer como esperado, o console do navegador registra a causa com o prefixo [PE].

Aparência

O layout Bootstrap 3 é preservado — grid (row, col-md-*), formulários, painéis, abas, rótulos, alertas e tabelas mantêm as mesmas proporções e pontos de quebra (768, 992 e 1200px). As cores, porém, passam a ser as do ambiente novo. Onde a tela usa btn-primary, text-primary ou label-primary, a cor é a da marca — e não a do tema de cor escolhido pela empresa, que não existe no ambiente novo.

Carregamento

jQuery e a folha de compatibilidade só são baixados quando uma tela específica é efetivamente aberta. Instalações sem telas específicas não carregam nada disso.

Next BP

Manual do Usuário