How to: Include an Action to a Detail View Layout

• Jul 08, 2021
• 3 minutes to read

XAF allows you to place an Action in a View instead of a toolbar.

In the image below, the “My Simple Action” button is an Action displayed within a Detail View.

Follow the steps below to add an action button to a Detail View.

Tip

A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/e1847/how-to-include-an-action-to-a-detail-view-layout.

Step 1. Create a new Action

In Design Time

1. Create a Controller, add a Simple Action to it, and handle the Action’s Execute event. The Execute event occurs when a user clicks the action’s button.

   For a step-by-step guide, refer to the Add a Simple Action tutorial:

   • WinForms & ASP.NET
   • Blazor

2. Create a new Action category. To do this, set the ActionBase.Category to a custom value by selecting the current value text and typing a custom value. For instance, you can set the Action’s category to “MyCategory”. Rebuild your project.

   

In Code

In the {YourSolution}.Module project, add a new class to the Controllers folder. Replace its content with the following code:

C#

using System;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Actions;
using DevExpress.Persistent.Base;
using MySolution.Module.BusinessObjects;

namespace MySolution.Module.Controllers {
    public class MyViewController : ViewController {
        public MyViewController() {
            TargetViewType = ViewType.DetailView;
            TargetObjectType = typeof(Contact);

            SimpleAction mySimpleAction = new SimpleAction(this, "MySimpleAction", "MyCategory") {
                Caption = "My Simple Action",
                ConfirmationMessage = "My Simple Action Shows a Message",
            };
            mySimpleAction.Execute += MySimpleAction_Execute;
        }
        private void MySimpleAction_Execute(Object sender, SimpleActionExecuteEventArgs e) {
            // ...
        }

    }
}

VB.NET

Imports System
Imports DevExpress.ExpressApp
Imports DevExpress.ExpressApp.Actions
Imports DevExpress.Persistent.Base
Imports MySolution.Module.BusinessObjects

Namespace MySolution.Module.Controllers
    Public Class MyViewController
        Inherits ViewController

        Public Sub New()
            TargetViewType = ViewType.DetailView
            TargetObjectType = GetType(Contact)
            Dim mySimpleAction As SimpleAction = New SimpleAction(Me, "MySimpleAction", "MyCategory") With {
                .Caption = "My Simple Action",
                .ConfirmationMessage = "My Simple Action Shows a Message"
            }
            mySimpleAction.Execute += AddressOf MySimpleAction_Execute
        End Sub

        Private Sub MySimpleAction_Execute(ByVal sender As Object, ByVal e As SimpleActionExecuteEventArgs)
            ' ...
        End Sub
    End Class
End Namespace

Rebuild your project.

Step 2. Place a New Action to a Detail View

1. If the Model Editor is already opened, restart it. Invoke the Model Editor for your platform-independent Module project and navigate to the Views node. In this node, navigate to the Detail View in which you want to display an Action. Add a new ActionContainerViewItem child node to the Detail View’s Items node via the context menu.

   

2. Set the newly created node’s Id property to “MyActionContainer” and the ActionContainer property to “MyCategory”.

   

3. Focus the Detail View’s Layout node. In a layout designer, right-click on an empty space and invoke the layout customization dialog. Place the newly-created control at the required location. For details on how to change the layout, refer to the View Items Layout Customization topic.

   

4. Run the application to make sure that the Action button is added to the required Detail View.