nfsUI — Documentação de Uso

Utilitário global de interface do sistema NFS. Disponível via window.nfsui após o carregamento do bundle.

Cores de Fundo

setItemBackgroundColor(el, hex)

Define a cor de fundo de um elemento diretamente.

nfsui.setItemBackgroundColor('#meu-card', '#ffcc00');

setParentBackgroundColor(el, hex, level)

Define a cor de fundo de um ancestral do elemento, subindo level níveis na árvore DOM.

// Sobe 2 níveis a partir do botão e pinta o ancestral
nfsui.setParentBackgroundColor('#btn-salvar', '#e74c3c', 2);

ClosestBackGroundColor(hex, search)

Define a cor de fundo do ancestral mais próximo que corresponde ao seletor informado.

// Usado normalmente dentro de um handler jQuery com `this`
$('#meu-input').on('focus', function() {
  nfsui.ClosestBackGroundColor.call(this, '#fffde7', '.form-group');
});

Janelas de Confirmação

windowConfirm(...)

Janela de confirmação padrão com dois botões. Atalhos: Enter/S confirmam, Esc/N/C cancelam.

nfsui.windowConfirm(
  'Deseja excluir este registro?',   // mensagem
  'Excluir',                         // botão confirmar
  'Cancelar',                        // botão cancelar
  function(seq) { excluir(seq); },   // ação confirmar
  '',                                // ação cancelar (vazia = nenhuma)
  42,                                // parâmetro para ação confirmar
  null,                              // parâmetro para ação cancelar
  'Confirmação'                      // título
);

// Com parâmetros em array [tabela, seq_db]:
nfsui.windowConfirm(
  'Confirmar exclusão?',
  'Sim', 'Não',
  function(tabela, seq) { deletar(tabela, seq); },
  '',
  ['usuarios', 7],
  null
);

windowConfirmWithInput(...)

Igual ao windowConfirm, porém sem atalhos de teclado — indicado quando a janela contém campos de entrada.

const formulario = '<input id="obs" class="form-control" placeholder="Observação"/>';

nfsui.windowConfirmWithInput(
  formulario,
  'Salvar',
  'Cancelar',
  function() {
    const obs = $('#obs').val();
    salvarObservacao(obs);
  },
  '',
  null,
  null,
  'Informe uma observação'
);

windowConfirmColored(...)

Janela de confirmação com botões coloridos e tema Bootstrap. Permite customizar tema, ícone e animação.

nfsui.windowConfirmColored(
  'Tem certeza que deseja aprovar?',
  'Aprovar',
  'Cancelar',
  function(id) { aprovar(id); },
  '',
  99,
  null,
  'Aprovação',
  { theme: 'bootstrap', type: 'green', icon: 'fa fa-check' }
);

Opções disponíveis em options:

windowConfirmTripleAction(...)

Janela com três botões: confirmar, ação alternativa e cancelar.

nfsui.windowConfirmTripleAction(
  'O que deseja fazer com o registro?',
  'Aprovar',                              // botão confirmar
  'Cancelar',                             // botão cancelar
  'Arquivar',                             // botão alternativo
  function(id) { aprovar(id); },          // ação confirmar
  '',                                     // ação cancelar
  function(id) { arquivar(id); },         // ação alternativa
  15,                                     // parâmetro confirmar
  null,                                   // parâmetro cancelar
  15,                                     // parâmetro alternativo
  'Gerenciar Registro'                    // título
);

Alertas

windowAlert(...)

Alerta com um único botão de confirmação.

nfsui.windowAlert(
  'Operação realizada com sucesso!',
  'Ok',
  function() { location.reload(); },
  null,
  'Sucesso',
  { type: 'green', icon: 'fa fa-check' }
);

alertWarning(title, message)

Alerta de aviso com ícone de atenção (laranja).

nfsui.alertWarning('Atenção', 'O prazo de validade está próximo do vencimento.');

alertInfo(title, message)

Alerta informativo com ícone de informação (verde).

nfsui.alertInfo('Informação', 'Os dados foram sincronizados com sucesso.');

Prompts de Entrada

prompt(titulo, mensagem, defaultValue, callbackOk)

Exibe uma caixa de entrada de texto livre. Valida se o campo não está vazio.

nfsui.prompt(
  'Renomear',
  'Informe o novo nome:',
  'Nome atual',
  function(novoNome) {
    renomear(novoNome);
  }
);

promptInt(titulo, mensagem, defaultValue, callbackOk)

Igual ao prompt, porém aceita apenas valores numéricos inteiros. Rejeita entradas não numéricas.

nfsui.promptInt(
  'Quantidade',
  'Informe a quantidade de itens:',
  '1',
  function(quantidade) {
    processarQuantidade(parseInt(quantidade));
  }
);

Janela de Ajuda

helpWindow(helpPage, helpId, portlet)

Abre uma janela de ajuda contextual carregando o conteúdo via AJAX (POST user/help/{helpPage}/{helpId}/{portlet}).

nfsui.helpWindow('equipamentos', 12);
nfsui.helpWindow('relatorios', 5, 'painel-producao');

Janelas e Popups

newWindow(options)

Abre uma URL em uma janela popup centralizada ou em nova aba. Adiciona ?popup=1 automaticamente.

// Popup centralizado
nfsui.newWindow({ url: 'equipamentos/detalhes/42' });

// Nova aba
nfsui.newWindow({ url: 'relatorios/exportar/7', tab: true });

// Sem adicionar ?popup=1
nfsui.newWindow({ url: 'https://exemplo.com', nopopup: true, tab: true });

// Tamanho e sem redimensionamento
nfsui.newWindow({ url: 'mapas/rota/3', w: 900, h: 600, resizable: false });

Opções disponíveis:

openReport(reportName, urlParams)

Atalho para abrir um relatório em popup. Monta a URL no padrão reports/{reportName}?{urlParams}.

nfsui.openReport('producao-diaria', 'equipamento=5&data=2026-05-01');

Modais Bootstrap

showModalNfs(content, title)

Exibe o modal padrão #win-modal com largura de 100%.

nfsui.showModalNfs('<p>Conteúdo do modal</p>', 'Título do Modal');

showModalNfsFitContent(content, title)

Exibe o modal padrão com largura ajustada ao conteúdo.

nfsui.showModalNfsFitContent('<img src="grafico.png"/>', 'Gráfico');

showDynamicSizedModal(content)

Exibe o modal centralizado com tamanho dinâmico (fit-content). Sem título.

nfsui.showDynamicSizedModal('<table>...</table>');

showModal(modal)

Abre um modal Bootstrap já presente no DOM.

nfsui.showModal('#modal-exportar');

showModalNfsGIS(content, { closeButtonText, header, footer })

Modal com configurações específicas para o módulo GIS. Permite customizar botão de fechar, cabeçalho e rodapé com botões extras.

nfsui.showModalNfsGIS('<div id="mapa"></div>', {
  closeButtonText: 'Fechar mapa',
  header: { enabled: true, text: 'Visualização GIS' },
  footer: {
    enabled: true,
    customButtons: [
      { text: 'Exportar', class: 'btn btn-primary', id: 'btn-exportar' }
    ]
  }
});

showModalNfsCustom(content, options)

Modal totalmente customizável: classe, CSS, cabeçalho, rodapé, botões e botão de fechar.

nfsui.showModalNfsCustom('<form id="form-edicao">...</form>', {
  className: 'modal-edicao',
  css: { maxWidth: '700px' },
  header: { text: 'Editar Registro', css: { background: '#004977', color: '#fff' } },
  footer: { css: { justifyContent: 'flex-end' } },
  buttons: [
    {
      text: 'Salvar',
      class: 'btn btn-success',
      id: 'btn-salvar',
      attributes: "type='button'",
      before: false
    }
  ],
  closeBtn: { text: 'Cancelar' }
});

Manipulação de DOM

isVisible(element)

Verifica se um elemento está visível.

if (nfsui.isVisible('#painel-filtros')) {
  aplicarFiltros();
}

hide(element) / show(element)

Oculta ou exibe um elemento.

nfsui.hide('#mensagem-erro');
nfsui.show('#formulario-edicao');

addClass(element, classe) / removeClass(element, classe)

Adiciona ou remove uma classe CSS.

nfsui.addClass('#btn-enviar', 'disabled');
nfsui.removeClass('#btn-enviar', 'disabled');

changeClass(element, classeRemover, classeAdicionar)

Substitui uma classe por outra em um único passo.

nfsui.changeClass('#status-badge', 'badge-warning', 'badge-success');

get(element)

Retorna o elemento encapsulado em jQuery.

const $el = nfsui.get('#meu-campo');
$el.val('novo valor');

has(divId)

Verifica se um elemento existe no DOM. Retorna boolean.

if (nfsui.has('#painel-avancado')) {
  inicializarPainelAvancado();
}

setReadOnly(el)

Torna um campo de formulário somente leitura.

nfsui.setReadOnly('#campo-codigo');

getInputValue(el)

Retorna o valor atual de um campo de formulário.

const valor = nfsui.getInputValue('#campo-quantidade');
console.log(valor); // '10'

Notificações

toastrError(message)

Exibe uma notificação de erro flutuante via Toastr.

nfsui.toastrError('Não foi possível salvar o registro.');

Cores do Sistema

getColor(color, withHashtag)

Retorna o valor hexadecimal de uma cor da paleta Simova.

nfsui.getColor('simova-blue');          // '#004977'
nfsui.getColor('simova-gold');          // '#cd8600'
nfsui.getColor('simova-gold-lighter');  // '#eaab3e'
nfsui.getColor('simova-black');         // '#313133'
nfsui.getColor('simova-blue', false);   // '004977' (sem #)

QR Code

generateQrCode(text)

Gera um QR Code a partir de um texto ou URL e o exibe em um modal de informação.

nfsui.generateQrCode('https://sistema.simova.com.br/equipamentos/42');
nfsui.generateQrCode('NFS-EQP-00042');