WebUI

WebUI は、NocodilySuite で構築した API に接続し、業務画面をノーコードで組み立てる仕組みです。

業務システム・基幹システム・社内ツール・IoT 管理画面・C 向け Web サービスなど、
幅広い用途のユーザーインターフェースを構築できます。
コンソールのエディターから UI コンポーネントを配置し、接続する API を設定するだけで、
実際に動作する Web 画面が完成します。

API との接続

WebUI では、NocodilySuite で構築した各 API をエンドポイント単位で接続できます。
接続した API に対して、画面上の UI コンポーネントから直接 CRUD 操作を行えます。

認証が必要な API については、IAM API と連携した認証画面が自動的に提供され、
ログイン済みユーザーのみが操作できる画面を安全に構築できます。

IAM API と連携することで、以下の認証関連画面を標準で提供します。
デザインのカスタマイズも可能です。

WebUI では、以下の標準 UI コンポーネントを利用してページを構築します。

API と接続した UI コンポーネントから、以下のデータ操作を行えます。

機能	説明
データ表示	API レスポンスを Table / List / Card に表示
データ登録	Form から POST リクエストを送信してレコードを作成
データ更新	Form から PUT / PATCH リクエストを送信
データ削除	ボタン操作で DELETE リクエストを送信
検索	検索フォームから API の検索エンドポイントへクエリを送信
CSV ダウンロード	API データをカラムマッピングして CSV としてエクスポート
PDF キャプチャ	画面コンテンツを PDF として出力・ダウンロード

WebUI では、画面表示や UI 操作に応じてイベントを定義できます。

画面が表示されたタイミングで API への接続や初期データの取得を実行します。
ページを開いた瞬間にデータが自動的にロードされる動作を実現できます。

ボタン・リンク・モーダル・オフキャンバスなど、ユーザーの操作に応じたイベントを定義できます。
「登録ボタンを押したら API に POST して、成功したら一覧ページに遷移する」といった、
一連の操作フローを設定できます。

WebUI のデザインは、2 段階のカスタム CSS でスタイルを調整できます。

適用範囲	説明
コンポーネントレベル	Card・List・Table など個別コンポーネントへのスタイル適用
グローバルレベル	Header・Navigation など画面全体へのスタイル適用

すべての WebUI にはバージョンが付与されます。
変更を本番に反映する際はアップグレード、問題が起きた際はロールバックをコンソールから実行できます。