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

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

始める前に

必要なロール：ui_builder_admin

次の手順では、[添付ファイル] コンポーネントを含むモードレスダイアログを開くボタンを構成するプロセスについて説明します。

注:

ここで説明する手順は、モードレスダイアログの使用方法の一例にすぎません。無限の可能性があります。ビジネスニーズに合わせてモードレスダイアログを追加および構成してください。

手順

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

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

   注:

   モードレスダイアログの詳細プロパティの詳細については、ServiceNow Developer サイトを参照してください。
7. データリソースドロワーに、[モードレスダイアログ] コントローラーが自動的に追加されました。
   
8. コンテンツツリーで、[モードレスダイアログのデフォルト (Modeless dialog default)] > [アクション] で [+ コンテンツを追加] を選択して、モードレスダイアログヘッダーにコンテンツを追加します。
9. [定型テキスト] コンポーネントを検索して選択します。
10. [定型テキスト] 構成パネルで、[なし] を選択してコンポーネントを手動構成します。
    

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

    
11. [構成] タブがまだ開いていない場合は、[構成] を選択して開きます。
12. [テキスト] で、サンプルテキストを削除し、「Add Attachments」と入力します。
    
13. UI ビルダーヘッダーで、[保存] を選択します。
14. コンテンツツリーで、[モードレスダイアログのデフォルト (Modeless dialog default)] > [コンテンツ] > [コンテナ] で [+ コンテンツを追加] を選択して、モードレスダイアログ本文にコンテンツを追加します。
15. [添付ファイル] コンポーネントを選択します。
16. [添付ファイル] 構成パネルで、[レコードの添付ファイル] と [適用] がまだ選択されていない場合は選択し、プリセットを使用してコンポーネントを構成します。
    

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

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

    

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