オンボーディングモーダルの作成

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間:6分
  • 独自のオンボーディングモーダルを作成して、ユーザーに新しいエクスペリエンスやアプリケーションを紹介できます。

    始める前に

    必要なロール:admin

    手順

    1. 移動先 すべて > アダプションサービス > ガイダンスの作成.
    2. オンボーディングモーダルを作成するには、次の手順を実行します。
      1. フォームで、フィールドに入力します。
        表 : 1. ガイダンスフォーム
        フィールド 説明
        順序 ガイダンスが表示される順序。最も小さい番号が最初に表示され、次の時系列番号が続きます。
        名前 オンボーディングエクスペリエンスの名前。
        タイプ UI に表示されるガイダンスのタイプ。[モーダル] を選択します。
        ロール このガイダンスのロール。
        アプリケーション ガイダンスのアプリケーション。
        ステータス ガイダンスのステータス。
        アクティブ ガイダンスを有効または無効にするかを選択します。
      2. [Submit (送信)] を選択します。
    3. 作成されたオンボーディングモーダルを起動するには、次の手順を実行します。
      1. UIB でクライアントスクリプトを作成します。
      2. コードスニペットの下に、 api.emit('SN_HELP#GUIDANCE_START_REQUESTED',{guidanceId:"ID"}); と入力します。
      3. ID を、開くモーダルガイダンスのsys_idに置き換えます。
      4. ページを保存します。
      5. UIB ページの左側のパネルで [本文 ] を選択します。
      6. 右側のパネルで、[ イベント ] タブを選択します。
      7. [ディスパッチされたイベント (Dispatched Events)] で、[追加] を選択します。
      8. イベント名に SN_HELP#GUIDANCE_START_REQUESTED を追加し、ラベルに名前を付けます。
      9. [Save (保存)] を選択します。
    4. 埋め込みヘルプガイダンスステップを作成するには、次の手順を実行します。
      1. [ガイダンス] リストからガイダンスを選択します。
        test2 が [ガイダンス] リストに表示されます。
      2. [ヘルプガイダンスステップ] 関連リストで、[ 新規] を選択します。
        test2 [ヘルプガイダンスステップ] リストが表示されます。
      3. フォームで、フィールドに入力します。
        表 : 2. ヘルプガイダンスステップフォーム
        フィールド 説明
        名前 ガイダンスの名前。
        レイアウト ガイダンスの選択されたレイアウト。
        • ビデオ
        • イメージ
        • テキスト
        • 質問
        • 画像とテキスト
        • 画像と質問
        順序 ガイダンスが表示される順序。最も小さい番号が最初に表示され、次の時系列番号が続きます。
        アクションラベル ユーザーがガイダンスモーダルを移動できるようにするボタンラベル。
        アプリケーション ガイダンスのアプリケーションスコープ。このガイダンスはグローバルスコープに適用されます。
        ガイダンス このヘルプガイダンスステップが適用されるガイダンス。
      4. [Submit (送信)] を選択します。
    5. ヘルプガイダンスステップのヘルプコンテンツを作成するには、次の手順を実行します。
      1. 関連リストでヘルプガイダンスステップを選択します。
        test2 [ヘルプガイダンスステップ] リストが表示されます。
      2. [ヘルプコンテンツ] 関連リストで、[ 新規] を選択します。
        [ヘルプコンテンツ] 関連リストが表示されます。
      3. 注:
        フォームフィールドは、ガイダンスのタイプごとに異なります。ガイダンスについては、正しいフォームを参照してください。
        テキストフォームのフィールドに入力します。
        表 : 3. [ヘルプコンテンツテキスト] フォーム
        フィールド 説明
        タイトル ヘルプコンテンツのタイトル。
        サブタイトル UI のヘルプコンテンツのモーダルに表示されるサブタイトル。
        タイプ 選択されているガイダンスのタイプ。
        アプリケーション ガイダンスのアプリケーションスコープ。
        ガイダンスステップ このヘルプコンテンツが関連付けられているヘルプガイダンスステップ。たとえば、[はじめに/ようこそ]、[すべてのメニュー]、[履歴] などです。
        デフォルト ガイダンスステップのデフォルトのヘルプコンテンツ。
        フッター UI のヘルプコンテンツのモーダルに表示されるフッター。
        カスタム HTML を提供 ヘルプコンテンツのカスタム HTML。
        テキスト UI のヘルプコンテンツのモーダルに表示されるテキスト。
      4. [Submit (送信)] を選択します。
      5. ビデオフォームのフィールドに入力します。
        表 : 4. ヘルプコンテンツビデオフォーム
        フィールド 説明
        タイトル ヘルプコンテンツのタイトル。
        サブタイトル UI のヘルプコンテンツのモーダルに表示されるサブタイトル。
        タイプ 選択されているガイダンスのタイプ。
        ビデオリンク 表示するビデオのリンク。
        注:
        YouTube と Vimeo のみがサポートされています。
        アプリケーション ガイダンスのアプリケーションスコープ。
        ガイダンスステップ このヘルプコンテンツが関連付けられているヘルプガイダンスステップ。たとえば、[はじめに/ようこそ]、[すべてのメニュー]、[履歴] などです。
        デフォルト ガイダンスステップのデフォルトのヘルプコンテンツ。
        フッター UI のヘルプコンテンツのモーダルに表示されるフッター。
        カスタム HTML を提供 ヘルプコンテンツのカスタム HTML。
        代替テキスト UI のヘルプコンテンツのモーダルに表示される代替テキスト。
      6. [Submit (送信)] を選択します。
      7. 画像フォームのフィールドに入力します。
        表 : 5. ヘルプコンテンツの画像フォーム
        フィールド 説明
        タイトル ヘルプコンテンツのタイトル。
        サブタイトル UI のヘルプコンテンツのモーダルに表示されるサブタイトル。
        タイプ 選択されているガイダンスのタイプ。
        イメージ ガイダンスに表示するために選択された画像。
        アプリケーション ガイダンスのアプリケーションスコープ。
        ガイダンスステップ このヘルプコンテンツが関連付けられているヘルプガイダンスステップ。たとえば、[はじめに/ようこそ]、[すべてのメニュー]、[履歴] などです。
        デフォルト ガイダンスステップのデフォルトのヘルプコンテンツ。
        フッター UI のヘルプコンテンツのモーダルに表示されるフッター。
        カスタム HTML を提供 ヘルプコンテンツのカスタム HTML。
        画像リンクを提供 ガイダンスに画像リンクが表示されます。
        代替テキスト UI のヘルプコンテンツのモーダルに表示される代替テキスト。
      8. [Submit (送信)] を選択します。
      9. 質問フォームのフィールドに入力します。
        表 : 6. ヘルプコンテンツの質問フォーム
        フィールド 説明
        タイトル ヘルプコンテンツのタイトル。
        サブタイトル UI のヘルプコンテンツのモーダルに表示されるサブタイトル。
        タイプ 選択されているガイダンスのタイプ。
        アプリケーション ガイダンスのアプリケーションスコープ。
        ガイダンスステップ このヘルプコンテンツが関連付けられているヘルプガイダンスステップ。たとえば、[はじめに/ようこそ]、[すべてのメニュー]、[履歴] などです。
        デフォルト ガイダンスステップのデフォルトのヘルプコンテンツ。
        フッター UI のヘルプコンテンツのモーダルに表示されるフッター。
        カスタム HTML を提供 ヘルプコンテンツのカスタム HTML。
      10. [Submit (送信)] を選択します。
      11. [ヘルプの質問] 関連フィールドで [新規 ] を選択します。
        表 : 7. ヘルプの質問フォーム
        フィールド 説明
        質問 ガイダンスに追加する質問の内容。
        順序 ガイダンスでの質問の順序。
        バリアント 質問のバリアント。
        • ラジオは、回答が 1 つしかない質問に対して選択されます。
        • 回答が複数ある質問の場合は、チェックボックスがオンになります。
        アプリケーション ガイダンスのアプリケーションスコープ。
        ヘルプコンテンツ 質問が作成されるヘルプコンテンツ。
        必須 選択すると、質問は必須になります。
      12. [ヘルプの回答] 関連フィールドで [新規 ] を選択して、回答を作成します。
        表 : 8. ヘルプの回答フォーム
        フィールド 説明
        ラベル 回答のラベル。
        回答の値。
        順序 回答の順序。
        アプリケーション ガイダンスのアプリケーションスコープ。
        質問 回答が作成される質問。
      13. [Submit (送信)] を選択します。
    6. オンボーディングエクスペリエンスをビルドする追加のガイダンスを作成します。
    7. オンボーディングガイダンスの作成が完了したら、ガイダンスフォームでガイダンスのステータスが [公開済み ] に設定されていることを確認します。
    8. [ガイダンス] フォームで、[ 更新] を選択します。