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

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間:4分
  • Web ページを表示する ServiceNow UI ページを作成できます。その後、その UI ページをウィジェットに追加して、ダッシュボードに追加できます。

    始める前に

    必要なロール:admin

    このタスクについて

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

    フレームワーク ページ テンプレートを使用せずに UI ページを作成する方法については、ServiceNow コミュニティーの開発者による「フレームワーク ページ テンプレートを使用せずに UI ページを作成する」というブログ投稿を参照してください。

    注:
    この機能を使用するには、JavaScript のナレッジが必要です。

    手順

    1. ウィジェットとして表示する ServiceNow UI ページを作成または検索します。
      ステップ 4 で使用するために、この UI ページの名前をメモします。UI ページ名は、UI ページのコンテンツを定義するフォームの [名前] フィールドの値です。
    2. 移動先 システム UI > ウィジェット をクリックし、[ 新規] をクリックします。
      ウィジェット レコードは、個々のウィジェットのレコードではなく、ウィジェット カテゴリーのレコードです。ウィジェットをダッシュボードに追加する際は、まずカテゴリーを選択してから、ウィジェットを選択します。手順 4 で指定する JavaScript には、そのカテゴリに含めるウィジェットのリストが含まれています。
    3. 次のフィールドに入力します。
      フィールド説明
      名前 このウィジェット カテゴリーの名前。ウィジェットをダッシュボードに追加する場合は、このカテゴリを選択します。
      レンダラタイプ JavaScript を選択します。
      アクティブ ウィジェットをダッシュボードに追加できないようにするには、このフィールドをクリアします。
      ロール ダッシュボードにウィジェットを追加するときに、このカテゴリを表示できるロールを選択します。ロールを選択しない場合は、すべてのロールがカテゴリを表示できます。
    4. [ スクリプト] フィールドに次の JavaScript を追加し、指定どおりに置換します。
      return ステートメントには、このウィジェットカテゴリにリストされているウィジェットが含まれています。
      注:
      このステップのコードスニペットは、スコープ外のアプリケーションでも機能します。スコープ対象のアプリケーションには、ステップ 5 のコードスニペットを使用します。
      表 : 1.
      widget_name ウィジェットをダッシュボードに追加するときに、ユーザーがウィジェットピッカーで選択するウィジェットの名前。この文字列は、ウィジェット ヘッダーにも表示されます。この値は、ステップ 3 で構成する名前です。
      UI_page_name ウィジェットに表示するステップ 1 の UI ページの名前。
      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. [Submit (送信)] を選択します。

    次のタスク

    レスポンシブダッシュボードの編集