Aggiunta di una nuova vista e portlet

È possibile aggiungere una nuova vista al menu dell'applicazione e creare il portlet corrispondente.

Informazioni su quest'attività

Le seguenti viste sono disponibili, per impostazione predefinita, in Sterling Store Engagement :

Evasione ordine(Order_Fulfillment)
Gestione inventario (Inv_Management)
Servizio clienti (Customer_Service)

Tuttavia, è possibile definire una nuova vista e creare portlet corrispondenti per soddisfare le proprie esigenze aziendali. Per ulteriori informazioni sull'aggiunta di una nuova vista in Sterling Business Center, vedere Configurazione delle regole dell'hub del negozio.

Procedura

Creare la seguente struttura di cartelle in SCREEN_EXTENSIONS_HOME, se non già presente.SCREEN_EXTENSIONS_HOME/features/home/portlet-set

Nota:
La struttura di cartelle fornita in questo passo contiene i portlet forniti dall'applicazione. Si consiglia di creare nuovi portlet nello stesso percorso.
Vai alla cartella SCREEN_EXTENSIONS_HOME/features/home/portlet-set
Copia portlet-set-extension.module.ts da <WORKSPACE>/store-frontend/src/app/features/home/portlet-set alla cartella <WORKSPACE>/store-frontend/store-extensions-src/app/features/home/portlet-set .
Se portlet-set-extension.module.ts è già presente, non copiare il file. I componenti portlet e i provider personalizzati sono dichiarati in questo file.
Per creare una nuova portlet, eseguire i seguenti passaggi:
1. Eseguire il comando ng g c <componentName> --project=store-extensions --skip-import
  
  Nota: è obbligatorio passare l'argomento --project=store-extensions. In caso contrario, il componente verrà creato nella cartella src fornita dall'applicazione (<WORKSPACE>/store-frontend/src). I file creati qui vengono ignorati e non vengono rappresentati sul browser.
2. Aggiornare il nome della classe del componente portlet nelle dichiarazioni @NgModule decorator in portlet-set-extension.module.ts.
  Nota:
  - Assicurarsi di importare le classi del componente portlet corrispondenti in portlet-set-extension.module.ts.
  - Assicurarsi di eseguire l'importazione da store-extensions-src e non dalla cartella store-app-build .
Per creare un servizio o un provider per il nuovo componente portlet, effettuare le seguenti operazioni:
1. Eseguire il comando ng g s <serviceName> --project=store-extensions
  
  Nota: è obbligatorio passare l'argomento --project=store-extensions. In caso contrario, il componente verrà creato nella cartella src fornita dall'applicazione (<WORKSPACE>/store-frontend/src). I file creati qui vengono ignorati e non vengono rappresentati sul browser.
2. Aggiornare il nome servizio o provider nei provider del decoratore @NgModule in portlet-set-extension.module.ts.

Leggi Registrazione View-Portlet. Registrare il portlet in una vista in uno dei seguenti modi:

Registrare il portlet in una nuova specifica della vista.

Ad esempio, se si desidera aggiungere un portlet personalizzato alla vista 'User_Management', la specifica JSON avrà il seguente aspetto:

{
        personaName: ‘User_Management',
        personaIconClass: 'app-icon-user_mgmt_20',
        portlets: [
            {
                portletTitleBundleKey: ‘userPortlet.TITLE_UserPortlet',
                portletSequenceNumber: 4,
                portletComponent: UserPortletComponent,
                portletTID: ‘userPortlet',
                resourceId: 'ISF000004’
            }
        ]
    }

Registrare il portlet in una specifica di vista esistente.

Se si desidera aggiungere un portlet personalizzato a una vista esistente, ad esempio Inv_Management, la specifica JSON avrà il seguente aspetto:

{
        personaName: ‘Inv_Management',
        portlets: [
            {
                portletTitleBundleKey: ‘userPortlet.TITLE_UserPortlet',
                portletSequenceNumber: 4,
                portletComponent: UserPortletComponent,
                portletTID: ‘userPortlet',
                resourceId: 'ISF000004’
            }
        ]
    }

Nel file store-customization-impl.ts , aggiornare la proprietà extensionPersonaConfigList nella specifica JSON della vista portlet come riportato di seguito:

static extensionPersonaConfigList: IPersonaConfig[] = [
                                {
        personaName: ‘Inv_Management',
        personaIconClass: ‘app-icon-inventory_mgmt_20’,
        portlets: [
            {
                portletTitleBundleKey: ‘userPortlet.TITLE_UserPortlet',
                portletSequenceNumber: 4,
                portletComponent: UserPortletComponent,
                portletTID: ‘userPortlet',
                resourceId: 'ISF000004’
            }
        ]
    }
                        ];

Nota: le viste sono definite a livello hub e non sono controllate dall'autorizzazione. Tuttavia, se non si dispone dell'autorizzazione per un portlet per una vista, tale vista non viene visualizzata nel pannello di navigazione laterale dell'applicazione.