モードレスダイアログを UI ビルダー ページに追加する

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む4読むのに数分

    • でモードレス ダイアログ UI ビルダーを追加する方法について説明します。モードレスダイアログは、ページの上のコンテンツを含むフローティングウィンドウです。

    始める前に

    必要なロール：ui_builder_admin

    次の手順では、添付ファイルコンポーネントを含むモードレスダイアログを開くボタンを構成するプロセスについて説明します。
    注:
    ここで説明する手順は、モードレス ダイアログの使用方法の一例にすぎません。無限の可能性があります。ビジネス ニーズに合わせてモードレス ダイアログを追加および構成します。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. 作業するエクスペリエンスを開くか、または [+ 作成] を選択してエクスペリエンスを作成します。
      エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
    3. ページバリアントを開くか作成します。
      UI ビルダー でページを作成する方法の詳細については、「UI Builder でのページの作成」を参照してください。
    4. コンテンツツリーで、マウスを [モードレスダイアログ] に移動し、[+] アイコンを選択して、[ モードレス] ダイアログ コンポーネントを選択します。
      [+] アイコンが選択され、モードレスダイアログコンポーネントを含むウィンドウが開かれた状態でコンテンツツリーに表示される [モードレスダイアログ] オプション。
    5. モードレスダイアログがステージに自動的に表示されない場合は、コンテンツツリーで [ モードレスダイアログのデフォルト ] という名前の新しいモードレスダイアログを選択します。
    6. 構成パネルの [ 構成 ] タブで、モードレスダイアログで自動的に追加されたプリセット (幅、高さ、位置、ドラッグの有効化設定など) を表示します。
      プリセットを表示する [構成] タブがあるモードレスダイアログ構成パネル。

      これらのプリセットプロパティはすべて、必要に応じて編集できます。

      注:
      モードレスダイアログの詳細プロパティの詳細については、 ServiceNow 開発者サイトを参照してください。
    7. データリソースドロワーに、 モードレスダイアログ コントローラーが自動的に追加されました。
      データリソースドロワーのモードレスダイアログコントローラーを指す黒い矢印。
    8. コンテンツ ツリーで、[モードレス ダイアログの既定の> アクション] で [+ コンポーネントの追加 ] を選択して、 モードレス ダイアログ ヘッダーにコンテンツを追加します。
    9. 定型化されたテキストコンポーネントを検索して選択します。
    10. [ 定型テキスト 構成] パネルで、[ なし] を選択してコンポーネントを手動で構成します。
      [なし] オプションを指す黒い矢印が付いた定型テキスト構成パネル。

      レコード サブ見出し プリセット が自動的に追加された場合は、ドロップダウン矢印を選択し、なし を選択して、構成 タブで 削除 を選択します。

      プリセットドロップダウンと [なし] オプションを指す黒い矢印が付いた定型テキストコンポーネント構成パネル。
    11. まだ開いていない場合は、 [ 構成 ] を選択して [構成] タブを開きます。
    12. [テキスト] にサンプル テキストを削除し、「添付ファイルの追加」と入力します。
      テキストフィールドを指す黒い矢印が付いた定型テキスト構成タブ。
    13. UI Builder ヘッダーで [ 保存 ] を選択します。
    14. コンテンツ ツリーで、[モードレス ダイアログの既定値] > [コンテンツ > コンテナー] の下にある [+ コンポーネントの追加 ] を選択して 、モードレス ダイアログ 本体にコンテンツを追加します。
    15. 添付ファイルコンポーネントを選択します。
    16. [添付ファイル] 構成パネルで、まだ選択されていない場合は、[添付ファイルの記録] と [適用] を選択し、プリセットを使用してコンポーネントを構成します。
      [添付ファイルプリセットオプションを記録] を指す黒い矢印が付いた添付ファイルコンポーネント構成パネル。

      添付ファイルコンポーネントの構成の詳細については、 ServiceNow 開発者サイトを参照してください。

    17. モードレス ダイアログ フッターにコンテンツを追加できますが、この例ではフッターを空のままにします。
    18. [Save (保存)] を選択します。
      コンテンツツリーで、モードレスダイアログとそのすべてのコンポーネントがページ構造の 本文 の上にリストされていることを確認します。また、[ 最小化されたダイアログ] ドロップダウン コンポーネントがページに自動的に追加され (コンテンツツリーの [本文 ] の下に一覧表示されます)、モードレスダイアログヘッダーの最小化アイコン機能を提供します。

      モードレスダイアログのデフォルトコンポーネント、本文、および最小化されたダイアログドロップダウンコンポーネントを指す黒い矢印が付いたコンテンツツリー。

    19. コンテンツツリーで、[ 本文] を選択します。
    20. ボタンコンポーネントを追加し、モードレスダイアログを開くように構成します。
      1. コンテンツ ツリーで、[本文] の横にある [メニュー] アイコンを選択し、[コンポーネントの追加] を選択します。
      2. レイアウト タブで、単一列 を選択します。
        単一の列を含む新しい列レイアウトがページの下部に追加されます。
      3. ステージで、新しい列レイアウトの [+] アイコンを選択します。
      4. ベアボタンコンポーネントを検索して選択します。
        ボタンという用語を含む検索フィールドを指す黒い矢印と、ベアボタンコンポーネントを指す別の黒い矢印で表示されるツールボックス。
      5. 構成パネルの [ 構成 ] タブで、[ なし ] を選択してコンポーネントを手動で構成します。
      6. 構成パネルで [イベント] タブを選択します。
      7. [+ イベントハンドラーを追加] を選択します。
        [イベント] タブを指す 1 つの黒い矢印と、[+ イベントハンドラーを追加] オプションを指す 2 つ目の黒い矢印で示されているボタンベア構成パネル。
      8. 左側のリストで、[ モードレスダイアログを開く ]を選択します(リスト内を下にスクロールする必要がある場合があります)。
      9. 最小化された見出しに添付ファイルを入力します。
      10. モードレスダイアログでデフォルトのモードレスダイアログを選択します。
        見出しやカテゴリなど、ここで設定できる他のオプションがあります。
      11. [追加] を選択します。
        [モードレス ダイアログを開く] オプションを指す黒い矢印が付いたイベント ハンドラー ウィンドウ、最小化された見出しフィールド、モードレス ダイアログ フィールド、および追加ボタン。
      12. [ 構成 ] タブを選択します。
      13. 「ラベルに添付ファイルの追加」と入力します。
        [ラベル] フィールドを指す黒い矢印が付いたボタンベアコンポーネント [構成] タブ。
    21. [Save (保存)] を選択します。
    22. ヘッダーの UI ビルダー [プレビュー] の横にあるドロップダウン矢印を選択し、一覧で [URL パスを開く] を選択します。
    23. [ 添付ファイルの追加] ボタンを選択して、モードレス ダイアログをテストします。
      モードレスダイアログがメインページの上に開き、上部に見出し、下に添付ファイルコンポーネントが表示されます。
    24. 最小化機能をテストするには、モードレス ダイアログの最小化アイコンを選択します。
      最小化アイコンを指す黒い矢印が付いたモードレスダイアログの見出し。
      モードレス ダイアログは最小化され、[最小化されたダイアログ] ドロップダウンからアクセスできます。
    25. 最小化されたダイアログ アイコンを選択し、[ 添付ファイル ] を選択して、モードレス ダイアログ ウィンドウを再度開きます。
      [ドラフトメール] オプションを表示するドロップダウンで選択された、最小化されたダイアログコンポーネント。