API4UI - Visual UI Designer (Currently ABL language only)

Professional drag-and-drop UI designer for OpenEdge ABL applications

API4UI is a VS Code extension with an AI-first roadmap for building OpenEdge ABL UIs: it translates your native UI code into a generic UI model, lets you change that model (visually today, AI-assisted workflows on the roadmap), then writes the result back to ABL.

The key idea is that all edits happen in the generic model, not directly in the native code. That makes transformations reliable, composable, and toolable (designer, AI prompts, refactors, generators).

Today API4UI focuses on ABL, but the approach is meant to be multi-language. If you want API4UI for your language, open an issue and describe your language + UI framework + sample inputs/outputs: https://github.com/ai4you-io/api4ui/issues/new

 Native language (OpenEdge ABL UI code)
            |
            | parse / extract
            v
     Generic UI Model (single source of truth for edits)
        |                       |
        | visual designer        | AI builder (roadmap)
        | (drag & drop)          | (prompt -> model diffs)
        v                       v
     Model changes (layout / properties / structure)
            |
            | generate / merge
            v
 Native language (updated ABL UI code)

This repository is intended to support users by providing extra information and guidance about the VS Code extension API4UI - Visual Studio Marketplace.

In This Article

• Installation
• How it Works
• AI Roadmap
• Getting Started
• Key Features
• Documentation
• When do you plan on releasing features?
• I want to report a bug
• I need a tailor-made solution
• Community

How it Works

1. Native language
   • Your existing OpenEdge ABL UI code (the real source files you already ship).
2. Generic language
   • API4UI parses the native code into a generic UI model (structure + layout + properties).
3. Modify in the generic environment
   • Use drag-and-drop and property editors to apply transformations to the model.
   • AI-assisted workflows (prompt -> model diffs) are on the roadmap.
4. Write back
   • API4UI generates/merges the updated model back into native ABL code while preserving your custom methods and event handlers.

AI Roadmap

• Prompt -> model diffs: describe a change in natural language; API4UI proposes a structured model change.
• Safe apply & review: preview diffs, validate, and apply changes with guardrails.
• Reusable generators: save prompts and transformations as templates for your team.

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "API4UI"
4. Install the extension by AI4YOU

From Command Line

code --install-extension ai4you.api4ui

Where can I find the documentation?

Access comprehensive documentation through the built-in VS Code extension:

• Command Palette: Ctrl+Shift+P → "📚 Documentation"
• Status Bar: Click the gear icon → Documentation
• Context Menu: Right-click in any .cls file → Documentation

Extended online documentation will be available in the future.

When do you plan on releasing features?

You can create an issue where you explain your idea or feature:

1. Create the issue Open a new issue
2. Explain your feature as CLEAR as possible
3. Include use cases and examples if applicable

We prioritize features based on community feedback and enterprise requirements.

I want to report a bug

1. Check if the issue does not already exist in existing issues
2. Create the issue Open a new issue
3. Add a reproducible case with:
   • Steps to reproduce
   • Expected behavior
   • Actual behavior
   • VS Code version and extension version
   • Sample .cls files (if applicable)

If you need assistance with troubleshooting or isolating a problem, you can request remote assistance through our Support system. Remote assistance is included in enterprise support subscriptions.

I need a tailor-made solution

Our team specialized in making VS Code extensions and native applications is here to provide you the most versatile and tailored solution for your company.

Enterprise Services:

• Custom API4UI components
• Framework integrations
• Training and consultation
• Priority support

Contact us at info@api4ui.io for enterprise solutions.

Getting Started

Quick Start

1. Install the extension from the VS Code Marketplace
2. Open an OpenEdge ABL project in VS Code
3. Create a new form: Right-click in Explorer → API4UI toolbox → ABL → New → Form
4. Open the visual designer: Right-click any .cls file → "🎨 Open in API4UI designer"
5. Start designing: Drag and drop components from the toolbox

Keyboard Shortcuts

• Ctrl+Shift+F8 - Open .cls file in visual designer
• Ctrl+Shift+F9 - Switch back to text editor from designer

Project Setup

Initialize your project for optimal experience:

1. Use Command Palette: Ctrl+Shift+P → "Initialize Project Configuration"
2. Configure build paths and database connections
3. Analyze UI components: "UI Components from openedge-project.json"

Key Features

• Visual designer: drag-and-drop UI creation for ABL.
• Generic UI model: edits are applied in a generic representation, then written back.
• Bidirectional workflow: switch between designer and code.
• Code generation: preserves your custom methods and event handlers.
• Progress widgets support: accurate parsing and rendering.
• AI-assisted editing: on the roadmap.

System Requirements

• VS Code: Version 1.96.0 or higher
• OpenEdge: Version 11.7 or higher (12.8 recommended)
• Operating System: Windows, macOS, or Linux
• Memory: 4GB RAM minimum (8GB recommended for large projects)

Community

• GitHub Issues: Report bugs and request features
• Documentation: Built-in extension documentation
• Enterprise Support: info@api4ui.io

AI4YOU - Empowering developers with intelligent tools for modern application development.