Creating a WebUI
NocodilySuite WebUIs are built using the visual editor in the console — no code required.
Simply connect to an API you have created, and you can instantly build screens for displaying, registering, editing, and deleting data.
Steps to Create a WebUI
- Select a team in the console.
- Click "WebUI" > "Create New WebUI".
- Fill in the basic settings:
| Field | Description |
|---|---|
| WebUI Name | An identifier name (e.g., inventory-webui) |
| URL Path | The path where the WebUI is accessed (e.g., /inventory) |
| Environment | TestEnv / DevelopEnv / StagingEnv / ProductionEnv |
| Auth Integration (optional) | Select an IAM API to enable login screens and authentication |
- Click "Create".
Building Screens in the WebUI Editor
After creating the WebUI, the editor screen opens.
Adding components:
- Select a component (Table, Card, Form, Button, etc.) from the right panel and drag it onto the canvas.
- Set each component's properties (display fields, connected API, style, etc.).
Configuring API connections:
- Select a component and open "API Settings".
- Choose the API endpoint to connect to.
- Map the API response fields to the component's display items.
Main components and their uses:
| Component | Use |
|---|---|
| Table | List display, pagination, sorting |
| Card | Detail information display |
| Form | Data entry and editing |
| Button | Actions (API calls, page navigation) |
| Search | Search parameter input for APIs |
| CSV Download | Export API data as CSV |
Preview and Validation
- Click the "Preview" button in the top-right of the editor to check the WebUI appearance in real time.
- A validation error is displayed if required settings are missing.
Publishing the WebUI
- Once the editor configuration is complete, click "Save".
- Click "Publish".
- The WebUI is now accessible at the configured URL path.
Tip
Use "Save as Draft" before publishing to safely preserve work in progress.
See Draft Saving for APIs/WebUIs in Progress for details.
Custom CSS
Custom CSS can be applied to a WebUI at two levels:
- Component level: Applied only to specific components (Table, Card, etc.)
- Global level: Applied across the entire UI, including Header and Navigation
CSS can be written directly from "Style Settings" in the editor.
Admin WebUI
An Admin WebUI for managing users and data is also automatically provided.
See Admin WebUI for details.