新規ビューおよびポートレットの追加

アプリケーション・メニューに新規ビューを追加し、対応するポートレットを作成することができます。

このタスクについて

Sterling Store Engagement では、デフォルトで以下のビューが利用可能です：

オーダー・フルフィルメント(Order_Fulfillment)
インベントリー管理 (Inv_Management)
カスタマー・サービス (Customer_Service)

ただし、ビジネス・ニーズに合わせて、新しいビューを定義し、対応するポートレットを作成することができます。 Sterling Business Centerで新しいビューを追加する方法の詳細については、ストアハブルールの構成を参照してください。

手順

まだ存在しない場合は、 SCREEN_EXTENSIONS_HOME の下に以下のフォルダ構造を作成する。SCREEN_EXTENSIONS_HOME/features/home/portlet-set

注:
このステップで提供されるフォルダー構造には、アプリケーション提供のポートレットが含まれています。同じパスに新規ポートレットを作成することをお勧めします。
SCREEN_EXTENSIONS_HOME/features/home/portlet-set フォルダーに移動します。
portlet-set-extension.module.ts を <WORKSPACE>/store-frontend/src/app/features/home/portlet-set から <WORKSPACE>/store-frontend/store-extensions-src/app/features/home/portlet-set フォルダーにコピーします。
portlet-set-extension.module.ts がすでに存在する場合は、ファイルをコピーしない。カスタム・ポートレット・コンポーネントおよびプロバイダーは、このファイルで宣言されます。
新しいポートレットを作成するには、次の手順を実行します：
1. 次のコマンドを実行します。 ng g c <componentName> --project=store-extensions --skip-import
  
  注: 引数 --project=store-extensionsを渡す必要があります。これを行わないと、アプリケーション提供の src フォルダー (<WORKSPACE>/store-frontend/src) にコンポーネントが作成されます。ここで作成されたファイルは無視され、ブラウザーでレンダリングされません。
2. portlet-set-extension.module.ts内の宣言 @NgModule デコレーター内のポートレット・コンポーネント・クラス名を更新します。
  注:
  - 必ず、対応するポートレット・コンポーネント・クラスを portlet-set-extension.module.tsにインポートしてください。
  - store-app-build フォルダーからではなく、 store-extensions-src からインポートしていることを確認します。
新規ポートレット・コンポーネントのサービスまたはプロバイダーを作成するには、以下の手順を実行します。
1. 次のコマンドを実行します。 ng g s <serviceName> --project=store-extensions
  
  注: 引数 --project=store-extensionsを渡す必要があります。これを行わないと、アプリケーション提供の src フォルダー (<WORKSPACE>/store-frontend/src) にコンポーネントが作成されます。ここで作成されたファイルは無視され、ブラウザーでレンダリングされません。
2. portlet-set-extension.module.tsの @NgModule デコレーターのプロバイダーでサービス名またはプロバイダー名を更新します。

ビューポートレットの登録を読む。以下のいずれかの方法で、ポートレットをビューに登録します。

ポートレットを新しいビュー仕様に登録します。

例えば、カスタム・ポートレットを「User_Management」ビューに追加する場合、JSON 仕様は次のようになります。

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

ポートレットを既存のビュー仕様に登録します。

カスタム・ポートレットを既存のビュー (例えば、 Inv_Management) に追加する場合、JSON 仕様は次のようになります。

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

store-customization-impl.ts ファイルで、portlet-view JSON 仕様の extensionPersonaConfigList プロパティーを以下のように更新します。

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’
            }
        ]
    }
                        ];

注: ビューはハブ・レベルで定義され、アクセス権によって制御されません。ただし、ビューのポートレットに対する許可がない場合、そのビューはアプリケーションのサイド・ナビゲーション・パネルに表示されません。