サービスポータルウィジェットを編集して簡単な変更を加える方法Issue この記事では、サービスポータルのすぐに使えるウィジェットのマイナーな機能の編集方法に関する情報を提供し、主に既存のデータに基づいて UI 要素を追加または削除する方法と、必要に応じてデータを操作する方法について説明します。 これによって次のような疑問に答えます。「ウィジェットにフィールド情報を追加する方法」「不要なボタンを削除する方法」「ウィジェット内の何かの順序や長さを変更する方法」ここでは単純な OOB ウィジェット「評価の高い KB」を例として使用しますが、ほとんどのウィジェットで同じステップを実行し、同様の基本的な変更が可能です。 注意：この記事の提案のほとんどは、ウィジェットのクローンバージョンを必要としており、これらの変更はサポート対象外のカスタマイズと見なされます。 Resolutionインスタンスオプションの編集 これは、ウィジェットの動作を変更して、[すぐに利用可能] オプションの 1 つで目的を達成できるかどうかを確認する場合に実行する最初のステップです。 インスタンスオプションを使用するとウィジェットを構成できるため、同じウィジェットを複数回使用しながら、動作を別のものにできます。(キュメンテーション) この例では、評価の高い KB ウィジェットのタイトルを「評価の高い記事」から「最も役立つナレッジ」などに変更する場合、最初にインスタンスオプションを確認します。表示するには、Ctrl を押しながらウィジェットをクリックし、[インスタンスオプション] を選択します。 [タイトル] オプションを [最も役立つナレッジ (Most Helpful Knowledge)] に設定すると、ウィジェットのタイトルが変更されます。 name="HTML"> ウィジェットを編集する前に、ウィジェット開発者ガイドおよびウィジェットの構築に関するドキュメントを読むことをお勧めします。 次に、ウィジェットをクローンし、OOBウィジェットをクローンに置き換える必要があります。また、簡単に比較できるように、別のブラウザタブのウィジェットエディターで開きます。 注意：この時点でカスタマイズを行うので、編集したウィジェットがただちに ServiceNow でサポートされるわけではありません。これらのウィジェットで問題が発生した場合は、最初に OOB バージョンのウィジェットで同じ問題が発生していることを確認します。 ウィジェット HTML のクローンと編集 このステップが必要になるのは、必要な方法で動作を変更する、すぐに利用可能なインスタンスオプションがない場合です。ウィジェットの動作や外観を変更する場合は、まずウィジェットテンプレート内で変更する HTML を特定し、必要に応じてスコープから必要なデータを特定します。これを行うには、Chrome 開発ツール、およびウィジェットの HTML テンプレートなどのブラウザの開発ツールを使用します。 この例では、[記事の閲覧回数 (Article View Count)] を [記事の説明] と [記事の評価] の間の [評価の高い KB ウィジェット] に追加します。 1) このページ上のウィジェットの HTML を調べます。 変更する必要がある領域またはテキストを右クリックし、[検査] を選択して開発ツールの [要素] パネルを開き、その要素にフォーカスを合わせます。 要素を検査すると、次のスクリーンショットのようになります。 2) 変更する必要のある HTML を特定します。 この例では、変更したい内容は記事アイテムを表す <li> タグ内にあり、リンク/説明である <a> と、評価である <div> の間に何かを追加する必要があることがわかります。 3) これをウィジェットエディターでウィジェットの HTML と比較します。 ウィジェット HTML はテンプレートであるため、検査時に表示されるものと正確には比較できないことがありますが、Angular ディレクティブ (クイックリファレンス) とスコープからのデータのロード方法を理解しておくと、ウィジェットの HTML コードをウィジェットの検査時に表示される HTML と簡単に比較できます。 ウィジェットエディターで HTML を確認すると、<li> 内に同じ <a> タグと <div> タグが表示されます。 4a) ウィジェットから何かを削除しようとしているだけの場合は、テンプレートから対応する HTML を削除すれば完了です。 4b) HTML に何かを追加する必要がある場合は、HTML テンプレートで関連するデータオブジェクトを識別する必要があります。 この例のウィジェットでは、<li>タグの間に次のコード行があります： ng-repeat="a in ::data.articles" 各記事のデータは各アイテム内で「a」として参照されており、「a」オブジェクトの入力に使用されているアレイが data.articles であることがわかります。 この data.articles は、ウィジェットのサーバースクリプトから取得されます。 5) [コンソールにログを記録] を使用して、スコープ内の利用可能なデータを確認します。 ウィジェットがページに読み込まれた後で「a」データオブジェクト内で使用可能な値を見つけるには、Ctrl を押しながらウィジェットをクリックし、[コンソールにログを記録：$scope.data] を選択します。 次に、ブラウザの開発ツールの [コンソール] タブに切り替えると、データオブジェクトを展開して記事アレイを見つけ、各アイテム内で使用可能な値を確認できます。 ここでは、閲覧回数が各記事内で sys_view_count として参照されていることがわかります。 6a) 必要なデータがない場合は、ウィジェットデータを操作する必要があります。 6b) データが存在する場合は、ウィジェットの HTML テンプレートを編集してそのデータを使用します。 スコープを確認すると、テンプレートの <li> 内の「a.sys_view_count」を使用してビュー数を取得できることがわかります。 したがって、ウィジェット HTML テンプレート内の既存の <a> と <div> の間に、そのデータとハードコードされた文字列「Views:」を含む新しい <div> を追加できます。 <div>Views: {{a.sys_view_count}}</div> ページを更新すると、記事の閲覧回数を確認できます。 ウィジェットデータの操作 このステップは、ウィジェットでデータが利用できない場合に必要です。まだ $scope.data にないものを追加する必要がある場合は、HTML を変更する前に、ウィジェットのサーバースクリプトまたはクライアントコントローラーを編集してデータを操作する必要があります。 この例では、すぐに利用可能なウィジェットのスコープ内では利用できませんが、記事の作成者を追加します。 1) スコープ内のデータが設定されている場所を見つけます。 ウィジェットがロードされているときは、最初にサーバースクリプトを評価してからクライアントコントローラーを実行します。したがって、データを設定しているものを特定するには逆行して、最初にクライアントコントローラーをチェックしてデータを変更しているかどうかを確認してから、通常はデータを収集するサーバースクリプトを確認します。この例では、クライアントはデータをまったく操作していないため、サーバースクリプトに進みます。 2) 値を指定しているコードを特定します。 この例では、サーバースクリプトは 2 つの方法でデータを収集します。 1 つ目は 16 行目の $sp.getRecordValues() (ドキュメント) で、記事フィールドのほとんどを取得します。2 つ目は、GlideRecord オブジェクト「z」で呼び出された 17 行目の getDisplayValue() です。これは、スクリプトの前半で GlideRecord クエリを使用してセットアップされます。 3) コードを編集して、必要な新しいデータを取得します。 DB 値 (sys_id) の代わりに Author の表示値が必要なため、2 番目のメソッド呼び出しを模倣する必要があります。 a.author = z.getDisplayValue("author"); 4) 上記のように HTML を編集して、新しいデータ値を使用します。 次のように HTML で「a.author」を使用できます。 <div>Author: {{a.author}}</div> 注意：記事タイプなどの他のフィールド値を取得する場合は、getRecordValues() 呼び出しを編集して、次のようにアレイに含めるフィールドを指定できます。 $sp.getRecordValues(a, z, 'short_description,sys_view_count,sys_id,published,rating,type'); <-- data.articles で終了するフィールドのリストにタイプを追加 Related Linksウィジェットのクローンを作成して変更を加えることはカスタマイズになります。カスタマイズ済みウィジェットで問題が発生した場合は、SN テクニカルサポートに連絡する前にまず、同じ問題が OOB ウィジェットにないかを確認してください。 この記事では、OOB ウィジェットに対して確認する方法について説明します：KB0683868 また、ウィジェットのカスタマイズに関する問題を調査する方法については、ウィジェットのトラブルシューティングガイドも参照してください。