From 7978a13e09e88d4ae2c84dd0129b76087a6a9cde Mon Sep 17 00:00:00 2001 From: maliming Date: Fri, 10 Jul 2026 10:34:46 +0800 Subject: [PATCH] Add ABP Suite React CRUD page generation docs --- docs/en/suite/create-solution.md | 2 +- docs/en/suite/creating-many-to-many-relationship.md | 2 +- docs/en/suite/creating-master-detail-relationship.md | 2 +- docs/en/suite/customizing-the-generated-code.md | 2 +- docs/en/suite/editing-templates.md | 2 +- docs/en/suite/generating-crud-page.md | 2 +- docs/en/suite/index.md | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/en/suite/create-solution.md b/docs/en/suite/create-solution.md index 1ec5a799cd..dfe4234046 100644 --- a/docs/en/suite/create-solution.md +++ b/docs/en/suite/create-solution.md @@ -25,6 +25,6 @@ From ABP Suite v8.3, **create a new solution** option has been removed. Instead, it's suggessted to use [ABP Studio](../studio/index.md) or [ABP CLI](../cli/index.md) to create a new solution. After, creating an ABP Solution, then you can generate CRUD pages via ABP Suite as always. -> **Note:** ABP Suite does not generate React UI pages. If you create a modern React solution, use Suite where applicable for backend and application-layer generation, and develop the React UI in the source-owned [React UI](../framework/ui/react/index.md) application. ABP license holders can use [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits to generate React pages more easily. +> **Note:** For modern React UI solutions (`app/react`), ABP Suite generates the backend, the application layer and the React CRUD UI. Develop any React UI that generation does not cover in the source-owned [React UI](../framework/ui/react/index.md) application. ABP license holders can also use the [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits for React pages. > ABP Studio has a shortcut for running [ABP Suite](./index.md) to allow using it without starting it externally and using it on a browser, which means you can create, manage, deploy your applications in a single desktop application and also generate CRUD pages via Suite as a pre-integrated application to ABP Studio. \ No newline at end of file diff --git a/docs/en/suite/creating-many-to-many-relationship.md b/docs/en/suite/creating-many-to-many-relationship.md index 005cab9896..68450b813e 100644 --- a/docs/en/suite/creating-many-to-many-relationship.md +++ b/docs/en/suite/creating-many-to-many-relationship.md @@ -75,6 +75,6 @@ Click the **Navigations** tab. Then click the **Add navigation collection** butt The below image is the final page created by ABP Suite. The **new book** dialog has a **Categories** tab which lists all categories of the book and allows add/remove categories. -> **Note:** ABP Suite does not generate React UI for this page. The generated UI applies to Suite-supported UI stacks such as MVC, Blazor and Angular. ABP license holders can use [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits to generate React pages more easily. +> **Note:** ABP Suite does not generate this many-to-many (navigation collection) page for React yet — it applies to the MVC, Blazor and Angular UI stacks. React CRUD generation for modern React UI solutions (`app/react`) covers fields, navigation-property lookups and master-detail relationships; for many-to-many UI, ABP license holders can use the [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits. ![navigation-collection-books-page](../images/navigation-collection-books-page.8.1.png) diff --git a/docs/en/suite/creating-master-detail-relationship.md b/docs/en/suite/creating-master-detail-relationship.md index 94bda1b7fa..38159f57ed 100644 --- a/docs/en/suite/creating-master-detail-relationship.md +++ b/docs/en/suite/creating-master-detail-relationship.md @@ -39,7 +39,7 @@ You need to specify the **Entity type** as _Master_ (default). Then, provide the Create a child entity, specify the **Entity type** as _Child_, and associate it with a master entity. In the figure above, you can see an example of, a child entity **OrderLine** with the associated master entity **Order**. When you specify the **Entity type** as _Child_, then the UI and tests will not be generated for the child entity and instead, all of the orchestration of the entity will be delegated to its master entity. -> **Note:** ABP Suite does not generate React UI for master-detail pages. The generated UI applies to Suite-supported UI stacks such as MVC, Blazor and Angular. ABP license holders can use [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits to generate React pages more easily. +> **Note:** For modern React UI solutions (`app/react`), ABP Suite generates the master-detail UI: once the master record exists, each child entity renders as a sub-grid on its own tab inside the master edit dialog, with its own add/edit/delete dialog. This is generated in addition to the MVC, Blazor and Angular UI stacks. Application services will be generated for the child entity, so it's possible for you to consume its endpoints and create-update-list or delete the child entity specifically. Suite also respects your multi-tenancy selection and sets the child entity as a multi-tenant entity, if the master entity has multi-tenancy enabled. diff --git a/docs/en/suite/customizing-the-generated-code.md b/docs/en/suite/customizing-the-generated-code.md index 18f63d642c..c76410ed87 100644 --- a/docs/en/suite/customizing-the-generated-code.md +++ b/docs/en/suite/customizing-the-generated-code.md @@ -58,7 +58,7 @@ You can see the example below, which demonstrates defining a new method in the ` For the UI side, ABP Suite provides convenient comment placeholders within pages for MVC, Blazor, and Angular UIs. These comment sections serve as hook points where you can add your custom code. By placing your custom logic with these hook points, you can enhance the UI to your needs without the fear of losing your changes during the next CRUD page generation. -> **Note:** ABP Suite does not generate React UI pages or React customization hook points. React UI is part of ABP's modern template system and is customized directly in the source-owned [React UI](../framework/ui/react/index.md) application. ABP license holders can use [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits to generate React pages and customize them more easily. +> **Note:** These comment-based hook points are available for the MVC, Blazor and Angular UIs. ABP Suite also generates React CRUD pages for modern React UI solutions (`app/react`), but the React pages do not provide the same in-page custom-code hook points yet, so re-generating an entity overwrites its React page. Keep customizations to the React UI in the source-owned [React UI](../framework/ui/react/index.md) application, outside the generated pages. ABP license holders can also use the [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits to evolve the React UI. ### Customizations on MVC UI diff --git a/docs/en/suite/editing-templates.md b/docs/en/suite/editing-templates.md index 3a6160a215..9a11cd2580 100644 --- a/docs/en/suite/editing-templates.md +++ b/docs/en/suite/editing-templates.md @@ -16,7 +16,7 @@ The are 2 template filters: 1. **UI**: You can switch between `Angular`, `MVC` and `Blazor` templates. 2. **Database provider:** You can switch between `EF Core` and `MongoDb` templates. -> **Note:** ABP Suite does not include React UI templates or generate React client-side code. React UI belongs to the modern template system and should be developed in the source-owned [React UI](../framework/ui/react/index.md) application. ABP license holders can use [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits to generate React pages more easily. +> **Note:** This template editor lists the `Angular`, `MVC` and `Blazor` templates. ABP Suite generates React CRUD pages for modern React UI solutions (`app/react`) from built-in templates, but those React templates are not editable through this template editor. These filters are automatically selected based on your ABP solution. The selected solution is shown on the top right of the page. In the current screenshot it is "Acme.BookStore". diff --git a/docs/en/suite/generating-crud-page.md b/docs/en/suite/generating-crud-page.md index 07f1e6ca91..8858f9d808 100644 --- a/docs/en/suite/generating-crud-page.md +++ b/docs/en/suite/generating-crud-page.md @@ -110,7 +110,7 @@ To create a new entity, make sure the *-New entity-* is selected in the **Entity * **Create user interface:** Creates pages, modals, components, `JavaScript`, `CSS` files and adds the new page to the main menu. If you don't have a requirement to manage the entity via user interface, you can uncheck this option. - > **Note:** This option does not generate React UI pages. ABP Suite's UI generation targets Suite-supported UI stacks such as MVC, Blazor and Angular. For React-based solutions, build the UI in the source-owned [React UI](../framework/ui/react/index.md) application. ABP license holders can use [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits to generate React pages more easily. + > **Note:** For modern React UI solutions (`app/react`), this option also generates and registers React CRUD pages, alongside the MVC, Blazor and Angular UI stacks. React generation is template-based and does not use AI, and it does not cover many-to-many navigation collections yet. > **Blazor UI library:** For Blazor solutions, the generated UI matches the underlying Blazor component library. Solutions that reference `Volo.Abp.MudBlazorUI` produce pages built around `MudDataGrid`, `MudDialog`, `MudForm` and the rest of the [MudBlazor](https://mudblazor.com) controls; Blazorise-based solutions keep emitting the original `DataGrid` / `Modal` / `Validations` markup. ABP Suite picks the variant automatically by scanning the Blazor project `.csproj` and shows the resolved value in the solution info tooltip — no extra switch is required. See the [Blazor UI library](index.md#blazor-ui-library) section for details. diff --git a/docs/en/suite/index.md b/docs/en/suite/index.md index dfeaca8cb4..81c731841f 100644 --- a/docs/en/suite/index.md +++ b/docs/en/suite/index.md @@ -21,7 +21,7 @@ ABP Suite is a complementary tool to the ABP Platform. ABP Suite allows you to build web pages in a matter of minutes. -> **Important:** ABP Suite does not generate React UI pages or client-side React code. Its CRUD UI generation is designed for the established Suite-supported UI stacks, such as MVC, Blazor and Angular. The new [React UI](../framework/ui/react/index.md) belongs to ABP's modern template system and is designed for an AI-first, AI-oriented development flow with a modern frontend stack such as React, TypeScript, Vite, TanStack Router, TanStack Query, shadcn/ui, Zod and React Hook Form. In React UI solutions, ABP Suite can still be useful for the backend and application layers where applicable, but the React UI side is expected to be developed in the source-owned React application. ABP license holders can use [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits to generate React pages and evolve the UI more easily. +> **React UI:** ABP Suite also generates React CRUD pages for modern React UI solutions (`app/react`), in addition to the MVC, Blazor and Angular UI stacks. The generator is template-based and does not use AI. It covers the standard CRUD scenarios — navigation-property lookups, master-detail child grids, file upload, enums, filtering, Excel export and bulk delete — and registers the page in the React app's route configuration and menu. Many-to-many navigation collections are not generated for React yet; for those, ABP license holders can use the [ABP Studio AI Agent](https://abp.io/studio/ai-agent) with predefined AI credits. It's a .NET Core Global tool that can be installed from the command line. If you are using [ABP Studio](../studio/index.md), you don't even need to install it because it should already be installed, when you first installed the [ABP Studio](../studio/index.md).