WebUI
WebUI is a system for connecting to APIs built with NocodilySuite and assembling business screens without code.
It can be used to build user interfaces for a wide range of purposes —
business systems, core systems, internal tools, IoT management screens, and consumer-facing web services.
Simply place UI components in the console editor and configure which API to connect to,
and a fully functional web screen is ready.
API Connection
In WebUI, you can connect to each API built on NocodilySuite at the endpoint level.
CRUD operations can be performed directly from UI components on the connected APIs.
- MicroService API — Display, register, update, and delete data
- Authentication API (IAM API) — Login, account management, and authentication state control
- Storage API — File upload, download, and image display
For APIs that require authentication, authentication screens are automatically provided in conjunction with the IAM API,
allowing you to safely build screens that only logged-in users can operate.
Authentication Screens
By integrating with the IAM API, the following authentication-related screens are provided as standard.
Design customization is also available.
| Screen | Description |
|---|---|
| New Account Registration | User registration with email address and password |
| Login | Authentication with email address and password |
| Password Reset | Password re-setup via email |
| Two-Factor Authentication (2FA) | Additional authentication via email verification code |
| Account Settings | Password change and email address change |
UI Components
The following standard UI components are available for building pages in WebUI.
| Component | Purpose |
|---|---|
| Card | Summary / status display / single record display |
| List | Record list display (with paging and search support) |
| Table | Tabular data display with sorting and filtering |
| Form | Data registration and update forms |
| Button / Link | Action triggers and screen navigation |
| Modal / Off-canvas | Detail display and confirmation dialogs |
Data Operations
The following data operations are available from UI components connected to APIs.
| Feature | Description |
|---|---|
| Data Display | Show API responses in Table / List / Card |
| Data Registration | Send POST requests from forms to create records |
| Data Update | Send PUT / PATCH requests from forms |
| Data Delete | Send DELETE requests via button operations |
| Search | Send queries from search forms to API search endpoints |
| CSV Download | Export API data as CSV with column mapping |
| PDF Capture | Output and download screen content as a PDF |
Event Triggers
Events can be defined in WebUI in response to screen display and UI operations.
Screen Display Events
Execute API connections and initial data retrieval when a screen is displayed.
This enables data to automatically load the moment a page is opened.
UI Operation Events
Define events in response to user actions on buttons, links, modals, off-canvas elements, and more.
You can configure an entire operation flow such as "when the register button is pressed, POST to the API, then navigate to the list page on success."
Custom CSS
WebUI design can be adjusted with two levels of custom CSS.
| Scope | Description |
|---|---|
| Component Level | Apply styles to individual components like Card, List, and Table |
| Global Level | Apply styles across the entire screen including Header and Navigation |
Version Management
All WebUIs are versioned.
Upgrades when reflecting changes to production and rollbacks when problems occur can both be executed from the console.
See Upgrade / Rollback for details.