mirror of https://github.com/abpframework/abp.git
Alper Ebicoglu
6 years ago
48 changed files with 1016 additions and 118 deletions
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 13 KiB |
@ -0,0 +1,128 @@ |
|||||
|
# Data Table Column Extensions for Blazor UI |
||||
|
|
||||
|
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 "Email Confirmed" 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 C# File |
||||
|
|
||||
|
First, add a new C# file to your solution. We added inside the `/Pages/Identity/` folder of the `.Blazor` project: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
We will use the [component override system](Customization-Overriding-Components.md) in the Blazor. After creating a class inherits from the `UserManagement` component, we will override the `SetTableColumnsAsync` method and add the table column programmatically. |
||||
|
|
||||
|
Here, the content of the overridden `SetTableColumnsAsync` method. |
||||
|
|
||||
|
```csharp |
||||
|
protected override async ValueTask SetTableColumnsAsync() |
||||
|
{ |
||||
|
await base.SetTableColumnsAsync(); |
||||
|
var confirmedColumn = new TableColumn |
||||
|
{ |
||||
|
Title = "Email Confirmed", |
||||
|
Data = nameof(IdentityUserDto.EmailConfirmed) |
||||
|
}; |
||||
|
TableColumns.Get<UserManagement>().Add(confirmedColumn); |
||||
|
} |
||||
|
``` |
||||
|
Here, the entire content of the file. |
||||
|
|
||||
|
```csharp |
||||
|
using System.Threading.Tasks; |
||||
|
using Volo.Abp.AspNetCore.Components.Web.Extensibility.TableColumns; |
||||
|
using Volo.Abp.DependencyInjection; |
||||
|
using Volo.Abp.Identity; |
||||
|
using Volo.Abp.Identity.Blazor.Pages.Identity; |
||||
|
|
||||
|
namespace MyCompanyName.MyProjectName.Blazor.Pages.Identity |
||||
|
{ |
||||
|
[ExposeServices(typeof(UserManagement))] |
||||
|
[Dependency(ReplaceServices = true)] |
||||
|
public class CustomizedUserManagement : UserManagement |
||||
|
{ |
||||
|
protected override async ValueTask SetTableColumnsAsync() |
||||
|
{ |
||||
|
await base.SetTableColumnsAsync(); |
||||
|
var confirmedColumn = new TableColumn |
||||
|
{ |
||||
|
Title = "Email Confirmed", |
||||
|
Data = nameof(IdentityUserDto.EmailConfirmed) |
||||
|
}; |
||||
|
TableColumns.Get<UserManagement>().Add(confirmedColumn); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## Customizing Data Table Columns |
||||
|
|
||||
|
This section explains how to customize data table columns using the properties in the `TableColumn` type. |
||||
|
|
||||
|
* `Title`: Title of the column. |
||||
|
* `Data`: Name of the field in the supplied model. |
||||
|
* `Component`: Type of the component that you want to render. See the "Rendering Custom Components In The Data Table Columns" section for details. |
||||
|
* `Actions`: Action lists for the column. You can render additional action columns by adding actions to this collection. |
||||
|
* `ValueConverter`: Simple converter function that is being called before rendering the content. |
||||
|
* `Sortable`: A boolean field indicating whether the column is sortable or not. |
||||
|
* `DisplayFormat`: You can specify a custom format for the column. |
||||
|
* `DisplayFormatProvider` : You can provide a custom `IFormatProvider` for the column. Default value is `CultureInfo.CurrentCulture`. |
||||
|
|
||||
|
## Rendering Custom Components In The Data Table Columns |
||||
|
|
||||
|
This section explains how to render custom blazor components in data table columns. In this example, we're going to display custom icons instead of text representations of the property. |
||||
|
|
||||
|
First of all, create a blazor component. We will name it `CustomTableColumn`. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
Add an object parameter named `Data`. |
||||
|
|
||||
|
```csharp |
||||
|
public class CustomTableColumn |
||||
|
{ |
||||
|
[Parameter] |
||||
|
public object Data { get; set; } |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
Navigate to the razor file and paste the following code. |
||||
|
|
||||
|
```csharp |
||||
|
@using System |
||||
|
@using Volo.Abp.Identity |
||||
|
|
||||
|
@if (Data.As<IdentityUserDto>().EmailConfirmed) |
||||
|
{ |
||||
|
<Icon class="text-success" Name="IconName.Check" /> |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
<Icon class="text-danger" Name="IconName.Times" /> |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
Navigate back to the `CustomizedUserManagement` class, and use `Component` property to specify the custom blazor component. |
||||
|
|
||||
|
```csharp |
||||
|
protected override async ValueTask SetTableColumnsAsync() |
||||
|
{ |
||||
|
await base.SetTableColumnsAsync(); |
||||
|
var confirmedColumn = new TableColumn |
||||
|
{ |
||||
|
Title = "Email Confirmed", |
||||
|
Component = typeof(CustomTableColumn) |
||||
|
}; |
||||
|
TableColumns.Get<UserManagement>().Add(confirmedColumn); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
Run the project and you will see the icons instead of text fields. |
||||
|
|
||||
|
 |
||||
@ -0,0 +1,109 @@ |
|||||
|
# Entity Action Extensions for Blazor UI |
||||
|
|
||||
|
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 C# code for the user management page of the [Identity Module](../../Modules/Identity.md). |
||||
|
|
||||
|
### Create a C# File |
||||
|
|
||||
|
First, add a new C# file to your solution. We added inside the `/Pages/Identity/` folder of the `.Blazor` project: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
We will use the [component override system](Customization-Overriding-Components.md) in the Blazor. After creating a class inherits from the `UserManagement` component, we will override the `SetToolbarItemsAsync` method and add the entity action programmatically. |
||||
|
|
||||
|
Here, the content of the overridden `SetToolbarItemsAsync` method. |
||||
|
|
||||
|
```csharp |
||||
|
protected override async ValueTask SetToolbarItemsAsync() |
||||
|
{ |
||||
|
await base.SetToolbarItemsAsync(); |
||||
|
var clickMeAction = new EntityAction() |
||||
|
{ |
||||
|
Text = "Click Me!", |
||||
|
Clicked = (data) => |
||||
|
{ |
||||
|
//TODO: Write your custom code |
||||
|
|
||||
|
return Task.CompletedTask; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
EntityActions.Get<UserManagement>().Add(clickMeAction); |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
In the `Clicked` property, you can do anything you need. |
||||
|
|
||||
|
Here, the entire content of the file. |
||||
|
```csharp |
||||
|
using System.Threading.Tasks; |
||||
|
using Volo.Abp.AspNetCore.Components.Web.Extensibility.EntityActions; |
||||
|
using Volo.Abp.DependencyInjection; |
||||
|
using Volo.Abp.Identity.Blazor.Pages.Identity; |
||||
|
|
||||
|
namespace MyCompanyName.MyProjectName.Blazor.Pages.Identity |
||||
|
{ |
||||
|
[ExposeServices(typeof(UserManagement))] |
||||
|
[Dependency(ReplaceServices = true)] |
||||
|
public class CustomizedUserManagement : UserManagement |
||||
|
{ |
||||
|
protected override async ValueTask SetToolbarItemsAsync() |
||||
|
{ |
||||
|
await base.SetToolbarItemsAsync(); |
||||
|
var clickMeAction = new EntityAction() |
||||
|
{ |
||||
|
Text = "Click Me!", |
||||
|
Clicked = (data) => |
||||
|
{ |
||||
|
//TODO: Write your custom code |
||||
|
|
||||
|
return Task.CompletedTask; |
||||
|
} |
||||
|
}; |
||||
|
EntityActions.Get<UserManagement>().Add(clickMeAction); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
## Customizing Entity Actions |
||||
|
|
||||
|
This section explains how to customize entity actions using the properties in the `EntityAction` type. |
||||
|
|
||||
|
Here, the list of the properties that you use in the `EntityAction`. |
||||
|
* `Text` : Entity action text. |
||||
|
* `Clicked` : Click event handler for the action. You can use the `data` parameter to access the selected item in the `DataGrid`. |
||||
|
* `Icon` : Icon for the action. |
||||
|
* `Color` : Color for the action. |
||||
|
* `Visible`: Visible function to determine the actions' visibility based on the data grid items individually. You can make the action invisible for some data grid items. You can also use the `data` parameter to access the selected item in the `DataGrid`. |
||||
|
* `Confirmation`: Confirmation message for the action. You can use the `data` parameter to access the selected item in the `DataGrid`. |
||||
|
|
||||
|
#### Example |
||||
|
|
||||
|
```csharp |
||||
|
var clickMeAction = new EntityAction() |
||||
|
{ |
||||
|
Text = "Click Me!", |
||||
|
Clicked = (data) => |
||||
|
{ |
||||
|
//TODO: Write your custom code |
||||
|
|
||||
|
return Task.CompletedTask; |
||||
|
}, |
||||
|
Color = Blazorise.Color.Danger, |
||||
|
Icon = "fas fa-hand-point-right", |
||||
|
ConfirmationMessage = (data) => "Are you sure you want to click to the action?", |
||||
|
Visible = (data) => |
||||
|
{ |
||||
|
//TODO: Write your custom visibility action |
||||
|
//var selectedUser = data.As<IdentityUserDto>(); |
||||
|
} |
||||
|
}; |
||||
|
``` |
||||
@ -1,3 +1,90 @@ |
|||||
# Blazor UI: Page Header |
# Blazor UI: Page Header |
||||
|
|
||||
TODO |
You can use the`PageHeader` component to set the page title, the breadcrumb items and the toolbar items for a page. Before using the `PageHeader` component, you need to add a using statement for the `Volo.Abp.AspNetCore.Components.Web.Theming.Layout` namespace. |
||||
|
|
||||
|
Once you add the `PageHeader` component to your page, you can control the related values using the parameters. |
||||
|
|
||||
|
## Page Title |
||||
|
|
||||
|
You can use the `Title` parameter to control the page header. |
||||
|
|
||||
|
```csharp |
||||
|
<PageHeader Title="Book List"> |
||||
|
</PageHeader> |
||||
|
``` |
||||
|
|
||||
|
## Breadcrumb |
||||
|
|
||||
|
> **The [Basic Theme](Basic-Theme.md) currently doesn't implement the breadcrumbs.** |
||||
|
|
||||
|
Breadcrumbs can be added using the `BreadcrumbItems` property. |
||||
|
|
||||
|
**Example: Add Language Management to the breadcrumb items.** |
||||
|
|
||||
|
Create a collection of `Volo.Abp.BlazoriseUI.BreadcrumbItem` objects and set the collection to the `BreadcrumbItems` parameter. |
||||
|
|
||||
|
```csharp |
||||
|
public partial class Index |
||||
|
{ |
||||
|
protected List<BreadcrumbItem> BreadcrumbItems { get; } = new(); |
||||
|
|
||||
|
protected override void OnInitialized() |
||||
|
{ |
||||
|
BreadcrumbItems.Add(new BreadcrumbItem("Language Management")); |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
Navigate back to the razor page. |
||||
|
|
||||
|
```csharp |
||||
|
<PageHeader BreadcrumbItems="@BreadcrumbItems" /> |
||||
|
``` |
||||
|
|
||||
|
The theme then renders the breadcrumb. An example render result can be: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* The Home icon is rendered by default. Set `BreadcrumbShowHome` to `false` to hide it. |
||||
|
* Breadcrumb items will be activated based on current navigation. Set `BreadcrumbShowCurrent` to `false` to disable it. |
||||
|
|
||||
|
You can add as many items as you need. `BreadcrumbItem` constructor gets three parameters: |
||||
|
|
||||
|
* `text`: The text to show for the breadcrumb item. |
||||
|
* `url` (optional): A URL to navigate to, if the user clicks to the breadcrumb item. |
||||
|
* `icon` (optional): An icon class (like `fas fa-user-tie` for Font-Awesome) to show with the `text`. |
||||
|
|
||||
|
## Page Toolbar |
||||
|
|
||||
|
Page toolbar can be set using the `Toolbar` property. |
||||
|
|
||||
|
**Example: Add a "New Item" toolbar item to the page toolbar.** |
||||
|
|
||||
|
Create a `PageToolbar` object and define toolbar items using the `AddButton` extension method. |
||||
|
|
||||
|
```csharp |
||||
|
public partial class Index |
||||
|
{ |
||||
|
protected PageToolbar Toolbar { get; } = new(); |
||||
|
|
||||
|
protected override void OnInitialized() |
||||
|
{ |
||||
|
Toolbar.AddButton("New Item", () => |
||||
|
{ |
||||
|
//Write your click action here |
||||
|
return Task.CompletedTask; |
||||
|
}, icon:IconName.Add); |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
Navigate back to the razor page and set the `Toolbar` parameter. |
||||
|
|
||||
|
```csharp |
||||
|
<PageHeader Toolbar="@Toolbar" /> |
||||
|
``` |
||||
|
|
||||
|
An example render result can be: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
|||||
@ -0,0 +1,126 @@ |
|||||
|
# Page Toolbar Extensions for Blazor UI |
||||
|
|
||||
|
Page toolbar system allows you to add components to the toolbar of any page. The page toolbar is the area right to the header of a page. A button ("Import users from excel") was added to the user management page below: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
You can add any type of view component item to the page toolbar or modify existing items. |
||||
|
|
||||
|
## How to Set Up |
||||
|
|
||||
|
In this example, we will add an "Import users from excel" button and execute a C# code for the user management page of the [Identity Module](../../Modules/Identity.md). |
||||
|
|
||||
|
### Create a C# File |
||||
|
|
||||
|
First, add a new C# file to your solution. We added inside the `/Pages/Identity/` folder of the `.Blazor` project: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
We will use the [component override system](Customization-Overriding-Components.md) in the Blazor. After creating a class inherits from the `UserManagement` component, we will override the `SetToolbarItemsAsync` method and add the toolbar item programmatically. |
||||
|
|
||||
|
Here, the content of the overridden `SetToolbarItemsAsync` method. |
||||
|
|
||||
|
```csharp |
||||
|
protected override async ValueTask SetToolbarItemsAsync() |
||||
|
{ |
||||
|
await base.SetToolbarItemsAsync(); |
||||
|
Toolbar.AddButton("Import users from excel", () => |
||||
|
{ |
||||
|
//TODO: Write your custom code |
||||
|
return Task.CompletedTask; |
||||
|
}, "file-import", Blazorise.Color.Secondary); |
||||
|
} |
||||
|
``` |
||||
|
> In order to use the `AddButton` extension method, you need to add a using statement for the `Volo.Abp.AspNetCore.Components.Web.Theming.PageToolbars` namespace. |
||||
|
|
||||
|
Here, the entire content of the file. |
||||
|
|
||||
|
```csharp |
||||
|
using System.Threading.Tasks; |
||||
|
using Volo.Abp.AspNetCore.Components.Web.Theming.PageToolbars; |
||||
|
using Volo.Abp.DependencyInjection; |
||||
|
using Volo.Abp.Identity.Blazor.Pages.Identity; |
||||
|
|
||||
|
namespace MyCompanyName.MyProjectName.Blazor.Pages.Identity |
||||
|
{ |
||||
|
[ExposeServices(typeof(UserManagement))] |
||||
|
[Dependency(ReplaceServices = true)] |
||||
|
public class CustomizedUserManagement : UserManagement |
||||
|
{ |
||||
|
protected override async ValueTask SetToolbarItemsAsync() |
||||
|
{ |
||||
|
await base.SetToolbarItemsAsync(); |
||||
|
Toolbar.AddButton("Import users from excel", () => |
||||
|
{ |
||||
|
//TODO: Write your custom code |
||||
|
return Task.CompletedTask; |
||||
|
}, "file-import", Blazorise.Color.Secondary); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
When you run the application, you will see the button added next to the current button list. There are some other parameters of the `AddButton` method (for example, use `Order` to set the order of the button component relative to the other components). |
||||
|
|
||||
|
## Advanced Use Cases |
||||
|
|
||||
|
While you typically want to add a button action to the page toolbar, it is possible to add any type of blazor component. |
||||
|
|
||||
|
### Add A Blazor Component to a Page Toolbar |
||||
|
|
||||
|
First, create a new blazor component in your project: |
||||
|
|
||||
|
 |
||||
|
|
||||
|
For this example, we've created a `MyToolbarComponent` component under the `/Pages/Identity/` folder. |
||||
|
|
||||
|
`MyToolbarComponent.razor` content: |
||||
|
|
||||
|
````csharp |
||||
|
<Button Color="Color.Dark">CLICK ME</Button> |
||||
|
```` |
||||
|
We will leave the `MyToolbarComponent.razor.cs` file empty. |
||||
|
|
||||
|
Then you can add the `MyToolbarComponent` to the user management page toolbar: |
||||
|
|
||||
|
````csharp |
||||
|
protected override async ValueTask SetToolbarItemsAsync() |
||||
|
{ |
||||
|
await base.SetToolbarItemsAsync(); |
||||
|
Toolbar.AddComponent<MyToolbarComponent>(); |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
* If your component accepts parameters, you can pass them as key/value pairs using the `arguments` parameter. |
||||
|
|
||||
|
#### Permissions |
||||
|
|
||||
|
If your button/component should be available based on a [permission/policy](../../Authorization.md), you can pass the permission/policy name as the `RequiredPolicyName` parameter to the `AddButton` and `AddComponent` methods. |
||||
|
|
||||
|
### Add a Page Toolbar Contributor |
||||
|
|
||||
|
If you perform advanced custom logic while adding an item to a page toolbar, you can create a class that implements the `IPageToolbarContributor` interface or inherits from the `PageToolbarContributor` class: |
||||
|
|
||||
|
````csharp |
||||
|
public class MyToolbarContributor : PageToolbarContributor |
||||
|
{ |
||||
|
public override Task ContributeAsync(PageToolbarContributionContext context) |
||||
|
{ |
||||
|
context.Items.Insert(0, new PageToolbarItem(typeof(MyToolbarComponent))); |
||||
|
return Task.CompletedTask; |
||||
|
} |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
* You can use `context.ServiceProvider` to resolve dependencies if you need. |
||||
|
|
||||
|
Then add your class to the `Contributors` list: |
||||
|
|
||||
|
````csharp |
||||
|
protected override async ValueTask SetToolbarItemsAsync() |
||||
|
{ |
||||
|
await base.SetToolbarItemsAsync(); |
||||
|
Toolbar.Contributors.Add(new PageContributor()); |
||||
|
} |
||||
|
```` |
||||
|
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
@ -0,0 +1,23 @@ |
|||||
|
using System.Collections.Generic; |
||||
|
using System.Threading.Tasks; |
||||
|
using Volo.Abp.Caching; |
||||
|
using Volo.Abp.DependencyInjection; |
||||
|
using Volo.Abp.EventBus; |
||||
|
|
||||
|
namespace Volo.Blogging.Posts |
||||
|
{ |
||||
|
public class PostCacheInvalidator : ILocalEventHandler<PostChangedEvent>, ITransientDependency |
||||
|
{ |
||||
|
protected IDistributedCache<List<PostCacheItem>> Cache { get; } |
||||
|
|
||||
|
public PostCacheInvalidator(IDistributedCache<List<PostCacheItem>> cache) |
||||
|
{ |
||||
|
Cache = cache; |
||||
|
} |
||||
|
|
||||
|
public virtual async Task HandleEventAsync(PostChangedEvent post) |
||||
|
{ |
||||
|
await Cache.RemoveAsync(post.BlogId.ToString()); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
using System; |
||||
|
using System.Collections.Generic; |
||||
|
using JetBrains.Annotations; |
||||
|
using Volo.Abp.Auditing; |
||||
|
using Volo.Abp.Domain.Entities; |
||||
|
using Volo.Blogging.Tagging; |
||||
|
using Volo.Blogging.Users; |
||||
|
|
||||
|
namespace Volo.Blogging.Posts |
||||
|
{ |
||||
|
[Serializable] |
||||
|
public class PostCacheItem : ICreationAuditedObject |
||||
|
{ |
||||
|
public Guid Id { get; set; } |
||||
|
|
||||
|
public Guid BlogId { get; set; } |
||||
|
|
||||
|
public string Title { get; set; } |
||||
|
|
||||
|
public string CoverImage { get; set; } |
||||
|
|
||||
|
public string Url { get; set; } |
||||
|
|
||||
|
public string Content { get; set; } |
||||
|
|
||||
|
public string Description { get; set; } |
||||
|
|
||||
|
public int ReadCount { get; set; } |
||||
|
|
||||
|
public int CommentCount { get; set; } |
||||
|
|
||||
|
public List<Tag> Tags { get; set; } |
||||
|
|
||||
|
public Guid? CreatorId { get; set; } |
||||
|
|
||||
|
public DateTime CreationTime { get; set; } |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,9 @@ |
|||||
|
using System; |
||||
|
|
||||
|
namespace Volo.Blogging.Posts |
||||
|
{ |
||||
|
public class PostChangedEvent |
||||
|
{ |
||||
|
public Guid BlogId { get; set; } |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
/* Styles for the home component */ |
||||
Loading…
Reference in new issue