ウィジェットの依存関係の作成

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間：2分

    • Service Portal では、JavaScript と CSS ファイルをウィジェットにリンクして、ウィジェットとサードパーティライブラリ、外部スタイルシート、および Angular モジュール間の依存関係を作成できます。

    始める前に

    必要なロール：sp_admin または admin

    このタスクについて

    依存関係は、必要に応じてサーバーから非同期にロードされます。

    ウィジェットには、必要な数の依存関係を設定できます。ただし、追加する依存関係が多くなるほど、ウィジェットがページ上にレンダリングするためにダウンロードする必要があるコンテンツが多くなります。ロード時間を短くするため、依存関係はできる限り少なくしてください。

    手順

    1. 依存関係パッケージを作成します。

      依存関係パッケージは、ウィジェットに接続できる JavaScript ファイルと CSS ファイルのコレクションです。

      1. 移動先 サービスポータル > 依存関係.
      2. 依存関係レコードで、以下のフィールドを定義します。
        フィールド 説明
        名前 依存関係の名前です。(ドロップダウンリストから依存関係を選択するのに便利です)
        アプリケーション 依存関係レコードのアプリケーション スコープです。
        ページロード時にインクルード サービスポータルの初回ページロード時に依存関係をページにロードする場合はオンにします。リンクされたウィジェットがページにロードされたときにのみ依存関係をロードする場合はオフにします。
        Angular モジュール名 オプション。リンクされた JavaScript が Angular モジュールの場合は、値を定義します。ロードされる Angular モジュールの名前を指定して、サービスポータル Angular アプリケーションに挿入できるようにします。
    2. 依存関係パッケージにファイルを追加します。

      依存関係パッケージの情報を保存したら、関連リストを使用して JS および CSS インクルード ファイルを追加します。関連リストごとに、以下の情報を含めます。

      フィールド 説明
      表示名 スクリプトインクルードの名前です。
      ソース JS インクルードまたは CSS インクルードのどちらを追加するかに応じて、リストからこれらのオプションのいずれかを選択します。
      • URL
      • UI スクリプト (JS インクルードの場合) またはスタイルシート (CSS インクルードの場合)

      JS インクルードの場合、[UI スクリプト] フィールドを使用して、次の UI スクリプトを参照します。 システム UI > UI スクリプト.

      CSS インクルードの場合、スタイルシート フィールドを使用して sp_css テーブルを参照します。
    3. ウィジェットに依存関係パッケージを追加します。
      依存関係パッケージを作成してファイルを追加したら、依存関係とウィジェット間の関係を作成します。
      1. 移動先 サービスポータル > ウィジェット をクリックし、依存関係を追加するウィジェットレコードを見つけます。
      2. 依存関係関連リストから、[編集] をクリックします。
      3. スラッシュバケットで、作成した依存関係を見つけてダブルクリックし、右側の選択したアイテム列に追加します。
      4. ページを保存してウィジェット レコードに戻します。