Tip

このドキュメントはAIによって翻訳されました。不正確な情報については、英語版をご参照ください

JSをオンラインで記述・実行

NocoBaseでは、RunJS は軽量な拡張方法を提供しており、素早い実験や一時的なロジック処理 に適しています。プラグインを作成したり、ソースコードを修正したりすることなく、JavaScriptを使ってUIやインタラクションを自由にカスタマイズできます。

RunJSを使えば、UIビルダーにJSコードを直接入力して、以下のことを実現できます。

  • コンテンツのカスタムレンダリング(フィールド、ブロック、カラム、アイテムなど)
  • インタラクションロジックのカスタム(ボタンクリック、イベント連携など)
  • コンテキストデータと連携した動的な動作

対応シナリオ

JSブロック

JSを使ってブロックのレンダリングをカスタマイズすることで、ブロックの構造やスタイルを完全に制御できます。
カスタムコンポーネント、統計グラフ、サードパーティコンテンツなど、非常に柔軟な表示が求められるシナリオに適しています。

20250916105031

ドキュメント:JSブロック

JSアクション

JSを使ってアクションボタンのクリックロジックをカスタマイズすることで、任意のフロントエンド操作やAPIリクエストを実行できます。
例えば、値を動的に計算したり、カスタムデータを送信したり、ポップアップをトリガーしたりできます。

20250916105123

ドキュメント:JSアクション

JSフィールド

JSを使ってフィールドのレンダリングロジックをカスタマイズできます。
フィールドの値に基づいて、異なるスタイル、コンテンツ、または状態を動的に表示できます。

20250916105354

ドキュメント:JSフィールド

JSアイテム

JSを使って独立したアイテムをレンダリングできます。特定のフィールドにはバインドされません。
カスタム情報ブロックの表示によく利用されます。

20250916104848

ドキュメント:JSアイテム

JSテーブルカラム

JSを使ってテーブルカラムのレンダリングをカスタマイズできます。
プログレスバーやステータスラベルなど、複雑なセル表示ロジックを実装できます。

20250916105443

ドキュメント:JSテーブルカラム

連携ルール (Linkage Rules)

フォームやページ内でJSを使ってフィールド間の連携ロジックを制御します。
例えば、あるフィールドが変更されたときに、別のフィールドの値や表示/非表示を動的に変更できます。

20251029114532

ドキュメント:連携ルール

イベントフロー (Eventflow)

JSを使ってイベントフローのトリガー条件と実行ロジックをカスタマイズし、より複雑なフロントエンドのインタラクションチェーンを構築できます。

ドキュメント:イベントフロー