mirror of https://github.com/abpframework/abp.git
Ilkay Ilknur
6 years ago
337 changed files with 9348 additions and 4457 deletions
@ -0,0 +1,110 @@ |
|||||
|
## Using DevExpress Blazor UI Components With the ABP Framework |
||||
|
|
||||
|
Hi, in this step by step article, I will show you how to integrate [DevExpress](https://demos.devexpress.com/blazor/) blazor UI components into ABP Framework-based applications. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
*(A screenshot from the example application developed in this article)* |
||||
|
|
||||
|
## Create the Project |
||||
|
|
||||
|
> ABP Framework offers startup templates to get into business faster. |
||||
|
|
||||
|
In this article, I will create a new startup template with EF Core as a database provider and Blazor for UI framework. But if you already have a project with Blazor UI, you don't need to create a new startup template, you can directly implement the following steps to your existing project. |
||||
|
|
||||
|
> If you already have a project with the Blazor UI, you can skip this section. |
||||
|
|
||||
|
* Before starting to development, we will create a solution named `DevExpressSample` (or whatever you want). We will create a new startup template with EF Core as a database provider and Blazor for UI framework by using [ABP CLI](https://docs.abp.io/en/abp/latest/CLI): |
||||
|
|
||||
|
````bash |
||||
|
abp new DevExpressSample -u blazor |
||||
|
```` |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* Our project boilerplate will be ready after the download is finished. Then, we can open the solution in the Visual Studio (or any other IDE) and run the `DevExpressSample.DbMigrator` to create the database and seed initial data (which creates the admin user, admin role, permissions etc.) |
||||
|
|
||||
|
* After database and initial data created, |
||||
|
* Run the `DevExpressSample.HttpApi.Host` to see our server side working and |
||||
|
* Run the `DevExpressSample.Blazor` to see our UI working properly. |
||||
|
|
||||
|
> _Default login credentials for admin: username is **admin** and password is **1q2w3E\***_ |
||||
|
|
||||
|
## Install DevExpress |
||||
|
|
||||
|
You can follow [this documentation](https://docs.devexpress.com/Blazor/401986/getting-started/install-components-and-create-an-application/without-devexpress-installer/microsoft-templates) to install DevExpress packages into your computer. |
||||
|
|
||||
|
> Don't forget to add _"DevExpress NuGet Feed"_ to your **Nuget Package Sources**. |
||||
|
|
||||
|
### Adding DevExpress NuGet Packages |
||||
|
|
||||
|
Add the `DevExpress.Blazor` NuGet package to the `DevExpressSample.Blazor` project. |
||||
|
|
||||
|
``` |
||||
|
Install-Package DevExpress.Blazor |
||||
|
``` |
||||
|
|
||||
|
### Register DevExpress Resources |
||||
|
|
||||
|
1. Add the following line to the HEAD section of the `wwwroot/index.html` file within the `DevExpressSample.Blazor` project: |
||||
|
|
||||
|
```Razor |
||||
|
<head> |
||||
|
<!--...--> |
||||
|
<link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" /> |
||||
|
</head> |
||||
|
``` |
||||
|
|
||||
|
2. In the `DevExpressSampleBlazorModule` class, call the `AddDevExpressBlazor()` method from your project's `ConfigureServices()` method: |
||||
|
|
||||
|
```csharp |
||||
|
public override void ConfigureServices(ServiceConfigurationContext context) |
||||
|
{ |
||||
|
var environment = context.Services.GetSingletonInstance<IWebAssemblyHostEnvironment>(); |
||||
|
var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>(); |
||||
|
// ... |
||||
|
builder.Services.AddDevExpressBlazor(); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
3. Register the **DevExpressSample.Blazor** namespace in the `_Imports.razor` file: |
||||
|
|
||||
|
```Razor |
||||
|
@using DevExpress.Blazor |
||||
|
``` |
||||
|
|
||||
|
### Result |
||||
|
|
||||
|
The installation step was done. You can use any DevExpress Blazor UI component in your application: |
||||
|
|
||||
|
Example: A Scheduler: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
This example has been created by following [this documentation](https://demos.devexpress.com/blazor/SchedulerViewTypes). |
||||
|
|
||||
|
## The Sample Application |
||||
|
|
||||
|
We have created a sample application with [Data Grid](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1) example. |
||||
|
|
||||
|
### The Source Code |
||||
|
|
||||
|
You can download the source code from [here](https://github.com/abpframework/abp-samples/tree/master/DevExpress-Blazor). |
||||
|
|
||||
|
The related files for this example are marked in the following screenshots. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
 |
||||
|
|
||||
|
 |
||||
|
|
||||
|
### Additional Notes |
||||
|
|
||||
|
#### Data Storage |
||||
|
|
||||
|
I've used an in-memory list to store data for this example, instead of a real database. Because it is not related to DevExpress usage. There is a `SampleDataService.cs` file in `Data` folder at `DevExpressSample.Application.Contracts` project. All the data is stored here. |
||||
|
|
||||
|
## Conclusion |
||||
|
|
||||
|
In this article, I've explained how to use [DevExpress](https://www.devexpress.com/blazor/) components in your application. ABP Framework is designed so that it can work with any UI library/framework. |
||||
|
After Width: | Height: | Size: 155 KiB |
|
After Width: | Height: | Size: 480 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 880 KiB |
@ -0,0 +1,534 @@ |
|||||
|
# How to Integrate the Telerik Blazor Components to the ABP Blazor UI? |
||||
|
|
||||
|
## Introduction |
||||
|
|
||||
|
Hi, in this step by step article, we will see how we can integrate the Telerik Blazor Components to our Blazor UI. |
||||
|
|
||||
|
## Creating the Solution |
||||
|
|
||||
|
> ABP Framework offers startup templates to get into business faster. |
||||
|
|
||||
|
In this article, I will create a new startup template with EF Core as a database provider and Blazor for UI framework. But if you already have a project with Blazor UI, you don't need to create a new startup template, you can directly implement the following steps to your existing project. |
||||
|
|
||||
|
> If you already have a project with the Blazor UI, you can skip this section. |
||||
|
|
||||
|
* Before starting to development, we will create a solution named `TelerikComponents` (or whatever you want). We will create a new startup template with EF Core as a database provider and Blazor for UI framework by using [ABP CLI](https://docs.abp.io/en/abp/latest/CLI): |
||||
|
|
||||
|
```bash |
||||
|
abp new TelerikComponents --ui blazor --database-provider ef |
||||
|
``` |
||||
|
|
||||
|
* Our project boilerplate will be ready after the download is finished. Then, we can open the solution in the Visual Studio (or any other IDE) and run the `TelerikComponents.DbMigrator` to create the database and seed initial data (which creates the admin user, admin role, permissions, etc.) |
||||
|
|
||||
|
* After the database and initial data created, |
||||
|
* Run the `TelerikComponents.HttpApi.Host` to see our server-side working and |
||||
|
* Run the `TelerikComponents.Blazor` to see our UI working. |
||||
|
|
||||
|
> _Default login credentials for admin: username is **admin** and password is **1q2w3E\***_ |
||||
|
|
||||
|
## Starting the Development |
||||
|
|
||||
|
### Pre-requisite |
||||
|
|
||||
|
* First thing we need to do is downloading the [Progress Control Panel](https://www.telerik.com/download-trial-file/v2/control-panel?_ga=2.212029332.1667119438.1607582144-1944255175.1605161949) to get Telerik Blazor Components on our development machine. |
||||
|
|
||||
|
* If you will use the Telerik Blazor Components for the first time or you don't have an active license you can click [here](https://www.telerik.com/login/v2/download-b?ReturnUrl=https%3a%2f%2fwww.telerik.com%2fdownload-trial-file%2fv2-b%2fui-for-blazor%3f_ga%3d2.212029332.1667119438.1607582144-1944255175.1605161949#register) to download free trial. |
||||
|
|
||||
|
> You can find the more installation details from [here](https://docs.telerik.com/blazor-ui/getting-started/client-blazor?_ga=2.55603115.1667119438.1607582144-1944255175.1605161949&_gac=1.261851647.1607669357.CjwKCAiAq8f-BRBtEiwAGr3DgUDhBT25rs7hU0EQ8K-AfeUVxs3hSoIuIAuBOZ17CNPI4ZEArORPExoCyd4QAvD_BwE#step-0---download-the-components). |
||||
|
|
||||
|
>**Notes:** To download Telerik Blazor packages via NuGet, we need to setup Telerik NuGet package source. We can state it in the installer as below. In this way, we can download the required Telerik Blazor packages via NuGet. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
### Step 1 (Configurations) |
||||
|
|
||||
|
* We need to install the `Telerik.UI.for.Blazor` Nuget package to our Blazor project (`*.Blazor`). We need to choose package source to **telerik.com** for Visual Studio to see this package. |
||||
|
|
||||
|
* If you use trial version of Telerik, you can download **Telerik.UI.for.Blazor.Trial** package via NuGet. |
||||
|
|
||||
|
* After the installation finished, we need to open **index.html** (it's under *wwwroot* folder) to add css and js files in our application. |
||||
|
|
||||
|
* Add the following lines just before the closing head tag (**/head**). |
||||
|
|
||||
|
```html |
||||
|
... |
||||
|
<link rel="stylesheet" href="https:unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" /> |
||||
|
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script> |
||||
|
<!-- For Trial licenses use |
||||
|
<script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script> |
||||
|
--> |
||||
|
</head> |
||||
|
``` |
||||
|
|
||||
|
* After that, we need to add the Telerik Blazor Components to our application's service collection. So just open the `TelerikComponentsBlazorModule` and update the `ConfigureServices` method with the following content. |
||||
|
|
||||
|
```csharp |
||||
|
public override void ConfigureServices(ServiceConfigurationContext context) |
||||
|
{ |
||||
|
var environment = context.Services.GetSingletonInstance<IWebAssemblyHostEnvironment>(); |
||||
|
var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>(); |
||||
|
|
||||
|
ConfigureAuthentication(builder); |
||||
|
ConfigureHttpClient(context, environment); |
||||
|
ConfigureBlazorise(context); |
||||
|
ConfigureRouter(context); |
||||
|
ConfigureUI(builder); |
||||
|
ConfigureMenu(context); |
||||
|
ConfigureAutoMapper(context); |
||||
|
|
||||
|
//add this line to be able to use the components |
||||
|
builder.Services.AddTelerikBlazor(); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
* After the service added we will continue by opening **_Imports.razor** file and add the global using statements as below. This will bring our Telerik components into scope throughout the application. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* After all of these steps, the Telerik UI Components are ready to be used anywhere in our application. We can use the Telerik Blazor Components by wrapping our components or pages between `<TelerikRootComponent>` and `</TelerikRootComponent>` tags. |
||||
|
|
||||
|
### Step 2 - Checking Configurations |
||||
|
|
||||
|
* We should check, have we done the right configurations or not. For that, we can open the **Index.razor** file and we can update the component with the following content. |
||||
|
|
||||
|
```razor |
||||
|
@page "/" |
||||
|
@using Volo.Abp.MultiTenancy |
||||
|
@inherits TelerikComponentsComponentBase |
||||
|
@inject ICurrentTenant CurrentTenant |
||||
|
@inject AuthenticationStateProvider AuthenticationStateProvider |
||||
|
@using System.Timers |
||||
|
|
||||
|
@implements IDisposable |
||||
|
|
||||
|
<TelerikRootComponent> |
||||
|
<div class="progress-bar-wrapper"> |
||||
|
<h5 class="progress-info-title">Telerik Progress Bar Component</h5> |
||||
|
<TelerikProgressBar Value="@ProgressValue" Max="100"></TelerikProgressBar> |
||||
|
</div> |
||||
|
</TelerikRootComponent> |
||||
|
|
||||
|
@code { |
||||
|
private const int TimerInterval = 1000; |
||||
|
private const int TotalTime = 10 * TimerInterval; |
||||
|
private double ProgressValue = 0; |
||||
|
private int ProgressStep = 100 / (TotalTime / TimerInterval); |
||||
|
private Timer Timer { get; set; } = new Timer(); |
||||
|
|
||||
|
private void Dispose() |
||||
|
{ |
||||
|
StopProgress(); |
||||
|
Timer?.Close(); |
||||
|
} |
||||
|
|
||||
|
protected override void OnAfterRender(bool firstRender) |
||||
|
{ |
||||
|
if (Timer.Enabled == false) |
||||
|
{ |
||||
|
Timer.Interval = TimerInterval; |
||||
|
Timer.Elapsed -= OnTimerElapsed; |
||||
|
Timer.Elapsed += OnTimerElapsed; |
||||
|
Timer.AutoReset = true; |
||||
|
Timer.Start(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private void OnTimerElapsed(Object source, ElapsedEventArgs e) |
||||
|
{ |
||||
|
if (ProgressValue < 100) |
||||
|
{ |
||||
|
UpdateProgress(); |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
StopProgress(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private void UpdateProgress() |
||||
|
{ |
||||
|
ProgressValue += ProgressStep; |
||||
|
|
||||
|
InvokeAsync(StateHasChanged); |
||||
|
} |
||||
|
|
||||
|
private void StopProgress() |
||||
|
{ |
||||
|
Timer?.Stop(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
<style> |
||||
|
.progress-info-title { |
||||
|
font-weight: bold; |
||||
|
font-size: 1.4em; |
||||
|
} |
||||
|
</style> |
||||
|
``` |
||||
|
|
||||
|
* In here, we've just added the `TelerikProgressBar` component to check the integration configured properly. |
||||
|
|
||||
|
* When we run `*.HttpApi.Host` and `*.Blazor` projects, we should see that the `TelerikProgressBar` component works and has similar view as the below gif. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* If you haven't seen this component like above, you should check the above configurations and be assure every step done as stated. |
||||
|
|
||||
|
### Step 3 - Using The Telerik Blazor Components (Sample Application) |
||||
|
|
||||
|
* Let's create a sample application for use other Telerik Blazor Components (like DataGrid). |
||||
|
|
||||
|
* We will use [jsonplaceholder](https://jsonplaceholder.typicode.com/) as **mock data** to the listing, adding, updating and deleting posts. |
||||
|
|
||||
|
* Firstly, we can create a folder named `Posts` and inside this folder, we can create the classes which are highlighted in the following screenshot. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* After classes created we can fill the classes with the following contents. |
||||
|
|
||||
|
**Post.cs** |
||||
|
```csharp |
||||
|
using System; |
||||
|
|
||||
|
namespace TelerikComponents.Posts |
||||
|
{ |
||||
|
[Serializable] |
||||
|
public class Post |
||||
|
{ |
||||
|
public int Id { get; set; } |
||||
|
|
||||
|
public string Title { get; set; } |
||||
|
|
||||
|
public string Body { get; set; } |
||||
|
|
||||
|
public int UserId { get; set; } |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**Comment.cs** |
||||
|
```csharp |
||||
|
using System; |
||||
|
|
||||
|
namespace TelerikComponents.Posts |
||||
|
{ |
||||
|
[Serializable] |
||||
|
public class Comment |
||||
|
{ |
||||
|
public int PostId { get; set; } |
||||
|
|
||||
|
public int Id { get; set; } |
||||
|
|
||||
|
public string Name { get; set; } |
||||
|
|
||||
|
public string Email { get; set; } |
||||
|
|
||||
|
public string Body { get; set; } |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
**IPostAppService.cs** |
||||
|
```csharp |
||||
|
using System.Collections.Generic; |
||||
|
using System.Threading.Tasks; |
||||
|
using Volo.Abp.Application.Services; |
||||
|
|
||||
|
namespace TelerikComponents.Posts |
||||
|
{ |
||||
|
public interface IPostAppService : IApplicationService |
||||
|
{ |
||||
|
Task<List<Post>> GetPostsAsync(); |
||||
|
|
||||
|
Task<Post> AddPostAsync(Post post); |
||||
|
|
||||
|
Task<Post> UpdatePostAsync(int postId, Post post); |
||||
|
|
||||
|
Task DeletePostAsync(int postId); |
||||
|
|
||||
|
Task<Comment> GetFirstCommentByPostIdAsync(int postId); |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
* In here, we basically created two class (which are **Post** and **Comment**). These classes are used to hold data returned as JSON. |
||||
|
|
||||
|
* After that, we need to implement `IPostAppService`. For achieve this, we can create a folder named `Posts` in **\*.Application** layer and inside this folder we can create a class named `PostAppService` with the following content. |
||||
|
|
||||
|
**PostAppService.cs** |
||||
|
```csharp |
||||
|
using System.Collections.Generic; |
||||
|
using System.Net.Http; |
||||
|
using System.Text; |
||||
|
using System.Text.Json; |
||||
|
using System.Threading.Tasks; |
||||
|
using Volo.Abp.Application.Services; |
||||
|
|
||||
|
namespace TelerikComponents.Posts |
||||
|
{ |
||||
|
public class PostAppService : ApplicationService, IPostAppService |
||||
|
{ |
||||
|
private JsonSerializerOptions _options = new JsonSerializerOptions |
||||
|
{ |
||||
|
IncludeFields = true, |
||||
|
PropertyNameCaseInsensitive = true |
||||
|
}; |
||||
|
|
||||
|
public async Task<List<Post>> GetPostsAsync() |
||||
|
{ |
||||
|
var url = "https://jsonplaceholder.typicode.com/posts"; |
||||
|
List<Post> _posts = new List<Post>(); |
||||
|
|
||||
|
using (var client = new HttpClient()) |
||||
|
{ |
||||
|
var result = await client.GetAsync(url); |
||||
|
|
||||
|
if (result.IsSuccessStatusCode) |
||||
|
{ |
||||
|
var content = await result.Content.ReadAsStringAsync(); |
||||
|
var deserializedPosts = JsonSerializer.Deserialize<List<Post>>(content, _options); |
||||
|
|
||||
|
_posts = deserializedPosts; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return _posts; |
||||
|
} |
||||
|
|
||||
|
public async Task<Post> AddPostAsync(Post post) |
||||
|
{ |
||||
|
var url = "https://jsonplaceholder.typicode.com/posts"; |
||||
|
Post addedPost = null; |
||||
|
|
||||
|
using (var client = new HttpClient()) |
||||
|
{ |
||||
|
var serializePost = JsonSerializer.Serialize(post); |
||||
|
var content = new StringContent(serializePost, Encoding.UTF8, "application/json"); |
||||
|
var result = await client.PostAsync(url, content); |
||||
|
|
||||
|
if (result.IsSuccessStatusCode) |
||||
|
{ |
||||
|
var response = await result.Content.ReadAsStringAsync(); |
||||
|
addedPost = JsonSerializer.Deserialize<Post>(response); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return addedPost; |
||||
|
} |
||||
|
|
||||
|
public async Task<Post> UpdatePostAsync(int postId, Post post) |
||||
|
{ |
||||
|
var url = $"https://jsonplaceholder.typicode.com/posts/{postId}"; |
||||
|
Post updatedPost = null; |
||||
|
|
||||
|
using (var client = new HttpClient()) |
||||
|
{ |
||||
|
var serializePost = JsonSerializer.Serialize(post); |
||||
|
var content = new StringContent(serializePost, Encoding.UTF8, "application/json"); |
||||
|
var result = await client.PutAsync(url, content); |
||||
|
|
||||
|
if (result.IsSuccessStatusCode) |
||||
|
{ |
||||
|
var response = await result.Content.ReadAsStringAsync(); |
||||
|
updatedPost = JsonSerializer.Deserialize<Post>(response); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return updatedPost; |
||||
|
} |
||||
|
|
||||
|
public async Task DeletePostAsync(int postId) |
||||
|
{ |
||||
|
var url = $"https://jsonplaceholder.typicode.com/posts/{postId}"; |
||||
|
|
||||
|
using (var client = new HttpClient()) |
||||
|
{ |
||||
|
await client.DeleteAsync(url); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public async Task<Comment> GetFirstCommentByPostIdAsync(int postId) |
||||
|
{ |
||||
|
var url = $"https://jsonplaceholder.typicode.com/posts/{postId}/comments"; |
||||
|
|
||||
|
List<Comment> _comments = new List<Comment>(); |
||||
|
|
||||
|
using (var client = new HttpClient()) |
||||
|
{ |
||||
|
var result = await client.GetAsync(url); |
||||
|
|
||||
|
if (result.IsSuccessStatusCode) |
||||
|
{ |
||||
|
var content = await result.Content.ReadAsStringAsync(); |
||||
|
var deserializedPosts = JsonSerializer.Deserialize<List<Comment>>(content, _options); |
||||
|
|
||||
|
_comments = deserializedPosts; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return _comments[0]; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
* In here, we've implemented `IPostAppService` methods by using [jsonplaceholder](https://jsonplaceholder.typicode.co) API. These endpoints provide us basic crud functionallity. |
||||
|
|
||||
|
* After the implemenation, we can start to create the user interface. |
||||
|
|
||||
|
#### Blazor UI |
||||
|
|
||||
|
* We can create **/Posts** page for listing, updating, deleting and creating our posts. So, create a razor page named `Posts.razor` under **Pages** folder in `*.Blazor` project. |
||||
|
|
||||
|
**Posts.razor** |
||||
|
```razor |
||||
|
@page "/Posts" |
||||
|
@using TelerikComponents.Posts |
||||
|
@using IconName = Telerik.Blazor.IconName |
||||
|
@inject IPostAppService PostAppService |
||||
|
|
||||
|
<h3>Posts</h3> |
||||
|
|
||||
|
<TelerikRootComponent> |
||||
|
<TelerikGrid Data="@GridData" |
||||
|
OnUpdate="@UpdateHandler" |
||||
|
OnDelete="@DeleteHandler" |
||||
|
OnCreate="@CreateHandler" |
||||
|
@ref="@Grid" |
||||
|
Pageable="true" |
||||
|
Groupable="true" |
||||
|
Sortable="true" |
||||
|
FilterMode="GridFilterMode.FilterMenu" |
||||
|
Resizable="true" |
||||
|
Reorderable="true" |
||||
|
EditMode="GridEditMode.Popup" |
||||
|
SelectionMode="GridSelectionMode.Single" |
||||
|
PageSize="5" |
||||
|
Navigable="true"> |
||||
|
<GridColumns> |
||||
|
<GridColumn Field="@nameof(Post.Title)"/> |
||||
|
<GridColumn Field="@nameof(Post.Body)"/> |
||||
|
<GridCommandColumn Width="190px"> |
||||
|
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton> |
||||
|
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton> |
||||
|
<GridCommandButton Command="Delete" Icon="delete" Primary="true">Delete</GridCommandButton> |
||||
|
<GridCommandButton Icon="@IconName.Window" OnClick="(e) => PostDetailAsync(e)">Display Comment</GridCommandButton> |
||||
|
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton> |
||||
|
</GridCommandColumn> |
||||
|
</GridColumns> |
||||
|
<GridToolBar> |
||||
|
<GridCommandButton Command="Add" Icon="add">Add Post</GridCommandButton> |
||||
|
</GridToolBar> |
||||
|
</TelerikGrid> |
||||
|
|
||||
|
@* Modal *@ |
||||
|
<TelerikWindow Class="demo-window" Width="500px" Height="250px" Centered="true" @bind-Visible=@ModalVisible Modal="true"> |
||||
|
<WindowTitle> |
||||
|
<strong>Comment</strong> |
||||
|
</WindowTitle> |
||||
|
<WindowActions> |
||||
|
<WindowAction Name="Close" /> |
||||
|
</WindowActions> |
||||
|
<WindowContent> |
||||
|
<p><b>Email:</b> @Comment.Email</p> |
||||
|
<p> |
||||
|
<b>Message:</b> @Comment.Body |
||||
|
</p> |
||||
|
</WindowContent> |
||||
|
</TelerikWindow> |
||||
|
</TelerikRootComponent> |
||||
|
``` |
||||
|
|
||||
|
**Post.razor.cs** |
||||
|
```csharp |
||||
|
using System.Collections.Generic; |
||||
|
using System.Linq; |
||||
|
using System.Threading.Tasks; |
||||
|
using Telerik.Blazor.Components; |
||||
|
using TelerikComponents.Posts; |
||||
|
|
||||
|
namespace TelerikComponents.Blazor.Pages |
||||
|
{ |
||||
|
public partial class Posts |
||||
|
{ |
||||
|
private List<Post> GridData { get; set; } |
||||
|
private TelerikGrid<Post> Grid { get; set; } |
||||
|
private bool ModalVisible { get; set; } = false; |
||||
|
private Comment Comment { get; set; } |
||||
|
|
||||
|
public Posts() |
||||
|
{ |
||||
|
Comment = new Comment(); |
||||
|
} |
||||
|
|
||||
|
protected override async Task OnInitializedAsync() |
||||
|
{ |
||||
|
await LoadDataAsync(); |
||||
|
} |
||||
|
|
||||
|
private async Task LoadDataAsync() |
||||
|
{ |
||||
|
GridData = await PostAppService.GetPostsAsync(); |
||||
|
} |
||||
|
|
||||
|
private async Task UpdateHandler(GridCommandEventArgs args) |
||||
|
{ |
||||
|
var post = (Post) args.Item; |
||||
|
|
||||
|
await PostAppService.UpdatePostAsync(post.Id, post); |
||||
|
|
||||
|
var matchingPost = GridData.FirstOrDefault(x => x.Id == post.Id); |
||||
|
|
||||
|
if (matchingPost != null) |
||||
|
{ |
||||
|
matchingPost.Body = post.Body; |
||||
|
matchingPost.Title = post.Title; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private async Task DeleteHandler(GridCommandEventArgs args) |
||||
|
{ |
||||
|
var post = (Post) args.Item; |
||||
|
|
||||
|
GridData.Remove(post); |
||||
|
} |
||||
|
|
||||
|
private async Task CreateHandler(GridCommandEventArgs args) |
||||
|
{ |
||||
|
var post = (Post) args.Item; |
||||
|
|
||||
|
var addedPost = await PostAppService.AddPostAsync(post); |
||||
|
|
||||
|
GridData.Insert(0, addedPost); |
||||
|
} |
||||
|
|
||||
|
private async Task PostDetailAsync(GridCommandEventArgs args) |
||||
|
{ |
||||
|
var post = (Post) args.Item; |
||||
|
|
||||
|
Comment = await PostAppService.GetFirstCommentByPostIdAsync(post.Id); |
||||
|
|
||||
|
ModalVisible = true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
* In here, we've used `TelerikGrid` component. |
||||
|
|
||||
|
* The `Telerik Grid` is a powerful component, which allows you to visualize and edit data via its table representation. It provides a variety of options about how to present and perform operations over the underlying data, such as paging, sorting, filtering and editing. |
||||
|
|
||||
|
* The Blazor UI Grid allows flexible customization of its items exposing rows, columns and edit templates for this purpose. |
||||
|
|
||||
|
### Final Result |
||||
|
|
||||
|
* After all of these steps, we can finally run our application. |
||||
|
* Run `*.HttpApi.Host` project for use the required endpoints, |
||||
|
* Run `*.Blazor` project for see the Blazor UI. |
||||
|
|
||||
|
* When we navigate to `Posts` route, we should see the following screenshot in this page. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
## Conclusion |
||||
|
|
||||
|
In this article, I've tried to explain how we can integrate [Telerik Blazor Component](https://www.telerik.com/blazor-ui) to our Blazor UI. ABP Framework designed as modular, so that it can work with any UI library/framework. |
||||
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 187 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
File diff suppressed because it is too large
|
After Width: | Height: | Size: 4.1 MiB |
|
After Width: | Height: | Size: 4.7 MiB |
|
After Width: | Height: | Size: 3.5 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 870 KiB |
@ -1,3 +1,393 @@ |
|||||
# Module Entity Extensions |
# Module Entity Extensions |
||||
|
|
||||
See https://docs.abp.io/en/commercial/latest/guides/module-entity-extensions (it will be moved here soon). |
## Introduction |
||||
|
|
||||
|
Module entity extension system is a **high level** extension system that allows you to **define new properties** for existing entities of the depended modules. It automatically **adds properties to the entity, database, HTTP API and the user interface** in a single point. |
||||
|
|
||||
|
> The module must be developed the *Module Entity Extensions* system in mind. All the **official modules** supports this system wherever possible. |
||||
|
|
||||
|
## Quick Example |
||||
|
|
||||
|
Open the *YourProjectNameModuleExtensionConfigurator* class inside the `Domain.Shared` project of your solution and change the `ConfigureExtraProperties`method as shown below to add a `SocialSecurityNumber` property to the `IdentityUser` entity of the [Identity Module](Modules/Identity.md). |
||||
|
|
||||
|
````csharp |
||||
|
public static void ConfigureExtraProperties() |
||||
|
{ |
||||
|
OneTimeRunner.Run(() => |
||||
|
{ |
||||
|
ObjectExtensionManager.Instance.Modules() |
||||
|
.ConfigureIdentity(identity => |
||||
|
{ |
||||
|
identity.ConfigureUser(user => |
||||
|
{ |
||||
|
user.AddOrUpdateProperty<string>( //property type: string |
||||
|
"SocialSecurityNumber", //property name |
||||
|
property => |
||||
|
{ |
||||
|
//validation rules |
||||
|
property.Attributes.Add(new RequiredAttribute()); |
||||
|
property.Attributes.Add( |
||||
|
new StringLengthAttribute(64) { |
||||
|
MinimumLength = 4 |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
//...other configurations for this property |
||||
|
} |
||||
|
); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
>This method is called inside the `YourProjectNameDomainSharedModule` at the beginning of the application. `OneTimeRunner` is a utility class that guarantees to execute this code only one time per application, since multiple calls are unnecessary. |
||||
|
|
||||
|
* `ObjectExtensionManager.Instance.Modules()` is the starting point to configure a module. `ConfigureIdentity(...)` method is used to configure the entities of the Identity Module. |
||||
|
* `identity.ConfigureUser(...)` is used to configure the user entity of the identity module. Not all entities are designed to be extensible (since it is not needed). Use the intellisense to discover the extensible modules and entities. |
||||
|
* `user.AddOrUpdateProperty<string>(...)` is used to add a new property to the user entity with the `string` type (`AddOrUpdateProperty` method can be called multiple times for the same property of the same entity. Each call can configure the options of the same property, but only one property is added to the entity with the same property name). You can call this method with different property names to add more properties. |
||||
|
* `SocialSecurityNumber` is the name of the new property. |
||||
|
* `AddOrUpdateProperty` gets a second argument (the `property =>` lambda expression) to configure additional options for the new property. |
||||
|
* We can add data annotation attributes like shown here, just like adding a data annotation attribute to a class property. |
||||
|
|
||||
|
#### Create & Update Forms |
||||
|
|
||||
|
Once you define a property, it appears in the create and update forms of the related entity: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
`SocialSecurityNumber` field comes into the form. Next sections will explain the localization and the validation for this new property. |
||||
|
|
||||
|
### Data Table |
||||
|
|
||||
|
New properties also appear in the data table of the related page: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
`SocialSecurityNumber` column comes into the table. Next sections will explain the option to hide this column from the data table. |
||||
|
|
||||
|
## Property Options |
||||
|
|
||||
|
There are some options that you can configure while defining a new property. |
||||
|
|
||||
|
### Display Name |
||||
|
|
||||
|
You probably want to set a different (human readable) display name for the property that is shown on the user interface. |
||||
|
|
||||
|
#### Don't Want to Localize? |
||||
|
|
||||
|
If your application is not localized, you can directly set the `DisplayName` for the property to a `FixedLocalizableString` object. Example: |
||||
|
|
||||
|
````csharp |
||||
|
property => |
||||
|
{ |
||||
|
property.DisplayName = new FixedLocalizableString("Social security no"); |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
#### Localizing the Display Name |
||||
|
|
||||
|
If you want to localize the display name, you have two options. |
||||
|
|
||||
|
##### Localize by Convention |
||||
|
|
||||
|
Instead of setting the `property.DisplayName`, you can directly open your localization file (like `en.json`) and add the following entry to the `texts` section: |
||||
|
|
||||
|
````json |
||||
|
"SocialSecurityNumber": "Social security no" |
||||
|
```` |
||||
|
|
||||
|
Define the same `SocialSecurityNumber` key (the property name you've defined before) in your localization file for each language you support. That's all! |
||||
|
|
||||
|
In some cases, the localization key may conflict with other keys in your localization files. In such cases, you can use the `DisplayName:` prefix for display names in the localization file (`DisplayName:SocialSecurityNumber` as the localization key for this example). Extension system looks for prefixed version first, then fallbacks to the non prefixed name (it then fallbacks to the property name if you haven't localized it). |
||||
|
|
||||
|
> This approach is recommended since it is simple and suitable for most scenarios. |
||||
|
|
||||
|
##### Localize using the `DisplayName` Property |
||||
|
|
||||
|
If you want to specify the localization key or the localization resource, you can still set the `DisplayName` option: |
||||
|
|
||||
|
````csharp |
||||
|
property => |
||||
|
{ |
||||
|
property.DisplayName = |
||||
|
LocalizableString.Create<MyProjectNameResource>( |
||||
|
"UserSocialSecurityNumberDisplayName" |
||||
|
); |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
* `MyProjectNameResource` is the localization resource and `UserSocialSecurityNumberDisplayName` is the localization key in the localization resource. |
||||
|
|
||||
|
> See [the localization document](Localization.md) if you want to learn more about the localization system. |
||||
|
|
||||
|
#### Default Value |
||||
|
|
||||
|
A default value is automatically set for the new property, which is the natural default value for the property type, like `null` for `string`, `false` for `bool` or `0` for `int`. |
||||
|
|
||||
|
There are two ways to override the default value: |
||||
|
|
||||
|
##### DefaultValue Option |
||||
|
|
||||
|
`DefaultValue` option can be set to any value: |
||||
|
|
||||
|
````csharp |
||||
|
property => |
||||
|
{ |
||||
|
property.DefaultValue = 42; |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
##### DefaultValueFactory Options |
||||
|
|
||||
|
`DefaultValueFactory` can be set to a function that returns the default value: |
||||
|
|
||||
|
````csharp |
||||
|
property => |
||||
|
{ |
||||
|
property.DefaultValueFactory = () => DateTime.Now; |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
`options.DefaultValueFactory` has a higher priority than the `options.DefaultValue` . |
||||
|
|
||||
|
> Tip: Use `DefaultValueFactory` option only if the default value may change over the time (like `DateTime.Now` in this example). If it is a constant value, then use the `DefaultValue` option. |
||||
|
|
||||
|
### Validation |
||||
|
|
||||
|
Entity extension system allows you to define validation for extension properties in a few ways. |
||||
|
|
||||
|
#### Data Annotation Attributes |
||||
|
|
||||
|
`Attributes` is a list of attributes associated to this property. The example code below adds two [data annotation validation attributes](https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation) to the property: |
||||
|
|
||||
|
````csharp |
||||
|
property => |
||||
|
{ |
||||
|
property.Attributes.Add(new RequiredAttribute()); |
||||
|
property.Attributes.Add(new StringLengthAttribute(64) {MinimumLength = 4}); |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
When you run the application, you see that the validation works out of the box: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
Since we've added the `RequiredAttribute`, it doesn't allow to left it blank. The validation system works; |
||||
|
|
||||
|
* On the user interface (with automatic localization). |
||||
|
* On the HTTP API. Even if you directly perform an HTTP request, you get validation errors with a proper HTTP status code. |
||||
|
* On the `SetProperty(...)` method on the entity (see [the document](Entities.md) if you wonder what is the `SetProperty()` method). |
||||
|
|
||||
|
So, it automatically makes a full stack validation. |
||||
|
|
||||
|
> See the [ASP.NET Core MVC Validation document](https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation) to learn more about the attribute based validation. |
||||
|
|
||||
|
##### Default Validation Attributes |
||||
|
|
||||
|
There are some attributes **automatically added** when you create certain type of properties; |
||||
|
|
||||
|
* `RequiredAttribute` is added for **non nullable** primitive property types (e.g. `int`, `bool`, `DateTime`...) and `enum` types. If you want to allow nulls, make the property nullable (e.g. `int?`). |
||||
|
* `EnumDataTypeAttribute` is added for **enum types**, to prevent to set invalid enum values. |
||||
|
|
||||
|
Use `property.Attributes.Clear();` if you don't want these attributes. |
||||
|
|
||||
|
#### Validation Actions |
||||
|
|
||||
|
Validation actions allows you to execute a custom code to perform the validation. The example below checks if the `SocialSecurityNumber` starts with `B` and adds a validation error if so: |
||||
|
|
||||
|
````csharp |
||||
|
property => |
||||
|
{ |
||||
|
property.Attributes.Add(new RequiredAttribute()); |
||||
|
property.Attributes.Add(new StringLengthAttribute(64) {MinimumLength = 4}); |
||||
|
|
||||
|
property.Validators.Add(context => |
||||
|
{ |
||||
|
if (((string) context.Value).StartsWith("B")) |
||||
|
{ |
||||
|
context.ValidationErrors.Add( |
||||
|
new ValidationResult( |
||||
|
"Social security number can not start with the letter 'B', sorry!", |
||||
|
new[] {"extraProperties.SocialSecurityNumber"} |
||||
|
) |
||||
|
); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
Using a `RegularExpressionAttribute` might be better in this case, but this is just an example. Anyway, if you enter a value starts with the letter `B` you get the following error **while saving the form**: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
##### The Context Object |
||||
|
|
||||
|
The `context` object has useful properties that can be used in your custom validation action. For example, you can use the `context.ServiceProvider` to resolve services from the [dependency injection system](Dependency-Injection.md). The example below gets the localizer and adds a localized error message: |
||||
|
|
||||
|
````csharp |
||||
|
if (((string) context.Value).StartsWith("B")) |
||||
|
{ |
||||
|
var localizer = context.ServiceProvider |
||||
|
.GetRequiredService<IStringLocalizer<MyProjectNameResource>>(); |
||||
|
|
||||
|
context.ValidationErrors.Add( |
||||
|
new ValidationResult( |
||||
|
localizer["SocialSecurityNumberCanNotStartWithB"], |
||||
|
new[] {"extraProperties.SocialSecurityNumber"} |
||||
|
) |
||||
|
); |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
>`context.ServiceProvider` is nullable! It can be `null` only if you use the `SetProperty(...)` method on the object. Because DI system is not available on this time. While this is a rare case, you should perform a fallback logic when `context.ServiceProvider` is `null`. For this example, you would add a non-localized error message. This is not a problem since setting an invalid value to a property generally is a programmer mistake and you mostly don't need to localization in this case. In any way, you would not be able to use localization even in a regular property setter. But, if you are serious about localization, you can throw a business exception (see the [exception handling document](https://docs.abp.io/en/abp/latest/Exception-Handling) to learn how to localize a business exception). |
||||
|
|
||||
|
### UI Visibility |
||||
|
|
||||
|
When you define a property, it appears on the data table, create and edit forms on the related UI page. However, you can control each one individually. Example: |
||||
|
|
||||
|
````csharp |
||||
|
property => |
||||
|
{ |
||||
|
property.UI.OnTable.IsVisible = false; |
||||
|
//...other configurations |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
Use `property.UI.OnCreateForm` and `property.UI.OnEditForm` to control forms too. If a property is required, but not added to the create form, you definitely get a validation exception, so use this option carefully. But a required property may not be in the edit form if that's your requirement. |
||||
|
|
||||
|
### HTTP API Availability |
||||
|
|
||||
|
Even if you disable a property on UI, it can be still available through the HTTP API. By default, a property is available on all APIs. |
||||
|
|
||||
|
Use the `property.Api` options to make a property unavailable in some API endpoints. |
||||
|
|
||||
|
````csharp |
||||
|
property => |
||||
|
{ |
||||
|
property.Api.OnUpdate.IsAvailable = false; |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
In this example, Update HTTP API will not allow to set a new value to this property. In this case, you also want to disable this property on the edit form: |
||||
|
|
||||
|
````csharp |
||||
|
property => |
||||
|
{ |
||||
|
property.Api.OnUpdate.IsAvailable = false; |
||||
|
property.UI.OnEditForm.IsVisible = false; |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
In addition to the `property.Api.OnUpdate`, you can set `property.Api.OnCreate` and `property.Api.OnGet` for a fine control the API endpoint. |
||||
|
|
||||
|
## Special Types |
||||
|
|
||||
|
### Enum |
||||
|
|
||||
|
Module extension system naturally supports the `enum` types. |
||||
|
|
||||
|
An example enum type: |
||||
|
|
||||
|
````csharp |
||||
|
public enum UserType |
||||
|
{ |
||||
|
Regular, |
||||
|
Moderator, |
||||
|
SuperUser |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
You can add enum properties just like others: |
||||
|
|
||||
|
````csharp |
||||
|
user.AddOrUpdateProperty<UserType>("Type"); |
||||
|
```` |
||||
|
|
||||
|
An enum properties is shown as combobox (select) in the create/edit forms: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
#### Localization |
||||
|
|
||||
|
Enum member name is shown on the table and forms by default. If you want to localize it, just create a new entry on your [localization](https://docs.abp.io/en/abp/latest/Localization) file: |
||||
|
|
||||
|
````json |
||||
|
"UserType.SuperUser": "Super user" |
||||
|
```` |
||||
|
|
||||
|
One of the following names can be used as the localization key: |
||||
|
|
||||
|
* `Enum:UserType.SuperUser` |
||||
|
* `UserType.SuperUser` |
||||
|
* `SuperUser` |
||||
|
|
||||
|
Localization system searches for the key with the given order. Localized text are used on the table and the create/edit forms. |
||||
|
|
||||
|
## Database Mapping |
||||
|
|
||||
|
For relational databases, all extension property values are stored in a single field in the table: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
`ExtraProperties` field stores the properties as a JSON object. While that's fine for some scenarios, you may want to create a dedicated field for your new property. Fortunately, it is very easy to configure. |
||||
|
|
||||
|
If you are using the Entity Framework Core database provider, you can configure the database mapping as shown below: |
||||
|
|
||||
|
````csharp |
||||
|
ObjectExtensionManager.Instance |
||||
|
.MapEfCoreProperty<IdentityUser, string>( |
||||
|
"SocialSecurityNumber", |
||||
|
(entityBuilder, propertyBuilder) => |
||||
|
{ |
||||
|
propertyBuilder.HasMaxLength(64); |
||||
|
} |
||||
|
); |
||||
|
```` |
||||
|
|
||||
|
Write this inside the `YourProjectNameEfCoreEntityExtensionMappings` class in your `.EntityFrameworkCore` project. Then you need to use the standard `Add-Migration` and `Update-Database` commands to create a new database migration and apply the change to your database. |
||||
|
|
||||
|
Add-Migration create a new migration as shown below: |
||||
|
|
||||
|
````csharp |
||||
|
public partial class Added_SocialSecurityNumber_To_IdentityUser : Migration |
||||
|
{ |
||||
|
protected override void Up(MigrationBuilder migrationBuilder) |
||||
|
{ |
||||
|
migrationBuilder.AddColumn<string>( |
||||
|
name: "SocialSecurityNumber", |
||||
|
table: "AbpUsers", |
||||
|
maxLength: 128, |
||||
|
nullable: true); |
||||
|
} |
||||
|
|
||||
|
protected override void Down(MigrationBuilder migrationBuilder) |
||||
|
{ |
||||
|
migrationBuilder.DropColumn( |
||||
|
name: "SocialSecurityNumber", |
||||
|
table: "AbpUsers"); |
||||
|
} |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
Once you update your database, you will see that the `AbpUsers` table has the new property as a standard table field: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
> If you first created a property without a database table field, then you later needed to move this property to a database table field, it is suggested to execute an SQL command in your migration to copy the old values to the new field. |
||||
|
> |
||||
|
> However, if you don't make it, the ABP Framework seamlessly manages it. It uses the new database field, but fallbacks to the `ExtraProperties` field if it is null. When you save the entity, it moves the value to the new field. |
||||
|
|
||||
|
See the [Extending Entities](Customizing-Application-Modules-Extending-Entities.md) document for more. |
||||
|
|
||||
|
## More |
||||
|
|
||||
|
See the [Customizing the Modules](Customizing-Application-Modules-Guide.md) guide for an overall index for all the extensibility options. |
||||
|
|
||||
|
Here, a few things you can do: |
||||
|
|
||||
|
* You can create a second entity that maps to the same database table with the extra property as a standard class property (if you've defined the EF Core mapping). For the example above, you can add a `public string SocialSecurityNumber {get; set;}` property to the `AppUser` entity in your application, since the `AppUser` entity is mapped to the same `AbpUser` table. Do this only if you need it, since it brings more complexity to your application. |
||||
|
* You can override a domain or application service to perform custom logics with your new property. |
||||
|
* You can low level control how to add/render a field in the data table on the UI. |
||||
|
|
||||
|
|||||
@ -0,0 +1,161 @@ |
|||||
|
# Data Table Column Extensions for ASP.NET Core UI |
||||
|
|
||||
|
## Introduction |
||||
|
|
||||
|
Data table column extension system allows you to add a **new table column** on the user interface. The example below adds a new column with the "Social security no" title: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
You can use the standard column options to fine control the table column. |
||||
|
|
||||
|
> Note that this is a low level API to find control the table column. If you want to show an extension property on the table, see the [module entity extension](../../Module-Entity-Extensions.md) document. |
||||
|
|
||||
|
## How to Set Up |
||||
|
|
||||
|
### Create a JavaScript File |
||||
|
|
||||
|
First, add a new JavaScript file to your solution. We added inside the `/Pages/Identity/Users` folder of the `.Web` project: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
Here, the content of this JavaScript file: |
||||
|
|
||||
|
```js |
||||
|
abp.ui.extensions.tableColumns |
||||
|
.get('identity.user') |
||||
|
.addContributor(function (columnList) { |
||||
|
columnList.addTail({ //add as the last column |
||||
|
title: 'Social security no', |
||||
|
data: 'extraProperties.SocialSecurityNumber', |
||||
|
orderable: false, |
||||
|
render: function (data, type, row) { |
||||
|
if (row.extraProperties.SocialSecurityNumber) { |
||||
|
return '<strong>' + |
||||
|
row.extraProperties.SocialSecurityNumber + |
||||
|
'<strong>'; |
||||
|
} else { |
||||
|
return '<i class="text-muted">undefined</i>'; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
This example defines a custom `render` function to return a custom HTML to render in the column. |
||||
|
|
||||
|
### Add the File to the User Management Page |
||||
|
|
||||
|
Then you need to add this JavaScript file to the user management page. You can take the power of the [Bundling & Minification system](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Bundling-Minification). |
||||
|
|
||||
|
Write the following code inside the `ConfigureServices` of your module class: |
||||
|
|
||||
|
```csharp |
||||
|
Configure<AbpBundlingOptions>(options => |
||||
|
{ |
||||
|
options.ScriptBundles.Configure( |
||||
|
typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName, |
||||
|
bundleConfiguration => |
||||
|
{ |
||||
|
bundleConfiguration.AddFiles( |
||||
|
"/Pages/Identity/Users/my-user-extensions.js" |
||||
|
); |
||||
|
}); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
This configuration adds `my-user-extensions.js` to the user management page of the Identity Module. `typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName` is the name of the bundle in the user management page. This is a common convention used for all the ABP Commercial modules. |
||||
|
|
||||
|
### Rendering the Column |
||||
|
|
||||
|
This example assumes that you've defined a `SocialSecurityNumber` extra property using the [module entity extension](../../Module-Entity-Extensions.md) system. However; |
||||
|
|
||||
|
* You can add a new column that is related to an existing property of the user (that was not added to the table by default). Example: |
||||
|
|
||||
|
````js |
||||
|
abp.ui.extensions.tableColumns |
||||
|
.get('identity.user') |
||||
|
.addContributor(function (columnList) { |
||||
|
columnList.addTail({ |
||||
|
title: 'Phone confirmed?', |
||||
|
data: 'phoneNumberConfirmed', |
||||
|
render: function (data, type, row) { |
||||
|
if (row.phoneNumberConfirmed) { |
||||
|
return '<strong style="color: green">YES<strong>'; |
||||
|
} else { |
||||
|
return '<i class="text-muted">NO</i>'; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
```` |
||||
|
|
||||
|
* You can add a new custom column that is not related to any entity property, but a completely custom information. Example: |
||||
|
|
||||
|
````js |
||||
|
abp.ui.extensions.tableColumns |
||||
|
.get('identity.user') |
||||
|
.addContributor(function (columnList) { |
||||
|
columnList.addTail({ |
||||
|
title: 'Custom column', |
||||
|
data: {}, |
||||
|
orderable: false, |
||||
|
render: function (data) { |
||||
|
if (data.phoneNumber) { |
||||
|
return "call: " + data.phoneNumber; |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
```` |
||||
|
|
||||
|
## API |
||||
|
|
||||
|
This section explains details of the `abp.ui.extensions.tableColumns` JavaScript API. |
||||
|
|
||||
|
### abp.ui.extensions.tableColumns.get(entityName) |
||||
|
|
||||
|
This method is used to access the table columns for an entity of a specific module. It takes one parameter: |
||||
|
|
||||
|
* **entityName**: The name of the entity defined by the related module. |
||||
|
|
||||
|
### abp.ui.extensions.tableColumns.get(entityName).columns |
||||
|
|
||||
|
The `columns` property is used to retrieve a [doubly linked list](../Common/Utils/Linked-List.md) of previously defined columns for a table. All contributors are executed in order to prepare the final column list. This is normally called by the modules to show the columns in the table. However, you can use it if you are building your own extensible UIs. |
||||
|
|
||||
|
### abp.ui.extensions.tableColumns.get(entityName).addContributor(contributeCallback [, order]) |
||||
|
|
||||
|
The `addContributor` method covers all scenarios, e.g. you want to add your column in a different position in the list, change or remove an existing column. `addContributor` has the following parameters: |
||||
|
|
||||
|
* **contributeCallback**: A callback function that is called whenever the column list should be created. You can freely modify the column list inside this callback method. |
||||
|
* **order** (optional): The order of the callback in the callback list. Your callback is added to the end of the list (so, you have opportunity to modify columns added by the previous contributors). You can set it `0` to add your contributor as the first item. |
||||
|
|
||||
|
#### Example |
||||
|
|
||||
|
```js |
||||
|
var myColumnDefinition = { |
||||
|
title: 'Custom column', |
||||
|
data: {}, |
||||
|
orderable: false, |
||||
|
render: function(data) { |
||||
|
if (data.phoneNumber) { |
||||
|
return "call: " + data.phoneNumber; |
||||
|
} else { |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
abp.ui.extensions.tableColumns |
||||
|
.get('identity.user') |
||||
|
.addContributor(function (columnList) { |
||||
|
// Remove an item from actionList |
||||
|
columnList.dropHead(); |
||||
|
|
||||
|
// Add a new item to the actionList |
||||
|
columnList.addHead(myColumnDefinition); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
> `columnList` is [linked list](../Common/Utils/Linked-List.md). You can use its methods to build a list of columns however you need. |
||||
@ -0,0 +1,108 @@ |
|||||
|
# Entity Action Extensions for ASP.NET Core UI |
||||
|
|
||||
|
## Introduction |
||||
|
|
||||
|
Entity action extension system allows you to add a **new action** to the action menu for an entity. A **Click Me** action was added to the *User Management* page below: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
You can take any action (open a modal, make an HTTP API call, redirect to another page... etc) by writing your custom code. You can access to the current entity in your code. |
||||
|
|
||||
|
## How to Set Up |
||||
|
|
||||
|
In this example, we will add a "Click Me!" action and execute a JavaScript code for the user management page of the [Identity Module](../../Modules/Identity.md). |
||||
|
|
||||
|
### Create a JavaScript File |
||||
|
|
||||
|
First, add a new JavaScript file to your solution. We added inside the `/Pages/Identity/Users` folder of the `.Web` project: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
Here, the content of this JavaScript file: |
||||
|
|
||||
|
```js |
||||
|
var clickMeAction = { |
||||
|
text: 'Click Me!', |
||||
|
action: function(data) { |
||||
|
//TODO: Write your custom code |
||||
|
alert(data.record.userName); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
abp.ui.extensions.entityActions |
||||
|
.get('identity.user') |
||||
|
.addContributor(function(actionList) { |
||||
|
actionList.addTail(clickMeAction); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
In the `action` function, you can do anything you need. See the API section for a detailed usage. |
||||
|
|
||||
|
### Add the File to the User Management Page |
||||
|
|
||||
|
Then you need to add this JavaScript file to the user management page. You can take the power of the [Bundling & Minification System](Bundling-Minification.md). |
||||
|
|
||||
|
Write the following code inside the `ConfigureServices` of your module class: |
||||
|
|
||||
|
```csharp |
||||
|
Configure<AbpBundlingOptions>(options => |
||||
|
{ |
||||
|
options.ScriptBundles.Configure( |
||||
|
typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName, |
||||
|
bundleConfiguration => |
||||
|
{ |
||||
|
bundleConfiguration.AddFiles( |
||||
|
"/Pages/Identity/Users/my-user-extensions.js" |
||||
|
); |
||||
|
}); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
This configuration adds `my-user-extensions.js` to the user management page of the Identity Module. `typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName` is the name of the bundle in the user management page. This is a common convention used for all the ABP Commercial modules. |
||||
|
|
||||
|
That's all. Run your application to see the result. |
||||
|
|
||||
|
## API |
||||
|
|
||||
|
This section explains details of the `abp.ui.extensions.entityActions` JavaScript API. |
||||
|
|
||||
|
### abp.ui.extensions.entityActions.get(entityName) |
||||
|
|
||||
|
This method is used to access the entity actions of a specific module. It takes one parameter: |
||||
|
|
||||
|
* **entityName**: The name of the entity defined by the related module. |
||||
|
|
||||
|
### abp.ui.extensions.entityActions.get(entityName).actions |
||||
|
|
||||
|
The `actions` property is used to retrieve a [doubly linked list](../Common/Utils/Linked-List.md) of previously defined actions for an entity. All contributors are executed in order to prepare the final actions list. This is normally called by the modules to show the actions in the grid. However, you can use it if you are building your own extensible UIs. |
||||
|
|
||||
|
### abp.ui.extensions.entityActions.get(entityName).addContributor(contributeCallback) |
||||
|
|
||||
|
The `addContributor` method covers all scenarios, e.g. you want to add your action in a different position in the list, change or remove an existing action item. `addContributor` with the following parameter: |
||||
|
|
||||
|
* **contributeCallback**: A callback function that is called whenever the action list should be created. You can freely modify the action list inside this callback method. |
||||
|
|
||||
|
#### Example |
||||
|
|
||||
|
```js |
||||
|
var clickMe2Action = { |
||||
|
text: 'Click Me 2!', |
||||
|
icon: 'fas fa-hand-point-right', |
||||
|
action: function(data) { |
||||
|
//TODO: Write your custom code |
||||
|
alert(data.record.userName); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
abp.ui.extensions.entityActions |
||||
|
.get('identity.user') |
||||
|
.addContributor(function(actionList) { |
||||
|
// Remove an item from actionList |
||||
|
actionList.dropHead(); |
||||
|
|
||||
|
// Add the new item to the actionList |
||||
|
actionList.addHead(clickMe2Action); |
||||
|
}); |
||||
|
``` |
||||
|
|
||||
|
> `actionList` is [linked list](../Common/Utils/Linked-List.md). You can use its methods to build a list of columns however you need. |
||||
@ -0,0 +1,3 @@ |
|||||
|
# Blazor: Testing |
||||
|
|
||||
|
Coming soon. |
||||
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 29 KiB |
@ -0,0 +1,11 @@ |
|||||
|
using Volo.Abp.AspNetCore.Mvc.UI.Bundling; |
||||
|
using Volo.Abp.AspNetCore.Mvc.UI.Packages.StarRatingSvg; |
||||
|
using Volo.Abp.Modularity; |
||||
|
|
||||
|
namespace Volo.Abp.AspNetCore.Mvc.UI.Packages.CmsKit |
||||
|
{ |
||||
|
[DependsOn(typeof(StarRatingSvgScriptContributor))] |
||||
|
public class CmsKitScriptContributor : BundleContributor |
||||
|
{ |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
using Volo.Abp.AspNetCore.Mvc.UI.Bundling; |
||||
|
using Volo.Abp.AspNetCore.Mvc.UI.Packages.StarRatingSvg; |
||||
|
using Volo.Abp.Modularity; |
||||
|
|
||||
|
namespace Volo.Abp.AspNetCore.Mvc.UI.Packages.CmsKit |
||||
|
{ |
||||
|
[DependsOn(typeof(StarRatingSvgStyleContributor))] |
||||
|
public class CmsKitStyleContributor : BundleContributor |
||||
|
{ |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,43 @@ |
|||||
|
using System; |
||||
|
using System.Collections.Concurrent; |
||||
|
using System.Reflection; |
||||
|
using Autofac.Core.Activators.Reflection; |
||||
|
|
||||
|
namespace Volo.Abp.Autofac |
||||
|
{ |
||||
|
public class AbpAutofacConstructorFinder : IConstructorFinder |
||||
|
{ |
||||
|
private const BindingFlags DeclaredOnlyPublicFlags = BindingFlags.Public | BindingFlags.Instance | BindingFlags.DeclaredOnly; //Remove static constructor, BindingFlags.Static
|
||||
|
|
||||
|
private readonly Func<Type, ConstructorInfo[]> _finder; |
||||
|
|
||||
|
private static readonly ConcurrentDictionary<Type, ConstructorInfo[]> DefaultPublicConstructorsCache = new ConcurrentDictionary<Type, ConstructorInfo[]>(); |
||||
|
|
||||
|
public AbpAutofacConstructorFinder() |
||||
|
: this(GetDefaultPublicConstructors) |
||||
|
{ |
||||
|
} |
||||
|
|
||||
|
public AbpAutofacConstructorFinder(Func<Type, ConstructorInfo[]> finder) |
||||
|
{ |
||||
|
_finder = finder ?? throw new ArgumentNullException(nameof(finder)); |
||||
|
} |
||||
|
|
||||
|
public ConstructorInfo[] FindConstructors(Type targetType) |
||||
|
{ |
||||
|
return _finder(targetType); |
||||
|
} |
||||
|
|
||||
|
private static ConstructorInfo[] GetDefaultPublicConstructors(Type type) |
||||
|
{ |
||||
|
var retval = DefaultPublicConstructorsCache.GetOrAdd(type, t => t.GetConstructors(DeclaredOnlyPublicFlags)); |
||||
|
|
||||
|
if (retval.Length == 0) |
||||
|
{ |
||||
|
throw new NoConstructorsFoundException(type); |
||||
|
} |
||||
|
|
||||
|
return retval; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
<Button form="@Form" Type="@Type" Color="@Color" Block="@Block" PreventDefaultOnSubmit="@PreventDefaultOnSubmit" Disabled="@IsDisabled" Loading="@IsLoading" Clicked="@OnClickedHandler"> |
||||
|
@if ( ChildContent != null ) |
||||
|
{ |
||||
|
@ChildContent |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
@SaveString |
||||
|
} |
||||
|
</Button> |
||||
@ -0,0 +1,73 @@ |
|||||
|
using System; |
||||
|
using System.Threading.Tasks; |
||||
|
using Blazorise; |
||||
|
using Localization.Resources.AbpUi; |
||||
|
using Microsoft.AspNetCore.Components; |
||||
|
using Microsoft.Extensions.Localization; |
||||
|
|
||||
|
namespace Volo.Abp.BlazoriseUI.Components |
||||
|
{ |
||||
|
public partial class SubmitButton : ComponentBase |
||||
|
{ |
||||
|
protected bool Submiting { get; set; } |
||||
|
|
||||
|
[Parameter] |
||||
|
public string Form { get; set; } |
||||
|
|
||||
|
[Parameter] |
||||
|
public ButtonType Type { get; set; } = ButtonType.Submit; |
||||
|
|
||||
|
[Parameter] |
||||
|
public Color Color { get; set; } = Color.Primary; |
||||
|
|
||||
|
[Parameter] |
||||
|
public bool PreventDefaultOnSubmit { get; set; } = true; |
||||
|
|
||||
|
[Parameter] |
||||
|
public bool Block { get; set; } |
||||
|
|
||||
|
[Parameter] |
||||
|
public bool? Disabled { get; set; } |
||||
|
|
||||
|
[Parameter] |
||||
|
public string SaveResourceKey { get; set; } = "Save"; |
||||
|
|
||||
|
[Parameter] |
||||
|
public EventCallback Clicked { get; set; } |
||||
|
|
||||
|
[Parameter] |
||||
|
public RenderFragment ChildContent { get; set; } |
||||
|
|
||||
|
[Inject] |
||||
|
protected IStringLocalizer<AbpUiResource> StringLocalizer { get; set; } |
||||
|
|
||||
|
protected bool IsDisabled |
||||
|
=> Disabled == true || Submiting; |
||||
|
|
||||
|
protected bool IsLoading |
||||
|
=> Submiting; |
||||
|
|
||||
|
protected string SaveString |
||||
|
=> StringLocalizer[SaveResourceKey]; |
||||
|
|
||||
|
protected virtual async Task OnClickedHandler() |
||||
|
{ |
||||
|
try |
||||
|
{ |
||||
|
Submiting = true; |
||||
|
|
||||
|
await Clicked.InvokeAsync(null); |
||||
|
} |
||||
|
catch (Exception) |
||||
|
{ |
||||
|
throw; |
||||
|
} |
||||
|
finally |
||||
|
{ |
||||
|
Submiting = false; |
||||
|
|
||||
|
await InvokeAsync(StateHasChanged); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue