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 .w file 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 .w UI 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.

Demo

Ouvrir la video dans un nouvel onglet Video: demo.mp4

demo.mp4

Manuels