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

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：6分

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

    始める前に

    必要なロール：admin

    このタスクについて

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

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

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

    手順

    1. 次のように移動する。 All (すべて) > システムモバイル > Mobile App Builder (モバイルアプリビルダー).
      モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。
    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. [外観の設定] セクションの [スタイル ] フィールドに「 Name」と入力します。
            4. [Set appearance] セクションの [Value ] フィールドに、画像アイコンの名前を入力します。画像アイコン名のリストについては、「 画像アイコン」を参照してください。
      4. [Save (保存)] をクリックする。
      ランチャーまたは画面ナビゲーションタブタイプのいずれかを作成します
      1. [ナビゲーションタブ] セクションで [新規 ] を選択します。
      2. [ランチャー] または [画面] タブの種類を選択し、[ 続行] を選択します。
      3. 選択したオプションの新しいタブ画面で、次の操作を行います。
        1. [ラベル] フィールドにタブの名前を入力します。
        2. [アクティブ] トグルを使用して、タブをナビゲーションバーに表示するかどうかを選択します。
        3. ランチャーまたは画面ナビゲーションのどちらのタブタイプを選択したかに応じて、次のいずれかを実行します。
          • ランチャー を選択した場合は、ランチャー エリアで 選択 を選択し、ランチャー画面を選択して、 適用 を選択します。または、[ 新規 ] を選択してランチャー画面を作成します。これは、ユーザーがこのナビゲーションタブをタップしたときに誘導されるランチャー画面です。ランチャー画面の作成の詳細については、「 ランチャー画面の作成」を参照してください。
          • [画面] を選択した場合は、[画面] 領域で [選択] を選択し、画面を選択して [ 適用] を選択します。これは、ユーザーがこのナビゲーションタブをタップしたときに誘導される画面です。
        4. [アイコン] フィールドで、既存のアイコンを選択するか、アイコンを作成するかを選択します。次のいずれかを実行します。
          • [選択] を選択し、アイコンを選択して [適用] を選択します。
          • [ 新規 ] を選択して [新規] アイコンフォームを表示し、次の操作を行います。
            1. アイコンの名前を入力します。
            2. 「タイプ」リストから「イメージ」を選択します。
            3. [外観の設定] セクションの [スタイル ] フィールドに「 Name」と入力します。
            4. [Set appearance] セクションの [Value ] フィールドに、画像アイコンの名前を入力します。画像アイコン名のリストについては、「 画像アイコン」を参照してください。
            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 (保存)] をクリックする。