UI ビルダー でのポップオーバーの作成

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む2読むのに数分
  • UI Builder ページでポップオーバーを使用して、コンテキスト情報または機能をオーバーレイして、ユーザーがタスクを完了できるようにします。

    ポップオーバーは、UI ビルダー ページの上に表示される小さなウィンドウまたはダイアログボックスであり、処理中のコンテンツまたはタスクに関連する追加情報、オプション、またはアクションが含まれています。ページにモーダルを追加するのと同じ方法で、コンポーネントをポップオーバーに追加します。

    追加情報がユーザーに役立つと思われる UI ビルダー ページ上の任意の場所にポップオーバーを配置できます。ポップオーバーは、小さな情報や関連コンテンツへのリンクを提供することを目的としており、ポップオーバーはユーザーが操作しているときにのみ表示されるため、ポップオーバー内の情報や機能の量を制限する必要があります。

    ボタンを選択したり、ページの一部をポイントしたりしたときにポップオーバーの表示をトリガーするなど、イベントマッピングを使用してポップオーバーを表示または非表示にすることができます。詳細については、「マップイベントの定義」を参照してください。

    図 : 1. 情報ポップオーバー
    追加の情報ポップオーバーを表示するために選択されたツールヒントテキストリンクのあるページ。

    UI ビルダー ページにポップオーバーを追加する

    ポップオーバーを追加する方法については、「UI ビルダー」を参照してください。ポップオーバーは、コンポーネントをクリックしたときにページの上に表示されるコンテナです。たとえば、リスト内の人の名前を選択すると、連絡先情報がポップオーバーに表示される場合があります。

    始める前に

    必要なロール:管理者

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. 作業するエクスペリエンスを開くか、または [+ 作成] を選択してエクスペリエンスを作成します。
      エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
    3. ページバリアントを開くか作成します。
      UI ビルダー でページを作成する方法の詳細については、「UI Builder でのページの作成」を参照してください。
    4. ポップオーバーをトリガーしたいコンポーネント (ボタンコンポーネントなど) をページに追加します。
      詳細については、「コンポーネントの追加と構成」を参照してください。
    5. 構成パネルで [イベント] タブを選択します。
    6. [+ イベントハンドラーを追加] を選択します。
      ボタンコンポーネントの [イベントハンドラーを追加] リンクを指す矢印。
    7. [ポップオーバーを開く] を選択します。
    8. [新しいポップオーバーを作成] を選択します。
      [新しいポップオーバーを作成] オプションを指す矢印。
    9. [追加] を選択します。
      ポップオーバーがステージの上に表示されます。
    10. [+] アイコンを選択して、コンポーネントをポップオーバーに追加します。
      コンテンツを追加するための + を指す矢印。
    11. ポップオーバーの構成が完了したら、閉じます。

      コンテンツツリーで、作成したポップオーバーがページ構造の本文の上にあることに注意してください。

      コンテンツツリーのカスタムポップオーバーを指す矢印。
    12. [保存] をクリックします。
    13. UI ビルダー のヘッダーで、[プレビュー] を選択します。
    14. ボタンをクリックしてポップオーバーをテストします。