Quick Start
VSCode UI designer — Quick Start
Design, inspect and evolve OpenEdge ABL user interfaces without leaving VS Code. <br/> It provides a visual designer and toolbox workflow for API4UI projects, with OpenEdge ABL as the current supported language.
Prerequisites
| Requirement | Details |
|---|---|
| VS Code | 1.96 or newer |
| Node.js | v20 or newer — required to run the API4UI extension backend and tooling |
| OpenEdge | 12.8 installed |
| ABL extension | The OpenEdge ABL VS Code extension must be installed and abl.configuration.runtimes must point to your DLC directory |
Install
Install API4UI - UI Designer & Toolbox from the VS Code Marketplace or from the .vsix file.
Configure your project
API4UI works best when your workspace contains an openedge-project.json file that describes your OpenEdge project structure.
| Scope | Where | Use case |
|---|---|---|
| Project | openedge-project.json in your project root | Shared project configuration for source control |
| Workspace | VS Code workspace settings | Shared editor behavior for a multi-folder workspace |
| User | VS Code user settings | Personal preferences for your machine |
| API4UI assets | .api4ui/ inside the project | Generated toolbox and component metadata used by the designer |
Project scope example — add to openedge-project.json:
{
"name": "MyOpenEdgeProject",
"dbConnections": [
{
"name": "sports2020",
"connect": "-db sports2020 -H localhost -S 10001"
}
],
"propath": [
{
"path": "src"
}
]
}Designer assets — API4UI creates and uses project metadata under .api4ui/ when you work with toolbox components and generated UI metadata.
Open API4UI
Three ways to launch it:
- Right-click a
.wfile in the Explorer and choose 🎨 Open in API4UI designer.
The first launch may take a few seconds while the designer webview and project metadata load.
What you can do
- Open
.wUI source files in the visual designer. - Design layouts with drag-and-drop editing.
- Modify the generic UI model instead of editing generated structure by hand.
- Generate / merge changes back into OpenEdge ABL UI code while preserving custom logic.
- Create new forms, dialogs and related UI artifacts from wizard-driven commands.
- Configure project settings, component metadata and designer behavior inside VS Code.
- Prepare your project for future AI-assisted UI editing workflows on the API4UI roadmap.