FrontEnd - Guia para componentes customizados

Guia para tirar as dúvidas básicas de desenvolvimento de componentes customizados do front-end novo, exemplo: “como pego a unidade logada?”.

1 Instruções
2 Artigos relacionados

Instruções

Unidade logada, como obter?

Adicione o private app: AppMainComponentno construtor
this.app?.unidadeAtual?.id

Operador logado, como obter?

Adicione o private loginService: LoginService no construtor
this.loginService.usuario

Como obter os Parâmetros (Comerciais e GTK) ?

Este tópico esta amplamente explicado aqui:
Buscar Parâmetros pelo Front novo

Como abrir uma Outra Tela (em aba)?

De preferência no service, adicione private abaService: AbasService no construtor
para a chamada execute:
- this.abaService.abrirDin(titulo, 'PedidoTransportadorComponent', {pedido}, AbasService.modTMSEmbarcador) ;
- Nesse caso esta chamando um componente custom em uma nova aba
Caso queira um componente dinâmico em nova aba:
- this.abaService.abrirDin(titulo, 'ListaComponent', {nomeFormulario: 'nomeDoSeuFormDinamico'}, AbasService.modDin)

Como abrir uma Modal (Child)?

De preferência no service, adicione private formService: FormulariosService no construtor
no seu método que abrirá:
- this.formService.exibirFormularioAuxiliar('nomeDoForm',{obj: objParaOFormDinamico}, 50, 40);
- os dois últimos parâmetros são o tamanho da modal em %, são opcionais.
Para abrir um customizado a chamada se da da mesma forma, porém, no cadastro do form, é necessário informar o modulo e componente custom.

Como Fechar a Aba atual?

Adicione uma propriedade no componente: public aba: Aba;
Adicione no construtor: private abaService: AbasService
No código, onde quer fechar: this.abaService.removerAba(this.aba);

Como Disparar uma ação para uma tela “pai”?

Quando você possui uma tela que gerou outra tela, e quer ter a opção de disparar uma ação para a tela que originou a atual.

Adicione as propriedades:
callback: Function; outerThis: any;
na tela ‘filha’
Ao abrir a tela filha, no componente ‘pai’ deve ser enviado pelo parâmetro a referência do método de callback e o outerThis do componente pai.
- this.abaService.abrirDin(titulo, 'PedidoTransportadorComponent', {pedido,callback,outerThis}, AbasService.modTMSEmbarcador) ;
No ngOnInit do componente filho deve receber os parâmetros, exemplo:

    let params = (this.aba!=null && this.aba.params!=null ) ? this.aba.params : {callback: null, outerThis:null};
    this.callback = params.callback ?? null;
    this.outerThis = params.outerThis ?? null;

No momento que quiser executar o callback:

if(this.callback!=null)
      this.callback.call(this.outerThis);

Como colorir tabela?

Após carregar seu form que possui a tabela, busque o campo tabela
Crie o método que fará a alteração do estilo da tabela:

URL com Link de direcionamento para um menu

Essa questão está explicada aqui:
Portal - link com direcionamento para uma página específica

Callbacks assíncronos

Utilizado para consultas pesadas onde é realizado uma chamada para dar inicio no carregamento e posteriormente é retornado um flag de finalização da consulta e é disparado uma nova consulta para buscar os dados.

Adicione uma propriedade no componente para salvar a(s) subscription(s)
Na assinatura do componente adicione o “OnDestroy" e implemente o método, isso se faz necessário para evitar ficar ocupando memória no navegador ao fechar o componente.
No construtor adicione o service:
private callBackNegocioService: CallBackNegocioService
Em seu ngOnInit deve ser feito a subscription do método:

Destaque informações importantes em um painel como este. Para editar a cor ou o estilo desse painel, selecione uma das opções no menu.

FORLOG - Base de conhecimento