Entity Action Extensions for ASP.NET Core 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 JavaScript code for the user management page of the Identity Module.

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:

var clickMeAction = {
    text: 'Click Me!',
    action: function(data) {
        //TODO: Write your custom code

    .addContributor(function(actionList) {

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.

Write the following code inside the ConfigureServices of your module class:

Configure<AbpBundlingOptions>(options =>
        bundleConfiguration =>

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.


This section explains details of the abp.ui.extensions.entityActions JavaScript API.


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.


The actions property is used to retrieve a doubly linked list 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.


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.


var clickMe2Action = {
    text: 'Click Me 2!',
    icon: 'fas fa-hand-point-right',
    action: function(data) {
        //TODO: Write your custom code

    .addContributor(function(actionList) {
        // Remove an item from actionList
        // Add the new item to the actionList

actionList is linked list. You can use its methods to build a list of columns however you need.

Was this page helpful?
Please make a selection.
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
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.