Modificando Portlets Fornecidos pelo Aplicativo

É possível customizar e substituir os portlets fornecidos pelo aplicativo por portlets customizados

Antes de iniciar

Identifique o portlet fornecido pelo aplicativo que você deseja customizar Os portlets fornecidos pelo aplicativo estão presentes no diretório <store-temp>/packages/features/home/src/app/portlet-set Você pode criar um novo componente de portlet ou copiar e modificar o portlet fornecido pelo aplicativo.

Procedimento

Copie a pasta do componente de portlet fornecida pelo aplicativo apropriada do diretório <store-temp>/packages/features/home/src/app/portlet-set para o diretório <store-temp>/extensions/features/override-component/src/app/components .
No arquivo component.ts do portlet, atualize o nome da classe do componente do portlet Inclua a variável componentName e atualize as variáveis portletname e componentName com o nome da classe de componente..
Atualize o nome da classe do componente do portlet concluindo as seguintes etapas:
1. Navegue para o diretório /extensions/features/override-component/src/app/
2. Abra o arquivo apps.module.ts ..
3. No objeto customComponentsDeclarations , atualize o nome da classe do componente do portlet
4. Importe o nome da classe do componente do portlet
Copie a configuração JSON do portlet fornecido pelo aplicativo do arquivo <store-temp>/packages/features/app-shell/src/assets/app-shell/config/isf-persona-config.json para o arquivo <store-temp>/extensions/override-static-assets/portlets/config/isf-persona-config.json . É possível identificar o portlet fornecido pelo aplicativo usando o nome da classe de componente Além disso, inclua o atributo extensionType com os valores apropriados Para obter mais informações, consulte Associando novos portlets a uma visualização apropriada.
Na configuração JSON, atualize o nome da classe do componente do portlet customizado no atributo portletComponent que você copiou no arquivo <store-temp>/extensions/override-static-assets/portlets/config/isf-persona-config.json .

Nota: na configuração do JSON, não mude o atributo portletTID .
Declare todos os componentes que fazem parte do módulo aplicativo no arquivo app.module.ts .
Inicie o aplicativo executando o seguinte comando e verifique se o novo portlet foi carregado na página inicial.
```
yarn start-app
```

O que fazer depois

Para suportar localização e internacionalização, a pasta i18n está presente na pasta <store-temp>/extensions/features/override-component/src/assets/override-component/ . É possível criar o arquivo JSON do pacote configurável específico do idioma Por exemplo, en.json para o código de idioma inglês e inclua o arquivo JSON específico do idioma das entradas do pacote configurável customizado, que é en.json para o código de idioma inglês Se você estiver substituindo os portlets fornecidos pelo aplicativo, assegure-se de que a variável estática dos pacotes configuráveis no app-module-ts contenha os ativos que são carregados do aplicativo inicial. Consulte o fragmento de código de amostra a seguir
```
class OverrideComponentBundlesModule {
  static bundles: Array<any> = [
    {
      prefix: './assets/override-component/i18n/',
      suffix: '.json'
    },
    {
      prefix: './assets/home/i18n/',
      suffix: '.json'
    }
  ].concat(CommonBundlesModule.bundles);
};
```
Para obter mais informações, consulte Modificando entradas de pacote para os componentes definidos pelo aplicativo.
É possível navegar para diferentes telas ou rotas angulares usando o serviço angular do StoreRouterService Para obter mais informações, consulte Navegando pelas rotas.
Para verificar as mudanças no kit de ferramentas do desenvolvedor, extraia e implemente as customizações Para obter mais informações, consulte Extraindo personalizações.