レスポンシブ Web アプリケーションを設計する方法: グリッド内の列の非表示

レスポンシブ Web アプリケーションでは、モバイルアプリケーションに関連する情報だけが表示されます。つまり、デスクトップ画面に表示されるエレメントの一部はスマートフォンの画面には表示されません。
グリッドについては、通常、極小サイズの画面よりもワイドスクリーンの場合に多くの列が表示されます。
これは、Work With for Web パターンの場合に該当します。次に示すように、このパターンの既定のフォームでは、[ Web Form Defaults ] プロパティが Responsive Web Design に設定されると、抽象レイアウトが生成されます。

実行時の注意事項

極小サイズの画面の場合、グリッドには 3 つの列だけが表示されます:

小サイズの画面やワイドスクリーンでは、グリッドにすべての列が表示されます:

設計方法

表示する列としない列をユーザーが設計時に選択できます。
この例では、極小サイズの画面の場合、実行時に非表示にする 1 つのグリッド列を選択します。WWOptionalColumn クラスは [ Column Class ] プロパティに割り当てられます。

WWOptionalColumn クラスは "Flat" テーマに属します。このクラスのプロパティ値は、"ExtraSmall" という条件付きルールに応じて異なります。このトピックの詳細については、「テーマの条件付きクラスのプロパティ」を参照してください。

"ExtraSmall" ルールが TRUE と評価される場合、WWOptionalColumn クラスの [ display ] プロパティの値は none になります。条件付きルールはメディアクエリ (ユーザーは認識しません) に変換されます。このルールによって、目的の動作を取得し、一部のグリッド列を非表示にすることができます。

参考情報

レスポンシブ Web アプリケーションを設計する方法: フォーム内のエレメントの非表示
抽象エディターを使用する方法: Web トランザクションフォームの設計
抽象エディターを使用する方法: レスポンシブテーブル内のセルの非表示
RWA でのレイアウトの調整