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

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

    始める前に

    必要なロール:admin

    このタスクについて

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

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

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

    手順

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

    次のタスク

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