Sidebar

Sidebar UIパターンを使用すると、メインコンテンツの余白に追加の情報を表示できます。この追加の情報により、ユーザーのメインコンテンツに関する理解が深まります。

Sidebar UIパターンの使用方法

この例では、Sidebarウィジェットを開いたり閉じたりするボタンを作成します。

サイドバーをトリガーするには、Ajax Submitを含むボタンを使用して新しい画面アクションを呼び出し、ToggleSidebarアクション（［Logic］タブ内にあります）を使用してサイドバーを開いたり閉じたりします。パラメータを使用して、ページにオーバーレイがあるかどうかを定義します。

1. Service StudioのツールボックスでSidebarを検索します。

   Sidebarウィジェットが表示されます。

   

2. ツールボックスから、Sidebarウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

   

3. ［Properties］タブの［Name］フィールドに、Sidebarウィジェットの名前を入力します。この例では、「MySidebar」という名前を付けます。

   

4. フォーム、画像、テキストなどのコンテンツを［Header］プレースホルダと［Content］プレースホルダに追加します。ここではテキストを追加しています。

   

5. ツールボックスから、ButtonウィジェットをSidebarウィジェットのすぐ下にドラッグします。次に、［Properties］タブの［Label］フィールドに、ボタン上に表示するテキスト（この例では、「Open」）を入力し、［Method］ドロップダウンで［Ajax Submit］を選択します。

   

6. ボタンの画面アクションを作成するため、ボタンをダブルクリックし、［Logic］タブを選択し、Server ActionsフォルダのToggleSidebarアクションに移動して画面アクションにドラッグします。

   

7. ［Properties］タブの［WidgetId］ドロップダウンで、ウィジェットのIDを選択します。この例では、MySidebar.Idです。

   

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。