---
sourceDocument: Xanadu プラットフォームアナリティクス
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/xanadu/now-intelligence

 Release :

    - xanadu

ft:locale :

    - ja-JP

ft:publication_title :

    - Xanadu プラットフォームアナリティクス

ft:clusterId :

    - par

bundleId :

    - par

workflow :

    - Platform


---

# ServiceNow UI ページを表示するウィジェットの作成

# ServiceNow UI ページを表示するウィジェットの作成 {#ariaid-title1}

* リリースバージョン: Xanadu
* 
* 更新日 2024年08月01日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：4分

Web ページを表示する ServiceNow UI ページを作成できます。その後、その UI ページを、ダッシュボードに追加できるウィジェットに追加できます。

## 始める前に

必要なロール：admin

## このタスクについて

UI ページとは、リストでもフォームでもない ServiceNowページのことです。すべての UI ページがウィジェットに収まるわけではありません。外部サイトのウィジェットやガジェットなどの一部の UI ページは、ダッシュボードに配置すると正しく表示されません。

フレームワーク ページ テンプレートを使用せずに UI ページを作成する方法については、ServiceNow コミュニティーの開発者による「[フレームワーク ページ テンプレートを使用せずに UI ページを作成する](https://community.servicenow.com/community?id=community_blog&sys_id=e26e22eddbd0dbc01dcaf3231f96196e)」というブログ投稿を参照してください。  
注:  
この機能を使用するには、JavaScript のナレッジが必要です。

## 手順

1. ウィジェットとして表示する ServiceNow UI ページを作成または検索します。  
   ステップ 4 で使用するこの UI ページの名前をメモします。UI ページ名は、UI ページのコンテンツを定義するフォームの name フィールドの値です。
2. 移動先 システム UIウィジェット をクリックし、\[ New\] をクリックします。  
   ウィジェット レコードは、個々のウィジェットのレコードではなく、ウィジェット カテゴリーのレコードです。ウィジェットをダッシュボードに追加する際は、まずカテゴリーを選択してから、ウィジェットを選択します。ステップ 4 で指定する JavaScript には、そのカテゴリに含めるウィジェットのリストが含まれます。
3. 次のフィールドに入力します。

   | フィールド | 説明 |
   | 名前 | このウィジェット カテゴリーの名前。ウィジェットをダッシュボードに追加するときに、このカテゴリを選択します。 |
   | レンダラタイプ | \[ JavaScript\] を選択します。 |
   | アクティブ | ウィジェットをダッシュボードに追加できないようにするには、このフィールドをクリアします。 |
   | ロール | ダッシュボードにウィジェットを追加するときに、このカテゴリを表示できるロールを選択します。ロールを選択しない場合、すべてのロールにカテゴリが表示されます。 |
   |-|-|

   {#create_widget_displays_webpage__choicetable_qhk_xbf_cw}
4. 次の JavaScript を \[ スクリプト \] フィールドに追加し、指定したとおりに置き換えます。  
   return ステートメントには、このウィジェット カテゴリにリストされているウィジェットが含まれています。  
   注:  
   このステップのコードスニペットは、スコープ外のアプリケーションでも機能します。スコープ対象のアプリケーションには、ステップ 5 のコードスニペットを使用します。

   |-|-|
   | widget_name | ウィジェットをダッシュボードに追加するときに、ユーザーがウィジェット ピッカーで選択するウィジェットの名前。この文字列は、ウィジェット ヘッダーにも表示されます。この値は、ステップ 3 で設定した名前です。 |
   | UI_page_name | ウィジェットに表示する手順 1 の UI ページの名前。 |

   {#create_widget_displays_webpage__simpletable_nph_gcf_cw}

       function sections() {
           return {
               'widget_name': { 'uiPageName' : 'UI_page_name'},
               'widget_name2': {'uiPageName': 'UI_page_name_2'}
           };
       }

       function render() {
           var uiPageName = renderer.getPreferences().get("uiPageName");
           return renderer.getRenderedPage(uiPageName);
       }

       function getEditLink() {
           var uiPageName = renderer.getPreference('uiPageName');
           return 'sys_ui_page.do?sysparm_query=' + encodeURIComponent('name=' + uiPageName);
       }

5. **オプション:** スコープ対象のアプリケーションには、次のコード例を使用します。  

       function sections() {
           return {
           'Widget': {
           'type': 'widgetname'
           }
           };
       }

       function render() {
           var scope = gs.getCurrentScopeName();
           scope = (scope == "rhino.global" ? "" : scope + "_");
           var page = renderer.getPreference('type');
           return renderer.getRenderedPage(scope + page);
       }

       function getEditLink() {
           var scope = gs.getCurrentScopeName();
           scope = (scope == "rhino.global" ? "" : scope + "_");
           var page = renderer.getPreference('type');
           return "sys_ui_page.do?sysparm_query=name=" + scope + page;
       }

6. \[送信\] をクリックします。

## 次のタスク

[レスポンシブダッシュボードの編集](https://servicenow-prod.fluidtopics.net/lpY97kMfhNgziFsCwOfOOA "パフォーマンスアナリティクスウィジェット、レポート、タブなどのダッシュボードのコンテンツを編集できます。ダッシュボードは共有されているため、変更した内容はすべてグローバルに適用されます。")