WebUIの作成
NocodilySuite の WebUI は、コンソール上のビジュアルエディターを使用して、コードを書かずに業務画面を構築できます。
作成したAPIと接続設定するだけで、データの表示・登録・編集・削除が可能な画面を簡単に構築できます。
WebUI作成の手順
- コンソールでチームを選択します。
- 「WebUI」>「新規WebUIを作成」 をクリックします。
- 以下の基本設定を入力します。
| 項目 | 説明 |
|---|---|
| WebUI名 | 識別用の名称（例: inventory-webui） |
| URLパス | アクセス先のパス（例: /inventory） |
| 環境 | TestEnv / DevelopEnv / StagingEnv / ProductionEnv |
| 認証連携（任意） | 接続する IAM API を選択（ログイン画面・認証機能を有効化） |
- 「作成」 をクリックします。
WebUIエディターでの画面構成
WebUI作成後、エディター画面が開きます。
コンポーネントの追加:
- 右パネルからコンポーネント（Table、Card、Form、Button など）を選択し、画面にドラッグ&ドロップします。
- 各コンポーネントのプロパティ（表示項目・接続API・スタイルなど）を設定します。
APIとの接続設定:
- コンポーネントを選択し、「API設定」 を開きます。
- 接続するAPIのエンドポイントを選択します。
- APIのレスポンスフィールドとコンポーネントの表示項目をマッピングします。
主なコンポーネントと用途:
| コンポーネント | 用途 |
|---|---|
| Table | 一覧表示・ページング・ソート |
| Card | 詳細情報の表示 |
| Form | データ登録・編集 |
| Button | アクション（APIコール・ページ遷移） |
| Search | API検索パラメータの入力 |
| CSV Download | API データのCSV出力 |
プレビューと確認
- エディター右上の 「プレビュー」 ボタンでリアルタイムにWebUIの見た目を確認できます。
- 必須設定が不足している場合はバリデーションエラーが表示されます。
WebUIの公開
- エディターで構成が完了したら 「保存」 をクリックします。
- 「公開」 をクリックします。
- 設定したURLパスでWebUIにアクセスできます。
ヒント
公開前に 「下書き保存」 を活用することで、作業途中のWebUIを安全に保管できます。
詳細は 作成中のAPI/WebUIの下書き保存 を参照してください。
カスタムCSS
WebUIには2段階でカスタムCSSを適用できます。
- コンポーネントレベル: 特定のコンポーネント（Table、Card など）にのみ適用
- グローバルレベル: Header・Navigation など全体に適用
エディターの 「スタイル設定」 から直接CSSを記述できます。
Admin WebUI
APIの管理操作（ユーザー管理・データ管理）を行う Admin WebUI も自動で提供されます。
詳細は Admin WebUI を参照してください。