defineView

ビューを定義する関数です。typeフィールドで種別（コードエディター/ビジュアルエディター）を指定し、種別に応じたフィールドを設定します。

typeによって設定できるフィールドが型で絞り込まれるため、存在しないフィールドを指定するとTypeScriptのコンパイルエラーになります。

使用例

コードエディターのビューは、codeにビューのコードを指定します。

import { defineView, readFile } from "@basemachina/sdk/oac";
 
export const userListView = defineView({
  type: "codeEditor",
  id: "user-list",
  name: "ユーザー一覧",
  code: readFile("./view-codes/user-list.tsx"),
});

ビジュアルエディターのビューは、configに画面構成を指定します。

import { defineView } from "@basemachina/sdk/oac";
 
export const orderListView = defineView({
  type: "visualEditor",
  id: "order-list",
  name: "注文一覧",
  config: {
    pageSetting: { title: "注文一覧" },
    components: [
      {
        type: "actionTable",
        id: "order-table",
        actionSetting: {
          type: "onComponentRender",
          actionId: "list-orders",
          args: {},
        },
        columnCustomizationSetting: [],
        resultTransformationSetting: { enabled: false },
      },
    ],
  },
  queryParameters: [
    { name: "status", required: false, valueForEditing: "shipped" },
  ],
});

共通フィールド

すべてのビュー種別で使用できるフィールドです。

フィールド	型	必須	説明
`type`	`"codeEditor" \| "visualEditor"`	はい	ビュー種別
`id`	`string`	はい	ビューの識別子。最大128文字で、使用できる文字は英数字・アンダースコア・ハイフン（`^[a-zA-Z0-9_-]+$`）
`previousId`	`string`	いいえ	変更前の id。既存ビューの id を `bm sync` で変更するために宣言する（下記参照）
`name`	`string`	はい	ビュー名。1〜128文字

previousId

previousId は、コード管理で既存ビューのidを変更したいときに、変更前のidを宣言します。bm sync は previousId を見て「旧idのビューを削除 + 新idで新規作成」ではなく既存ビューの id の変更として扱います。

// before（typo を含む id）
export const userListView = defineView({
  type: "codeEditor",
  id: "user-lsit",
  name: "ユーザー一覧",
  code: readFile("./view-codes/user-list.tsx"),
});
 
// after（id を変更）
export const userListView = defineView({
  type: "codeEditor",
  id: "user-list",
  previousId: "user-lsit",
  name: "ユーザー一覧",
  code: readFile("./view-codes/user-list.tsx"),
});

bm sync --dry を実行すると id 変更 セクションに <previousId> → <id> の形で表示されます。適用後のPRでは、previousId を削除できます（dry-runのNotesに削除候補として表示されます）。

previousIdにはidと同じ値を指定できません。

2つのビューのidを入れ替えるような変更は現在サポートされていません。たとえば A.previousId: "B" と B.previousId: "A" を同時に宣言する変更です。

codeEditorのフィールド

フィールド	型	必須	説明
`code`	`string`	はい	ビューのコード。空文字は指定不可。`readFile()`の戻り値も指定可能

コードの書き方はreadFileをご参照ください。

visualEditorのフィールド

フィールド	型	必須	説明
`config`	`VisualEditorConfig`	はい	ビジュアルエディターの画面構成（下記参照）
`queryParameters`	`ViewQueryParameterConfig[]`	いいえ	クエリパラメーターの定義（下記参照）。省略時は空配列

config

configはビジュアルエディターの画面構成を表すオブジェクトです。型定義が500行を超えるため、ここではトップレベルのフィールドと、配置できるコンポーネントの種類だけを紹介します。

フィールド	型	必須	説明
`pageSetting`	`{ title: string }`	いいえ	ページ設定。省略時はタイトルなし
`components`	コンポーネントの配列	はい	ビューに配置するコンポーネントの一覧

componentsに配置できるコンポーネントは以下の4種類です。

actionDetailTable：アクション詳細テーブル
actionTable：アクションテーブル
actionForm：アクションフォーム
tab：他のコンポーネントをまとめるタブ

各コンポーネントのidはビュー内で一意にする必要があります。actionFormのonActionFormSubmitなど、コンポーネント間の参照先を指定する際のキーになります。

configを手書きするのは煩雑なため、通常はベースマキナの画面上でビジュアルエディターを使ってビューを作成し、bm pullで取り込んでコード管理に移行する運用を推奨します。

queryParameters

ビューのURLで受け取るクエリパラメーターの定義です。

queryParameters: [
  { name: "status", required: false, valueForEditing: "shipped" },
];

フィールド	型	必須	説明
`name`	`string`	はい	クエリパラメーター名。英数字とハイフン、アンダースコアのみ使用可能で1〜128文字。ビュー内で重複不可
`required`	`boolean`	はい	入力を必須にするかどうか
`valueForEditing`	`string`	はい	エディター上で編集する際に使用する値。1〜128文字の非空文字列

設定ファイルへの組み込み

定義したビューは、defineConfigのviews（またはdevelopmentViews）に指定します。詳しくはdefineConfigをご参照ください。

import { defineConfig } from "@basemachina/sdk/oac";
import { userListView } from "./src/views/user-list";
 
export default defineConfig({
  project: { id: "your-project-id" },
  actions: [],
  views: [userListView],
});

defineAction readFile