ビジュアル・ナビゲータを構成すると、ページにタイルのグリッドを表示することにより、Digital Customer Serviceアプリケーション内外のナビゲーションが容易になります。
コンポーネントをDCSアプリケーションのページにドロップする際は、UIに何も表示されていないときにコンポーネントを構成する必要があります。 グリッド・タイルの数、各タイルに表示されるイメージおよびテキストを、各タイルをクリックしたときに実行される処理とともに決定する必要があります。
「コンポーネント」パレットの「デジタル・カスタマ・サービス」コンポーネントのリストでビジュアル・ナビゲータ・コンポーネントを見つけます。 その場所から、ビジュアル・ナビゲータを表示するページにコンポーネントをドラッグ・アンド・ドロップします。 ページにコンポーネントをドロップすると、ページ・レベルにNavigatorLoadAction処理チェーンが作成されます。 ナビゲータに表示される項目を構成するには、この処理を変更する必要があります。 特定のページに複数のナビゲータが追加された場合は、名前に数字のサフィクスが追加されます。
配列の項目の指定
ナビゲータ項目を構成するには、まずナビゲータで配列に表示する項目を指定する必要があります。 これは、処理チェーン変数で指定することも、個別のJSONファイルを使用して指定することもできます。
処理チェーン変数の項目の指定
項目を処理チェーン変数として指定します。 NavigatorLoadActionを編集し、処理チェーン変数項目のデフォルト値を配列として設定します。
-
ビジュアル・ナビゲータ・コンポーネントをドロップしたページ・フローから、「処理」アイコンを選択します。
-
処理のリストから、「NavigatorLoadAction」を選択します。
-
処理チェーン - 変更項目タブをクリックします。
-
変数のリストから項目配列を選択します
-
「デフォルト値」フィールドに、コードを入力します。
次の例を参照してください。
[
{
"title": "Happy Holidays",
"description": "Wishing all our customers a happy holiday season!",
"type": "info",
"icon": "fa fa-5x fa-glass-cheers"
},
{
"title": "Setup your Nimbus 3000",
"description": "How do I configure my Nimbus 3000?",
"type": "knowledge-article",
"id": "1003002",
"icon": "fa fa-5x fa-question"
},
{
"title": "My Service Requests",
"type": "service-request",
"operation": "list",
"icon": "fa fa-5x fa-ticket-alt"
},
{
"type": "product",
"id": "CRMITEM-AS54888-00182744",
"icon": "fa fa-5x fa-desktop"
},
{
"type": "my-profile",
"title": "My Profile",
"description": "View your account information.",
"icon": "fa fa-5x fa-user"
},
{
"type": "url",
"title": "Google",
"icon": "fa fa-5x fa-search",
"params": {
"url": "https://www.google.com"
}
}
]
JSONファイルの使用
ローカル・ファイル・システム上に前述の例と同じ形式を使用してJSONファイルを作成します。 ビジュアル・ビルダーのWebアプリケーション・ナビゲータから、アプリケーションのリソース・フォルダの下のフォルダにJSONファイルをアップロードします。 これを行うには、ファイルをドラッグ・アンド・ドロップするか、JSONファイルをアップロードするフォルダを右クリックしてメニューから「インポート」を選択します。
NavigatorLoadActionを編集する必要がある場合は、次のステップを実行します。
-
チェーンの最初の処理として、コール・モジュール関数処理を追加します。
-
アプリケーション・レベルのloadJSON関数をコールするコール・モジュール関数を設定します。
-
関数のパス入力パラメータを、リソース・ディレクトリの下のJSONファイルの相対パスに設定します。
-
新しく追加されたコール・モジュール関数処理の後に、変数の割当て処理を追加します。
-
コール・モジュール関数の結果をフロー・レベル項目変数に割り当てます。
ナビゲーション項目
サポートされるタイプと操作は、シェル・ページのNavigateActionで定義されています。 デフォルトでは次のタイプと操作がサポートされますが、これらはシェル・ページのNavigateActionにケースを追加することで拡張できます。 操作が指定されていない場合、デフォルトで詳細に設定されます。
次の表に、サポートされるタイプと操作を示します。
|
摘要
|
タイプ
|
操作
|
ID
|
パラメータ
|
追加情報
|
|
静的情報
|
info
|
|
|
|
|
|
問合せページに移動します
|
contact-us
|
|
|
|
|
|
「ホーム」ページに移動します。
|
homepage
|
|
|
|
|
|
ナレッジ項目にアクセスします
|
knowledge-article
|
|
ナレッジ項目識別子。 DCSで項目を表示する際のkmContentId URLパラメータです。
|
|
|
|
ユーザーのプロファイル・ページに移動します
|
my-profile
|
|
|
|
|
|
製品ページにナビゲートします
|
product
|
|
製品の品目番号
|
|
ナビゲーション項目のタイトルは、Fusionサービスからロードした製品の名前になります。
|
|
製品グループ
|
product-group
|
|
製品グループのProductGroupId
|
|
ナビゲーション項目のタイトルは、Fusionサービスからロードした製品グループの名前になります。
|
|
カテゴリ
|
category
|
|
カテゴリのCategoryId
|
|
ナビゲーション項目のタイトルは、Fusionサービスからロードしたカテゴリの名前になります。
|
|
サービス要求の作成ページに移動します。
|
service-request
|
作成
|
|
|
|
|
サービス要求のリスト・ページに移動します。
|
service-request
|
リスト
|
|
|
|
|
作業オーダー・リスト・ページに移動します。
|
work-order
|
リスト
|
|
|
|
|
新規タブでURLを開きます
|
url
|
|
|
{
"url": "https://www.samplewebpage.com"
}
|
|
アイコンとイメージ
項目には、Font Awesomeアイコンなどのアイコン、またはイメージを使用できます。
アイコンを適用するには、項目のアイコン・プロパティを設定し、その値として必要なスタイル・クラス(fa fa-5x fa-userなど)を指定します。
イメージを使用するには、imageUrlプロパティをイメージのURLに設定します。 イメージ名は大文字と小文字が区別されます。 次に例を示します。
"imageUrl": "[[ $application.path + 'resources/images/service-request/SR0000038250.png' ]]"
翻訳
アプリケーション・リソース・バンドルでキーを指定するには、項目のタイトルや説明に対して先頭に感嘆符が付いたキー(!bundle_keyなど)を設定します。
次に例を示します。
{
"type": "my-profile",
"title": "!homepage_visual_navigator_myProfile_title",
"icon": "fas fa-4x fa-address-card odcs-home-visual-navigator-card-icon"
}