Open Source Web Application Framework for ASP.NET Core
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

10 KiB

Low-Code System

//[doc-seo]
{
    "Description": "ABP Low-Code System: design dynamic entities, forms, pages, permissions, menus, filters, and React runtime pages with the Admin Console Low-Code Designer."
}

You must have an ABP Team or a higher license to use this module.

Preview: The Low-Code System is currently in preview. APIs, designer behavior, generated metadata, and React runtime details may change before general availability. Use it for evaluation and controlled projects, and review release notes before upgrading.

The ABP Low-Code System lets you build data-driven admin screens from metadata. The primary workflow is the Low-Code Designer in ABP Admin Console, backed by the React runtime in your application.

Use the designer to model entities, enums, properties, relations, pages, forms, filters, permissions, actions, and health checks. The runtime uses the same metadata to provide:

  • CRUD REST APIs
  • EF Core dynamic entity tables
  • Permission definitions
  • Dynamic menu items
  • React data grid, kanban, calendar, gallery, form, and dashboard pages
  • Create and edit forms
  • Advanced filters
  • Excel, CSV, and file bundle export

No DTO, repository, application service, controller, or React CRUD page is required for the standard flow.

Low-Code Designer overview

Supported UI

Low-Code runtime UI is currently documented for React. The backend model, APIs, permissions, scripting, and custom endpoint infrastructure are shared by the module, but the UI walkthroughs in this section focus on Admin Console plus React.

How to Enable

The Low-Code System is an optional startup template feature. When creating a new application with ABP Studio, choose a modern React application template and enable Low-Code System in the project creation wizard.

ABP Studio creates the required backend module references, dynamic model initializer, EF Core configuration, Admin Console integration, and React runtime wiring.

The generated React project includes:

  • @volo/abp-react-lowcode
  • configureLowCode
  • LowCodeLocalizationProvider
  • createDynamicRoutes
  • useMenuItems
  • Page, form, dashboard, file, and attachment hooks

The host application wires the low-code modules, calls the generated _Dynamic initializer, configures EF Core dynamic entities, and seeds the required OpenIddict clients.

Run the Application

After ABP Studio creates the solution, use Solution Runner to run the backend host and the React application. Run the database migration task before opening the runtime pages.

The generated solution README contains the exact command-line equivalents if you prefer to run the projects outside ABP Studio.

If you generate a solution inside another repository, make sure parent build files such as Directory.Packages.props are not inherited accidentally. Use an empty output folder outside another solution, or isolate the generated solution's MSBuild configuration before running dotnet build.

Open Admin Console and navigate to Low-Code Designer after the backend is running:

https://localhost:<host-port>/admin-console/lowcode-designer

Open generated runtime pages after the React application is running:

http://localhost:<react-port>/dynamic/<page-name>

Designer Workflow

The designer is the day-to-day entry point.

  1. Use Data to create entities, enums, properties, and relations.
  2. Use Pages to choose a page type, menu placement, fields, default sorting, filters, dashboards, and linked forms.
  3. Use Forms to arrange create and edit forms with tabs, groups, controls, validations, and actions.
  4. Use Permissions to review generated permissions and control access.
  5. Use Actions and Interceptors when the standard CRUD flow needs custom logic, endpoints, event handlers, jobs, or workers.
  6. Use Health to review model issues before publishing changes.

Entity properties in the designer

Form setup in the designer

React Runtime

React runtime pages are generated from the same metadata. The page below was produced from a low-code page definition and includes the grid, menu item, permissions, display values, export, create form, and filters. The same runtime can render kanban, calendar, gallery, standalone form, and dashboard page definitions.

Generated React data grid

Generated React advanced filters

Generated React create form

Filters

React low-code filters are type-aware. The runtime shows only operators that make sense for the field type. For example:

  • Text fields support contains, equals, starts with, ends with, and has value.
  • Numeric fields support equals, comparison, between, and has value.
  • Date fields use date-friendly labels such as on, after, before, and between.
  • Boolean fields use an All / Yes / No value selector.
  • File and image fields use Has value with an All / Yes / No value selector.

All means no filter is applied. Yes maps to non-empty values. No maps to empty values.

Has value filter options

Export

Every dynamic entity page can export data to Excel or CSV. Pages with file or image fields can also export a file bundle as a ZIP. Export requests use the current search, sorting, and filters from the runtime view, so a filtered page exports the matching subset instead of the whole entity.

The React runtime exports visible exportable columns by default. These columns and their default order come from the page-level Export Fields settings in the Low-Code Designer. A field can be visible but not exportable, or hidden but still available in the All exportable fields option. Use this when a page should display operational data that should not leave the system through Excel or CSV. Server-only fields are always excluded, and foreign key values are displayed through their configured display property.

File and image fields are exported as file names by default. Export options can expand those fields into metadata columns or temporary download-link columns. Download-link columns include file name, URL, expiry, content type, size, dimensions, and status. The links are short-lived and should be treated like signed download links, not permanent public URLs.

Use Files (.zip) when users need the actual uploaded files. The action appears only when the Designer allows file bundle export and at least one selected file/image field is exportable. The ZIP contains manifest.csv and files under files/{recordId}/{fieldName}/{safeFileName}. The manifest records missing, malformed, unlinked, and limit-skipped files instead of failing the whole export.

Spreadsheet and ZIP exports require a short-lived, single-use download token. The token is bound to the tenant, page, entity, child page, and foreign-access context. File download links use separate short-lived tokens bound to the exported file value. Spreadsheet formula-like text values are escaped before writing CSV or Excel headers and cells.

Endpoint Description
GET /api/low-code/pages/{pageName}/download-token Gets a short-lived download token
GET /api/low-code/pages/{pageName}/export/excel Exports filtered data as Excel
GET /api/low-code/pages/{pageName}/export/csv Exports filtered data as CSV
GET /api/low-code/pages/{pageName}/export/files Exports selected file/image fields as a ZIP bundle
GET /api/low-code/pages/export/files/{token} Downloads one temporary file link created by spreadsheet export

Useful export settings:

Setting Default Purpose
LowCode:Export:MaxRows 100000 Maximum rows in one all-filtered export
LowCode:Export:DownloadTokenLifetimeSeconds 30 Download token lifetime
LowCode:Export:FileLinkTokenLifetimeSeconds 900 Temporary file link lifetime
LowCode:Export:MaxFileBundleFiles 1000 Maximum files in one ZIP export
LowCode:Export:MaxFileBundleBytes 268435456 Maximum total file bytes in one ZIP export

Advanced Configuration

The designer stores and reads the same descriptor metadata described in the reference pages below. Use these pages when you need source-controlled descriptor files, custom startup wiring, script handlers, or low-level integration details.

Topic Use it for
Designer Admin Console tabs, entity/page/form setup, permissions, and health
React Runtime React package wiring, routes, menu items, filters, forms, and export
Attributes & Fluent API Source-controlled C# metadata and runtime overrides
Model Descriptor Files JSON descriptor files and public descriptor schemas used by the designer and runtime
Reference Entities Lookups to existing entities such as Identity users
Foreign Access Access to related dynamic entities through relations
Interceptors JavaScript lifecycle logic for CRUD operations
Custom Endpoints JavaScript-backed REST endpoints
Script Actions Event handlers, background jobs, background workers, script editor, and dry-run testing
Scripting API Server-side script context and helpers

Runtime Internals

The generated pages are powered by these services:

  • DynamicEntityAppService handles CRUD, list queries, filtering, sorting, and export.
  • DynamicPageAppService exposes page-based CRUD, file, attachment, lookup, child, foreign-access, and export endpoints.
  • DynamicEntityUIAppService returns page, form, dashboard, field, filter, and menu metadata.
  • DynamicPermissionDefinitionProvider creates permissions for dynamic entities.
  • CustomEndpointExecutor runs JavaScript-backed custom endpoints.
  • EF Core maps dynamic entities as shared-type entities.

See Also