サービスポータルでのブレッドクラムナビゲーションの構成Issue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } この記事では、Angular ブロードキャストシステムを使用してサービスポータルでブレッドクラムウィジェットを構成する方法について説明します。ブレッドクラムウィジェットは、$rootScopeで JSON オブジェクトをブロードキャストするウィジェットをリッスンし、インシデント、問題、要求、および類似のレコード全体で結果のナビゲーションパスをユーザーに表示します。 対象者:お客様 (認証された開発者またはアドミニストレーター) 前提条件:ウィジェットクライアントスクリプトを変更するには、サービスポータルアドミニストレーターまたは開発者ロールが必要です。 Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } 利用可能なすべてのリリース Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } ブレッドクラムウィジェットは、$rootScopeでウィジェットが次の形状で JSON オブジェクトをブロードキャストするかどうかをリッスンします。 [{label: "label to be displayed", url: "Link relative to the instance"}, {etc}] Angularブロードキャストシステムに慣れていない場合は、 Angularブロードキャストのドキュメント を参照してください。 必要なブレッドクラムの表示動作とビジネスケースのアーキテクチャによって、このプロセスは異なる場合があります。次の例は、インシデント、問題、要求、および類似のレコード内の同じブレッドクラムをユーザーに示しています。 ホーム> [自分のスタッフ] > テーブルラベル > レコード番号 この例では、 ホーム はインデックスで、 自分のスタッフ は、インシデント、要求、問題、およびその他のタスク関連レコードのリストを表示するカスタムページです。ユーザーがインシデントを選択すると、チケットまたは要求の上部にあるブレッドクラムに、上記のブレッドクラムの例が表示されます。 「sc_requests」ページとチケットページには、チケット会話ウィジェットという共通のウィジェットがあります。ウィジェットを選択して $scope.data を調べると ブレッドクラムで使用できるキーと値のペアが表示されます。テーブルラベルとレコード番号を表示するには、それぞれ $scope.data.tableLabel と $scope.data.number を使用します。 ブレッドクラムを設定するには、次の手順に従います。 1.チケット会話ウィジェットクライアントスクリプトに移動します。 2.ウィジェットの $scope.data を調べて、ブレッドクラムで使用するデータを特定します。$scope.data.tableLabel や $scope.data.number などの関連するキーと値のペアに注意してください。 3.次のコードを チケット会話ウィジェット クライアントスクリプトに追加します。 // Breadcrumbs var bc = [{label: 'My Stuff', url: '?id=myStuff'}]; // This would be the pagename, myStuff is an example if ($scope.data.tableLabel) bc[bc.length] = {label: $scope.data.tableLabel, url: '#'}; bc[bc.length] = {label: $scope.data.number, url: '#'}; $rootScope.$broadcast('sp.update.breadcrumbs', bc); 4.クライアントスクリプトを保存します。 5.サービスポータルでインシデント、要求、または問題レコードに移動し、ブレッドクラムに想定されるパスが表示されていることを確認します。 このコードは、ブレッドクラムウィジェットが消費する JSON オブジェクトをブロードキャストします。JSON データを変更して、特定のビジネスケースのカスタムブレッドクラムパスを作成します。 Related Links<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Angular ブロードキャストのドキュメント