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

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間:6分
  • モバイルアプリの下部に表示されるナビゲーションバーを構成します。ナビゲーションバーのタブを使用して、画面、ランチャー画面、保存されたレコード、設定、通知ページに移動します。

    始める前に

    必要なロール:admin

    このタスクについて

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

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

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

    手順

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