Events and Interactions
Event System
Events connect user interactions in the browser to 4D functions on the server side.
Flow
- The user clicks a button or interacts with an element
- bweb.js sends the event via WebSocket to 4D
- 4D looks up the events configuration on the block
- Calls the function: ds.{className}.{functionName}()
- The function returns a WebFormController with response instructions
- The browser applies the response
Event Types
| Event | Trigger |
|---|---|
| onClick | Click on a button |
| onSelectRows | Row selection in a listbox |
| onChange | Field value change |
| onLoad | Block loading |
Buttons and onClick
Configuring an onClick event in the block events:
{"onClick": [{"vt_ClassName": "MY_DATACLASS", "vt_FunctionName": "myFunction", "vo_Param": {"vt_BlocNameToSend": "UUID_WRAPPER_FIELDS"}}]}vo_Param.vt_BlocNameToSend: UUID of the wrapper containing the fields whose values should be sent to the function.
renderFunction (Client-side)
JavaScript functions executed in the browser, without server call:
| Function | Description |
|---|---|
| actionAccordingNumberLine | Enables/disables a button based on listbox selection |
| showBloc | Shows a block |
| hideBloc | Hides a block |
| toggleBloc | Toggles block visibility |
WebFormController (Server-side)
Object returned by 4D functions to control the response:
| Method | Description |
|---|---|
| reloadBlock("name") | Refreshes a specific block |
| sendAlert("success", "msg") | Displays a toast notification |
| showBloc("name") / hideBloc("name") | Toggles block visibility |
| redirect("/url") | Navigates to another page |
| addNewEntity() | Prepares a new entity |
| save() | Saves the current entity |
| removeEntity() | Deletes the current entity |
SearchEffect and Filters
Real-time search system integrated with listboxes. The search field triggers an event that filters the entity selection server-side.