ナビゲーションバーとナビゲーションタブの構成
モバイルアプリの下部に表示されるナビゲーションバーを構成します。ナビゲーションバーのタブを使用して、画面、ランチャー画面、保存されたレコード、設定、通知ページに移動します。
始める前に
このタスクについて
モバイルアプリにナビゲーションバーを追加し、ユーザーの要件に関連するさまざまなタイプのナビゲーションタブを追加します。事前設定されたタブを選択することも、既存のテンプレートに基づいてタブを作成することもできます。ランチャー画面と画面タブには、保存済み、通知、および設定タブと比較して若干異なる構成があります。
画面およびランチャー画面のナビゲーションタブには、バッジカウントを含めることもできます。このバッジは、定義された条件に従ってナビゲーションタブの横に表示される数字です。たとえば、バッジ数には、リスト内のレコード数やレコードセクション内のレコード数などの情報を表示できます。
以下は、各ナビゲーションタブタイプの簡単な概要です。
- ランチャー:このオプションを使用して、ランチャー画面に移動します。
- 画面:レコードデータまたは UI セクションを表示する画面に移動するには、このオプションを使用します。
- 保存済み:このオプションを選択すると、ユーザーが保存したレコードを表示するページが開きます。
- 通知:このオプションを選択すると、モバイルアプリエクスペリエンス内のユーザー関連の通知を表示する [通知] ページが開きます。
- 設定:このオプションを選択すると、ユーザーがモバイルエクスペリエンスを制御する [設定] ページが開きます。
注:
ナビゲーションバーには、[保存済み]、[通知]、および [設定] タブのタブタイプをそれぞれ 1 つだけ含める必要があります。詳細については、「 ナビゲーションバー」トピックの「ナビゲーション バーに関する一般的なガイドライン」セクションを参照してください。
手順
-
移動先 すべて > システムモバイル > モバイルアプリビルダー.
モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。
-
作業しているアプリケーションスコープを検索し、アプリケーションスコープの名前を選択します。
モバイルアプリビルダー カテゴリのホーム画面が表示されます。
- メニューから [すべてのモバイルレコード] を選択します。
- レコードタイプ フィールドから、ナビゲーション バー [sys_sg_navigation] を選択し、新規 を選択します。
- ナビゲーションバーの名前を入力します。
-
ナビゲーションバーに追加するナビゲーションタブタイプを選択または作成します。
ナビゲーションタブを追加する方法 手順 既存のナビゲーションタブを選択する - [ナビゲーション タブ] セクションで [ 選択 ] を選択します。
- ナビゲーション タブを選択し、 [ 適用] を選択します。
- 追加するナビゲーションタブごとに手順 a. と b. を繰り返します。
- [保存] を選択します。
保存済み、通知、または設定のいずれかのナビゲーションタブタイプを作成します - [ナビゲーション タブ] セクションで [新規 ] を選択します。
- [保存済み]、[通知]、または [設定] タブの種類を選択し、 [ 続行] を選択します。
- 選択したオプションの新しいタブ画面で、次の操作を行います。
- [ ラベル ] フィールドにタブの名前を入力します。
- [ アクティブ ] トグルを使用して、タブをナビゲーションバーに表示するかどうかを選択します。
- [アイコン] フィールドで、既存のアイコンを選択するか、ナビゲーションタブのアイコンを作成するかを選択します。次のいずれかを実行します。
- [選択] を選択し、アイコンを選択して [適用] を選択します。
- 新規 を選択して [新しいアイコン] フォームを表示し、次の操作を行います。
- アイコンの名前を入力します。
- [ タイプ ] フィールドから [ 画像] を選択します。
- 外観の設定 セクションの スタイル フィールドに 名前 と入力します。
- [外観の設定] セクションの [値 ] フィールドに、画像アイコンの名前を入力します。イメージ アイコン名の一覧については、「 画像アイコン」を参照してください。
- [保存] を選択します。
ランチャーまたは画面ナビゲーションタブタイプを作成します - [ナビゲーション タブ] セクションで [新規 ] を選択します。
- [ランチャー] または [画面] タブの種類を選択し、[ 続行] を選択します。
- 選択したオプションの新しいタブ画面で、次の操作を行います。
- [ ラベル ] フィールドにタブの名前を入力します。
- [ アクティブ ] トグルを使用して、タブをナビゲーションバーに表示するかどうかを選択します。
- ランチャータブタイプと画面ナビゲーションタブタイプのどちらを選択したかに応じて、次のいずれかを実行します。
- [ランチャー] を選択した場合は、[ランチャー] 領域で [選択] を選択し、ランチャー画面を選択して、[ 適用] を選択します。または、[ 新規 ] を選択してランチャー画面を作成します。これは、ユーザーがこのナビゲーションタブをタップしたときに表示されるランチャー画面です。ランチャー画面の作成の詳細については、「 ランチャー画面を作成」を参照してください。
- [画面] を選択した場合は、[画面] 領域で [ 選択] を選択し、画面を選択してから [ 適用] を選択します。これは、ユーザーがこのナビゲーションタブをタップしたときに表示される画面です。
- [アイコン] フィールドで、既存のアイコンを選択するか、アイコンを作成するかを選択します。次のいずれかを実行します。
- [選択] を選択し、アイコンを選択して [適用] を選択します。
- 新規 を選択して [新しいアイコン] フォームを表示し、次の操作を行います。
- アイコンの名前を入力します。
- 「 タイプ 」リストから 「画像」を選択します。
- 外観の設定 セクションの スタイル フィールドに 名前 と入力します。
- [外観の設定] セクションの [値 ] フィールドに、画像アイコンの名前を入力します。イメージ アイコン名の一覧については、「 画像アイコン」を参照してください。
- [保存] を選択します。
- このタブでユーザーの注意を待っているレコードの数を示すバッジ数を追加します。
- [バッジ数] セクションで [新規 ] を選択します。
- [ 名前 ] フィールドにバッジ数の名前を入力します。
- [ アクティブ ] トグルを使用して、バッジをナビゲーションタブに表示するかどうかを選択します。
- [データ] セクションで、条件フィルターを適用するテーブルを選択します。
- [条件] セクションで、バッジ数を決定する条件に一致するレコードをカウントするために使用する条件を作成します。条件に一致するレコードは、ナビゲーションタブにカウントとして表示されます。Web ベースの UI でバッジカウントを構成する方法の詳細については、「 ナビゲーションバーのバッジカウントの構成」を参照してください。
- [バッジの配置] セクションの [場所]、[ モバイルコンポーネント]、および [コンポーネント ] のすべてのフィールドには、事前定義された値が含まれています。
- [保存] を選択します。
- ユーザー基準権限を追加して、ナビゲーションバーにこのタブを表示するためにユーザーが満たす必要がある基準を決定します。詳細については、「 モバイルアプリのユーザーロールとユーザー基準権限」を参照してください。
- [保存] を選択します。
- [保存] を選択します。
- ナビゲーションツリーからナビゲーションバーレコードを選択して、選択したナビゲーションタブを表示します。
-
次の操作を行って、ナビゲーションバーに表示するナビゲーションタブの順序を設定します。
- 定義するナビゲーションタブの [順序] 列の値を選択します。
- 順序値を入力します。注:値が小さいナビゲーションタブは、ナビゲーションバーの左側に表示されます。
- チェックオプションを選択
- 注文するナビゲーションタブごとに、これらの手順を繰り返します。
- [保存] を選択します。