ナビゲーションバーとナビゲーションタブの構成

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：6分

    • モバイルアプリの下部に表示されるナビゲーションバーを構成します。ナビゲーションバータブを使用して、画面、ランチャー画面、保存されたレコード、設定、および通知ページに移動します。

    始める前に

    必要なロール：admin

    このタスクについて

    モバイルアプリにナビゲーションバーを追加し、ユーザーの要件に関連するさまざまなタイプのナビゲーションタブを追加します。事前設定されたタブを選択するか、既存のテンプレートに基づいてタブを作成できます。ランチャー画面と画面タブの構成は、保存済みタブ、通知タブ、および設定タブとは若干異なります。

    画面およびランチャー画面のナビゲーションタブにも、バッジカウントを含めることができます。このバッジは、定義された条件に従ってナビゲーションタブの横に表示される番号です。たとえば、バッジ数には、リスト内のレコード数やレコードセクション内のレコード数などの情報を表示できます。

    各ナビゲーションタブタイプの簡単な概要を次に示します。
    • ランチャー:このオプションを使用して、ランチャー画面に移動します。
    • 画面:このオプションを使用して、レコードデータまたは UI セクションを表示する画面に移動します。
    • 保存済み:このオプションを選択すると、ユーザーが保存したレコードを表示するページが開きます。
    • 通知:このオプションを選択すると、モバイルアプリエクスペリエンス内のユーザー関連の通知を表示する [通知] ページが開きます。
    • 設定:このオプションを選択すると、ユーザーがモバイルエクスペリエンスを制御する [設定] ページが開きます。
    注:
    ナビゲーションバーには、[保存済み]、[通知]、[設定] タブの各 1 つのタブタイプのみを含める必要があります。詳細については、トピック ナビゲーションバーのナビゲーションバーの一般的なガイドラインのセクションを参照してください。

    手順

    1. 移動先 すべて > システムモバイル > モバイルアプリビルダー.
      モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。
    2. 作業しているアプリケーションスコープを検索し、アプリケーションスコープの名前を選択します。
      モバイルアプリビルダー カテゴリのホーム画面が表示されます。
    3. メニューから [すべてのモバイルレコード] を選択します。
    4. レコード タイプ フィールドから、ナビゲーション バー [sys_sg_navigation] を選択し、新規 を選択します。
    5. ナビゲーションバーの名前を入力します。
    6. ナビゲーションバーに追加するナビゲーションタブタイプを選択または作成します。
      ナビゲーションタブを追加する方法手順
      既存のナビゲーションタブを選択
      1. [ナビゲーションタブ] セクションで [選択] を選択します。
      2. ナビゲーションタブを選択し、[ 適用] を選択します。
      3. 追加するナビゲーションタブごとに手順 a. と b. を繰り返します。
      4. [Save (保存)] を選択します。
      保存済み、通知、または設定のナビゲーションタブタイプを作成します
      1. [ナビゲーションタブ] セクションで [新規 ] を選択します。
      2. [保存済み]、[通知]、または [設定] タブの種類を選択し、[ 続行] を選択します。
      3. 選択したオプションの新しいタブ画面で、次の操作を行います。
        1. [ ラベル] フィールドにタブの名前を入力します。
        2. [ アクティブ] トグルを使用して、タブをナビゲーションバーに表示するかどうかを選択します。
        3. [アイコン] フィールドで、既存のアイコンを選択するか、ナビゲーションタブのアイコンを作成するかを選択します。次のいずれかを実行します。
          1. [ 選択] を選択し、アイコンを選択して [適用] を選択します。
          2. [ 新規 ] を選択して [新規] アイコンフォームを表示し、次の操作を行います。
            1. アイコンの名前を入力します。
            2. [ タイプ ] フィールドから [画像] を選択します。
            3. [外観の設定] セクションの [スタイル] フィールドに「 名前」と入力します。
            4. [外観を設定] セクションの [値] フィールドに、画像アイコンの名前を入力します。画像アイコン名のリストについては、「 画像アイコン」を参照してください。
      4. [Save (保存)] を選択します。
      ランチャーまたは画面ナビゲーションタブタイプを作成します
      1. [ナビゲーションタブ] セクションで [新規 ] を選択します。
      2. [ランチャー] または [画面] タブタイプのいずれかを選択し、[ 続行] を選択します。
      3. 選択したオプションの新しいタブ画面で、次の操作を行います。
        1. [ ラベル] フィールドにタブの名前を入力します。
        2. [ アクティブ] トグルを使用して、タブをナビゲーションバーに表示するかどうかを選択します。
        3. ランチャータブタイプと画面ナビゲーションタブのどちらタイプを選択したかに応じて、次のいずれかを実行します。
          • [ランチャー] を選択した場合は、[ランチャー] 領域で [選択] を選択し、ランチャー画面を選択して、[ 適用] を選択します。または、[ 新規 ] を選択してランチャー画面を作成します。これは、ユーザーがこのナビゲーションタブをタップしたときに表示されるランチャー画面です。ランチャー画面の作成の詳細については、「 ランチャー画面の作成」を参照してください。
          • [画面] を選択した場合は、[画面] 領域で [ 選択] を選択し、画面を選択して [ 適用] を選択します。これは、ユーザーがこのナビゲーションタブをタップしたときに表示される画面です。
        4. [アイコン] フィールドで、既存のアイコンを選択するか、アイコンを作成するかを選択します。次のいずれかを実行します。
          • [ 選択] を選択し、アイコンを選択して [適用] を選択します。
          • [ 新規 ] を選択して [新規] アイコンフォームを表示し、次の操作を行います。
            1. アイコンの名前を入力します。
            2. [ タイプ ] リストから [画像] を選択します。
            3. [外観の設定] セクションの [スタイル] フィールドに「 名前」と入力します。
            4. [外観を設定] セクションの [値] フィールドに、画像アイコンの名前を入力します。画像アイコン名のリストについては、「 画像アイコン」を参照してください。
            5. [Save (保存)] を選択します。
        5. バッジ数を追加して、このタブでユーザーの注意待ちのレコードの数を示します。
          1. [バッジ数] セクションで [新規 ] を選択します。
          2. [ 名前 ] フィールドにバッジ数の名前を入力します。
          3. [ アクティブ] トグルを使用して、バッジをナビゲーションタブに表示するかどうかを選択します。
          4. [データ] セクションで、条件フィルターを適用するテーブルを選択します。
          5. [条件] セクションで、バッジ数を決定する条件に一致するレコードをカウントするために使用する条件を作成します。条件に一致するレコードは、ナビゲーションタブにカウントとして表示されます。Web ベースの UI でのバッジ数の設定の詳細については、「 ナビゲーションバーのバッジカウントの構成」を参照してください。
          6. [バッジの配置] セクションの [場所]、[ モバイルコンポーネント]、および [コンポーネント] フィールドにすべて事前定義された値が含まれています。
          7. [Save (保存)] を選択します。
        6. ユーザー基準権限を追加して、ユーザーがナビゲーションバーにこのタブを表示するために満たす必要がある基準を決定します。詳細については、「 モバイルアプリのユーザーロールとユーザー基準の権限」を参照してください。
      4. [Save (保存)] を選択します。
    7. [Save (保存)] を選択します。
    8. ナビゲーションツリーからナビゲーションバーレコードを選択して、選択したナビゲーションタブを表示します。
    9. 次の操作を行って、ナビゲーションバーに表示するナビゲーションタブの順序を設定します。
      1. 定義するナビゲーションタブの [順序] 列で値を選択します。
      2. 順序値を入力します。
        注:
        値が小さいナビゲーションタブは、ナビゲーションバーの左側に表示されます。
      3. チェックオプションを選択
      4. 順序付けする各ナビゲーションタブでこれらの手順を繰り返します。
    10. [Save (保存)] を選択します。