Framework

Screens described,
not coded

Every UI in DEX Elements is driven by a JSON descriptor. Define fields, layouts, validation, and data sources declaratively — the framework renders production-grade Angular components automatically.

01The Descriptor Model

One JSON file
defines the entire screen

Instead of writing Angular templates, services, and CSS by hand, you write a JSON descriptor. The framework reads it and renders a complete, interactive screen with data binding, validation, and permissions — instantly.

contractors.desc.json
"type": "grid",
"title": "Contractors",
"dataSource": "/api/v1/contractors",
"fields": [
{ "id": "code", "label": "Code", "sortable": true },
{ "id": "name", "label": "Company Name" },
{ "id": "status", "type": "pill" }
],
"actions": ["create", "edit", "delete"]
→
renders
Contractors
CodeCompany NameStatus
00009Oakridge ManufacturingActive
02019Profit SolutionsActive
23692NovaChem IndustriesPending
02Layout System

Compose screens from
layout primitives

Rows, columns, tabs, split panes, and collapsible sections — all defined in the descriptor. Nest layouts to create complex enterprise screens without writing a single line of CSS.

order-detail.desc.json
"layout": "split-horizontal",
"top": {
"layout": "columns",
"children": [
{ "type": "info-card", "title": "Order" },
{ "type": "info-card", "title": "Customer" }
]
},
"bottom": { "type": "tabs", "items": ["Items", "History"] }
→
renders
Order Info
SO-4821Mar 28, 2026
Amount$24,500
Customer
Oakridge Mfg.
New York, NY
ItemsHistory
ProductQtyTotal
Valve Assembly50$16,000
Pressure Gauge100$8,500
03Form Components

Every input type
out of the box

Text, number, date, select, multi-select, toggle, radio, file upload, rich text, color picker — all available as descriptor field types with built-in validation, formatting, and accessibility.

employee-form.desc.json
"type": "form",
"fields": [
{ "type": "text", "label": "Full Name", "required": true },
{ "type": "select", "label": "Department" },
{ "type": "date", "label": "Start Date" },
{ "type": "toggle", "label": "Active" },
{ "type": "file", "label": "Photo" }
]
→
renders
New Employee
Engineering ▾
Apr 1, 2026
📎 Upload file...
SaveCancel
04Validation Engine

Declarative validation
with live feedback

Required fields, min/max, regex patterns, cross-field dependencies, async server-side checks — all defined in the descriptor. The framework shows inline errors, success states, and helper text automatically.

validation rules
"validation": [
{ "field": "email", "rule": "required|email" },
{ "field": "amount", "rule": "min:1|max:999999" },
{ "field": "taxId", "rule": "async:validateTaxId" }
]
→
renders
Form Validation
not-an-email
$24,500
94-8256443
05Data Binding

Connect any component
to your REST API

Point a component at an API endpoint and the framework handles loading, pagination, error states, caching, and optimistic updates. Master-detail relations, cascading lookups, and real-time subscriptions — all declarative.

data binding
"dataSource": "/api/v1/orders",
"pagination": { "pageSize": 25 },
"detail": {
"endpoint": "/api/v1/orders/{id}/items",
"trigger": "row-click"
},
"realtime": "ws://api/v1/orders/stream"
→
renders
Sales Orders Live
OrderCustomerAmount
SO-4821Oakridge Mfg.$24,500
SO-4820NovaChem AG$18,200
06Permission System

Field-level permissions
in the descriptor

Control who can see, edit, or delete at the field, row, and action level. Permissions are defined in the descriptor and enforced at both the UI and API layer — no gaps, no workarounds.

permissions
"permissions": {
"salary": { "view": ["hr", "admin"] },
"delete": { "roles": ["admin"] },
"approve": { "condition": "amount < 50000" }
}
→
enforces
Employee — Permissions Demo
Name👁 Visible✏ Editable
Email👁 Visible✏ Editable
Salary🔒 Hidden🔒 Locked
Delete🚫 Admin only
Live Filtering

Instant search across
every data table

Type in the search bar and watch the grid filter results in real time — no round-trip to the server for small datasets, server-side search for large ones. Highlighting, fuzzy matching, and column-specific filters included.

app.dexelements.com/erp/contractors
Contractors
▋
CodeCompany NameTax IDCityStatus
00009ridge Manufacturing94-825644New YorkActive
02019Profit Solutions94-875644ChicagoActive
23692NovaChem Industries84-962544BerlinPending
59231Globalex Trading73-829100LondonActive
67934Atlas Precision62-918475TokyoInactive
80112Meridian Logistics55-730291DubaiActive
Showing 6 of 6 contractors
Form Submission

Create records with
validated forms

Data entry forms with real-time validation, cross-field rules, and type-safe submission. When the user clicks Save, the data goes through the REST API to Oracle Database — with full audit trail.

app.dexelements.com/erp/orders/new
New Sales Order
Report Builder

Generate reports
in seconds

Select parameters, click Generate, and watch the report build itself — charts, summaries, and data tables. Export to PDF or Excel with one click. All powered by the same REST API layer.

app.dexelements.com/erp/reports
Revenue Report
Q1 2026 All Regions
$0Total Revenue
0Orders
$0Avg Order
0%Growth
Jan
Feb
Mar
RegionOrdersRevenueGrowth
North America124$1,280,000+18%
Europe89$720,000+12%
Asia Pacific71$400,000+4%
Customizability

It's Angular. Your team
already knows it.

The migrated application isn't a black box — it's a standard Angular project with TypeScript services, reactive forms, and a modular component architecture. If your team knows Angular, they can extend, customize, and evolve the system without limits. No proprietary runtime. No vendor lock-in. Full source code ownership.

contractor-form.component.ts 
// Customizing a migrated component
// — standard Angular, standard TypeScript

@Component({
  selector: 'app-contractor-form',
  templateUrl: './contractor.dex.html',
})
export class ContractorFormComponent {
  // DEX-generated service handles Oracle DB
  constructor(private api: ContractorService) {}

  // ✅ Add your own business logic
  async onSave(contractor: Contractor) {
    await this.api.update(contractor);
    this.notifySlack(contractor);  // custom
  }

  // ✅ Integrate any third-party library
  private notifySlack(c: Contractor) {
    slack.send(`Updated: ${c.name}`);
  }
}

Standard Angular — no proprietary lock-in

The migrated application is a standard Angular project. Any developer who knows Angular can read, extend, and maintain it. No custom runtime, no special compiler, no vendor dependency after migration.

Extend in hours, not months

Need a new dashboard? A custom report? A third-party integration? Your in-house Angular team can build it directly on top of the migrated codebase — using the same components, services, and data layer.

JSON descriptors for rapid changes

Every screen, form, and table is driven by a declarative JSON descriptor. Change a field label, add a column, rearrange a layout — edit the JSON, and the UI updates instantly without recompilation.

Modular component architecture

Every migrated module is a self-contained Angular component with its own service layer, data bindings, and validation rules. Swap, replace, or extend individual modules without touching the rest of the application.

Full access to the npm ecosystem

Charts, maps, rich text editors, PDF generators — install any Angular-compatible npm package and integrate it into the migrated application. The full open-source ecosystem is at your disposal.

Hire from the largest talent pool

Angular is one of the most widely adopted enterprise frameworks — millions of developers worldwide. No niche skills required. Your team can maintain and evolve the system from day one.

Component Library

Every Oracle Forms component,
rebuilt for the modern web

Each legacy Oracle Forms UI element is mapped to a high-performance Angular counterpart. Fully typed, fully accessible, fully governed.

01

Data Tables & Grids

Multi-Record Block / Tabular Form <DEX.Grid>

High-performance data grids that replace Oracle Forms multi-record blocks. Supports inline editing, sorting, filtering, column reordering, and virtual scrolling for 100k+ rows. Each cell updates independently — no full-table re-renders.

  • Virtual scrolling for massive datasets
  • Inline cell editing with validation
  • Column pinning, resizing, grouping
  • Heatmap & conditional formatting
  • Export to CSV/Excel
IDNameStatusAmount
1042Acme CorpActive$12,450
1043Globex LtdPending$8,920
1044Initech IncActive$23,100
1045Umbrella CoDraft$5,340
02

Data Entry Forms

Single-Record Block / Form <DEX.Form>

Dynamic form generation from JSON descriptors. Replaces Oracle Forms single-record data blocks with type-safe, validated Angular reactive forms. Supports all field types, conditional visibility, cross-field validation, and audit trails.

  • Auto-generated from JSON schema
  • Cross-field validation rules
  • Conditional field visibility
  • File upload & rich text fields
  • Full audit trail on every save
Acme Corporation
[email protected]
United States ▾
Active ▾
SaveCancel
04

Modal Dialogs & Popups

Alert / Window / Stacked Canvas <DEX.Dialog>

Accessible modal dialogs replacing Oracle Forms alerts, stacked canvases, and popup windows. Supports confirmation flows, multi-step wizards, nested forms, and focus trapping — all meeting WCAG 2.1 AA compliance.

  • Confirmation & destructive action dialogs
  • Multi-step wizard flows
  • Nested form submission
  • Focus trap & keyboard dismiss
  • Backdrop click & ESC handling
Confirm Submission

Are you sure you want to submit this invoice? This action cannot be undone.

ConfirmCancel
05

Buttons & Actions

Push Button / WHEN-BUTTON-PRESSED Trigger <DEX.Action>

Declarative action buttons that replace Oracle Forms push buttons and WHEN-BUTTON-PRESSED triggers. Actions are defined as JSON descriptors — the framework handles loading states, error handling, success feedback, and permission checks.

  • Declarative action definitions
  • Automatic loading & disabled states
  • Permission-based visibility
  • Optimistic updates with rollback
  • Batch action support
Save Record Submit for Review Cancel Delete ⟳ Refresh ⬇ Export
06

SQL Actions & Data Binding

PL/SQL Triggers / Database Block <DEX.DataSource>

Secure, declarative data binding that replaces PL/SQL triggers and Oracle Forms database blocks. All queries execute through a governed API layer — no direct SQL from the frontend. Supports CRUD operations, stored procedures, pagination, and real-time subscriptions.

  • Governed API layer — no direct SQL
  • Automatic CRUD generation
  • Stored procedure integration
  • Optimistic concurrency control
  • Real-time WebSocket subscriptions
GET /api/invoices?status=active&page=1
POST /api/invoices/1042/approve
WS /ws/invoices/stream → real-time
200 OK 12ms
07

Grid Layout System

Canvas / Stacked Canvas Layout <DEX.Layout>

Responsive grid layout system that replaces Oracle Forms canvas positioning. Define rows, columns, and areas declaratively in JSON. Supports nested grids, responsive breakpoints, collapsible regions, and drag-to-resize panels.

  • Declarative row/column definitions
  • Responsive breakpoints
  • Collapsible & resizable regions
  • Nested layout composition
  • Master-detail split views
Header
Sidebar
Card
Card
Card
Main Content Area
08

Tabbed Panel

Tab Canvas / Tab Page <DEX.Tabs>

Tabbed navigation panels replacing Oracle Forms tab canvases. Supports lazy-loading of tab content, closable tabs, drag-reorder, overflow scrolling, and vertical tab orientation. Each tab can host a full form or grid.

  • Lazy-loaded tab content
  • Closable & draggable tabs
  • Overflow scrolling for many tabs
  • Vertical tab orientation
  • Persistent tab state across sessions
Firma Krzak Sp. z o.o.
9482564443
Active ▾
Contractor ▾
10

LOV Picker & Record Groups

LOV (List of Values) / Record Group <DEX.LOV>

Advanced list-of-values picker replacing Oracle Forms LOV dialogs. Opens as a searchable modal with multi-column display, server-side filtering, and the ability to return multiple values to the parent form — exactly matching the Oracle Forms LOV workflow.

  • Multi-column LOV display
  • Server-side search & pagination
  • Return multiple values to parent
  • Recent selections cache
  • Cascading dependent LOVs
Select contractor...
Krzak
KodNazwaNIP
00009Firma Krzak Sp. z o.o.948256
57683Krzak Logistics738492