業務アプリを Codeer.LowCode.Blazor で作るときに繰り返し登場する「型」をまとめたページです。デザインパターンと同じく、一つひとつは小さい部品で、組み合わせて実際のアプリを組み立てるためのものです。
新しい画面やデータ構造を作るときに「この場面はどのパターン?」「このパターンは CLB のどの機能で作る?」を引けるリファレンスとして使ってください。
デザイナで新規プロジェクトを作るときに、テンプレートから 「標準パターン集」 (内部名 PatternShowcase) を選ぶと、ここで紹介する全パターンの実装サンプル集が展開されます。
- サイドバーに データ操作 / リスト / 一覧 / 検索 / レイアウト / 入力UX / 出力 / ダイアログ等 / 別フレーム のカテゴリで各パターンへのリンクが並んでいる
- 各リンクは「動く画面 + 設定済みモジュール定義」 = そのままコピーして自分のプロジェクトに転用できる
このマニュアルの各パターンには 標準パターン集の対応モジュール名を必ず書いています。マニュアルで概念を掴んでデザイナで実物を触る、という二段構えで読むのがおすすめです。
| パターン | アプリのイメージ |
|---|---|
| 単一 CRUD | 商品マスタなど 1 画面で完結する基本形 |
| マスタ参照 (多対1) | 商品にカテゴリ、店舗に業態を紐付け |
| ヘッダ詳細 (1:N) | 注文+明細、請求書+行 |
| 多段ネスト | プロジェクト → フェーズ → タスク (3 段以上) |
| 多対多 | 記事にタグ、ユーザーにロール (中間テーブル) |
| 階層構造 (自己参照) | カテゴリ階層・組織図 |
| 一括処理 | チェック行をまとめて削除/更新 |
| 洗い替え | 明細の全件入れ替え、一意キー (座席番号等) の入れ替え |
| 取込書出 | CSV/Excel での一括入出力 |
| 楽観ロック | 同時編集の競合検出 |
| 論理削除 | 削除フラグで非表示にする / 削除時刻 (DeletedAt)・削除者 (Deleter) の自動記録 |
| 自動保存 | 保存ボタンなしで編集を自動 DB 反映 |
| 作成日時・更新日時 | システムフィールドで自動セット (CreatedAt/UpdatedAt/Creator/Updater/DeletedAt/Deleter) |
| 双方向 ID 持ち合い (1:1) | 会社↔代表者、申請↔承認フロー |
各パターンは「アプリの作り (ユーザーが見る/操作する画面) → 支えるデータ構造 (テーブル) → モジュールとテーブルの対応 → CLB ではこう作る」の流れで読めます。
B. 検索のパターン
リストの絞り込み入力 (6 パターン): 全フィールド検索 / 簡易検索パラメータ / 空検索 / AND・OR 切替 / 検索条件の Select 連動 / 検索条件の初期化
複数レコード表示 3 種 (ListField 表 / DetailListField フォーム並び / TileListField タイル並び) の選び方 + セルに詳細レイアウト (ListField 応用)
D. 一覧ページのパターン
PageFrame.Link で自動生成される 3 画面セットの応用 (7 パターン): 基本 / 一括処理 (Excel入出力) / Detail 表示 / 既定条件 / カスタム一覧 / ダイアログ編集 / 左右分割
別画面遷移せずユーザー操作 (7 パターン): メッセージボックス / ボタンスタイル / Module 編集ダイアログ / スライドパネル / ポップアップ / 右クリックメニュー / トースト
F. 画面レイアウトのパターン
GridLayout / TabLayout / CanvasLayout の組み合わせ (10 パターン): フォーム整形 / タブ分割 / FillAvailable / 折り返し / 罫線・カード / リサイズ / 列幅を比率で拡大縮小 / モジュール埋め込み / 自由配置 / ウィザード
G. 入力 UX のパターン
フォーム入力体験向上 (8 パターン): 入力検証 / 連動入力 / 連動入力 (検索条件) / 自動計算 / 既定値 / ショートカット / ファイル添付 / 画像
H. 出力のパターン
帳票出力 (1 パターン): Excel / PDF 帳票
I. 別フレームのパターン
PageFrame 単位のサンプル (4 パターン): ヘッダー型ナビ / 自動ズーム / 色テーマ変更 / 画面幅で切替
J. 認証パターン集 (別テンプレート)
「認証パターン集」テンプレート (内部名 PatternShowcaseAuth) の各パターン (4 個別ファイル):
- ユーザーモジュールと認証連動 ─
AppUser/CurrentUser/ パスワード変更 - 個人データのフィルタと権限 ─
DataReadConditionで本人のみ閲覧、検索初期値で「自分のデータ」絞り込み - 承認フローのワークフロー ─ 申請 → 承認フロー → 履歴のテンプレート駆動ワークフロー
- 一般画面と管理画面の分離 (複数 PageFrame) ─
Mainフレーム /AdminFrameの使い分け
各パターンは以下の構造で書いています:
| セクション | 内容 |
|---|---|
| いつ使う | 業務シーンの典型例 |
| アプリの作り | ユーザーが見る画面と操作の流れ |
| 支えるデータ構造 | テーブルと列・FK の関係 (簡易図) |
| モジュールとテーブルの対応 | どのモジュールがどのテーブル/フィールドを持つか |
| CLB ではこう作る | フィールド構成・必要な設定の要点 |
| 標準パターン集の対応 | 実機確認用のサイドバーリンク + モジュール名 |
| 落とし穴 | よくある間違い (あれば) |
- 業務テンプレート一覧 — 完成形のアプリをまるごとコピーして自社向けに改造する起点（在庫管理 / SFA / プロジェクト管理）
- モジュール定義の全体構造 — モジュールファイル
*.mod.jsonの構成 - Field リファレンス — 各フィールド型の詳細
- 一覧ページパターン集 — 一覧ページ系の追加パターン
- 認証 / 認可の概要