Starts in:
2 DAYS
6 HRS
17 MIN
44 SEC
Starts in:
2 D
6 H
17 M
44 S

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:

user-action-extension-click-me

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.

Create a C# File

First, add a new C# file to your solution. We added inside the /Pages/Identity/ folder of the .Blazor project:

user-action-extension-on-solution

We will use the component override system in the Blazor. After creating a class inherits from the UserManagement component, we will override the SetEntityActionsAsync method and add the entity action programmatically.

Here, the content of the overridden SetEntityActionsAsync method.

protected override async ValueTask SetEntityActionsAsync()
{
    await base.SetEntityActionsAsync();
    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.

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 SetEntityActionsAsync()
        {
            await base.SetEntityActionsAsync();
            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

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>();
    }
};

Contributors


Last updated: April 12, 2021 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

What’s New with .NET 9 & ABP 9?

21 Nov, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More