› ダッシュボード デザイナー › さまざまな画面解像度に対応する設計 › モバイル ダッシュボードのビュー レイアウトを設計する

モバイル ダッシュボードのビュー レイアウトを設計する

以下の手順に従って、モバイル デバイスまたは非標準のウィンドウ サイズのデバイスで使用するビューを作成します。ビュー上でコンポーネントのサイズを変更して明確に配置し、モバイル メニューとモバイル フィルタを追加する必要があります。

また、既存のビューを開いて、それに応じて変更することもできます。

  1. Studio で、新しいビューを作成します。
    1. [ドキュメント ツリー] で、[ビュー] を右クリックし、[新しいビュー] を選択します。
    2. ビューに一意のわかりやすい名前を割り当て、[OK] をクリックします。
  2. 必要なコンポーネント (チャート、グリッド) をキャンバスに追加します。通常どおりに構成します。
  3. キャンバスの右上隅で、[ビューのレイアウトを変更] をクリックします。
    すべての既存のビュー レイアウトのリストがチェック ボックス付きで表示されます。該当するチェック ボックスを選択します。
  4. 特定のレイアウトを編集するには、名前をクリックして選択します。それに応じてビューがリロードされ、編集を開始できます。[ビューのレイアウトを変更] を再度クリックすると、現在選択されているレイアウトがリストの上部に表示されます。
  5. モバイル メニューを追加します。メニュー項目 を ビュー からキャンバスにドラッグします。
  6. 通常どおりメニューを作成します。
  7. ウィザードの [表示] タブの [メニュー スタイル] で、[モバイル メニュー] を選択します。
  8. 必要に応じてすべての構成設定(タイトル、寸法、アイコン)を指定し、[OK] をクリックします。メニューを開くときに、[スライド効果を使用] を選択して、流れるようなモーション効果を適用します。
    ディメンションとして 0 を設定すると、メニューはブラウザのサイズの 100％ になります。
  9. モバイル メニューを非表示にするには、左にスワイプするか、メニューの外側をタップします。再度開くには、メニューのを アイコン クリックします。
  10. モバイル フィルタを作成します。ダッシュボードからフィルタを起動するには、次のアクション可能なコンポーネントを使用できます。ボタン、画像、またはラベル。
    1. ビューにフィルタ を追加します。1 つのフィルタ パネルのグループ フィルタの場合、フィルタの受信アクションを設定し、後で同じグループをアクション可能コンポーネントの受信フィルタ グループとして使用します。
      時間枠、集約ドライバーなどの一部のフィルタには、着信アクションウィザードがありません。この場合、[プロパティ パネル] 内で、[フィルタ グループ] を見つけてグループを設定します。[OK] をクリックします。
    2. ボタン などのフィルタ パネルを起動するコンポーネントを追加します。フィルタ パネルには、グループに属するすべてのフィルタが表示されます。
    3. ボタンの [アクション] ウィザードで、[フィルタ パネル] を選択します。
    4. グループには、上記で作成したフィルタの受信アクショングループとして設定されているのと同じグループを選択します。[OK] をクリックし、[保存] アイコンをクリックします。ビューからフィルタを非表示にします。[プロパティ パネル] 内で、[表示可能] を見つけて、チェック ボックスをオフにします。
    5. モバイル フィルタ パネルを使用するには、[アクション] メニューで、[プレビュー]モードを有効にします。
      使用可能なフィルタはすべて、左側のスライド メニューに表示されます。メニューを非表示にするには、左にスワイプするか、メニューの外側をタップします。フィルタ パネルを再度開くには、割り当てられたボタンをクリックします。
  11. ビューを保存します。
  12. モバイル デバイスのプレビュー/Viewer でビューを開きます。ボタンをクリックしてフィルタを起動できます。

基本概念

Studio でレイアウトを使用する場合、変更は特定のビュー レイアウトまたは複数のレイアウトにのみ適用されます。

  1. ビューで作業してレイアウト を選択したとき、特定のビュー レイアウトの編集を開始します。変更を保存すると、特定のレイアウトにのみ個別に適用されます。レイアウトごとに、次を調整できます。
    1. コンポーネントを移動およびサイズ変更します。
    2. アンカーを変更および設定します。
    3. 一部のコンポーネントを非表示にします。コンポーネントを強調表示し、特定のレイアウトのためのコンポーネントを非表示するに[表示可能] を [プロパティ パネル] に見つけて、チェック ボックスをオフにします。
    4. ビューのサイズを変更します。
  2. ただし、一部の変更はすべてのレイアウトに適用されます。
    1. 新しいコンポーネントを追加します。コンポーネントを非表示にするには、[プロパティ パネル] の [表示可能] チェック ボックスを使用します。
    2. コンポーネントのデータの変更: ウィザードのすべての変更およびすべてのテキストの変更。
  3. 外観プロパティは、レイアウトまたはすべてのレイアウトの両方で個別に変更できます。すべてのレイアウトに変更を適用するには、[プロパティ パネル] で、[すべての外観] をクリックします。特定のレイアウトにのみ変更を適用するには、このアイコンをもう一度クリックします。