Entendendo um ciclo de vida do componente de campo

O kit de ferramentas do desenvolvedor fornece o Angular schematics que pode criar componentes de campo para você mostrar dados customizados que não estão incluídos no Order Hub por padrão. Aprenda sobre a estrutura do componente para entender como os campos são implementados e configurados

Visão geral do componente de campo

Uma definição de campo típica envolve as seguintes características:

Uma lista de campos que representam os dados a serem exibidos em uma página específica
Cada campo pode ser seu próprio widget de IU. Por exemplo, um rótulo, um menu suspenso, uma caixa de texto ou um URL.

Um componente de aplicativo típico que usa uma configuração de campo conclui as seguintes ações:

Define os componentes de campo em um arquivo de configuração (buc-field-details.json)
Converter literais que estão associados ao campo
Opcionalmente, ativa ou desativa alguns campos com base nas configurações do administrador de locatário
Chama uma ou mais APIs para preencher valores de campo. Os dados retornados pela API são correspondidos usando o ID do campo.

A estrutura gerencia o ciclo de vida e simplifica a implementação do componente de aplicativo. A estrutura separa a definição de campo da implementação de campo A definição de campo é gerenciada como um arquivo de configuração e é carregada de um arquivo JSON (buc-field-details.json). A estrutura carrega a configuração do campo e inicializa seus valores O componente aplicativo implementa a lógica de negócios, como buscar os dados do campo de atributo e implementar ações.

A estrutura carrega a configuração de tabela a partir de três arquivos:

O arquivo JSON customizado para uma rota específica do <module>/packages/<route>/src-custom/assets/custom/buc-field-details.json
As configurações de campo específicas do aplicativo padrão do <module>/packages/<module-short-name>-shared/assets/<module>/buc-field-details.json .
Configuração de campo específico de componentes comuns do <module>/node_modules/@buc/common-components/assets/common-components/buc-field-details.json

Durante a compilação, os três arquivos são mesclados; dando prioridade ao arquivo JSON customizado. Para obter mais informações sobre o arquivo de configuração JSON, consulte Sintaxe JSON.

Implementação de campo

A estrutura fornece uma classe base BaseFieldDetailsComponent para todos os componentes que contêm uma lista de atributos para exibir. Essa classe inicializa a configuração de campo BucFieldDetailsConfiguration com base no nome do campo especificado pelo componente.

A classe BaseFieldDetailsComponent inclui os métodos chave a seguir:

initializeFieldDetailAttributes(pageName): Lê o arquivo de configuração JSON e armazena o resultado na classe..
loadPageAttributes: Carrega os atributos de campo com dados Esse método delega para o método fetchPageAttributeData para permitir que as subclasses implementem a lógica de negócios para buscar os dados Em seguida, esse método chama o método getDataForAttribute para permitir que subclasses preparem os dados para cada campo.
fetchPageAttributeData: Este método abstrato deve ser implementado por subclasses para buscar uma matriz de dados, que é utilizada para preencher os campos.
getDataForAttribute: Este método abstrato deve ser implementado por subclasses para criar os dados para os campos Se um campo não incluir a propriedade dataBinding , esse método será chamado para o atributo target.
onFieldDetailsAttributeLoadComplete: Esse método permite que o subcomponente seja finalizado após os dados estarem prontos