Skip to main content
A newer version of this page is available. .
All docs
V21.2

Add an Action that Displays a Pop-Up Window (.NET 5)

  • 4 minutes to read

This lesson explains how to create an Action that shows a pop-up window. This type of Action is useful when you want a user to input multiple parameters in a pop-up dialog before an Action is executed.

Note

Before you proceed, take a moment to review the following lessons:

In this tutorial you will add an ability to add notes from predefined list to task descriptions.

Step-by-Step Instructions

  1. Add the Note business object from Business Class Library to your application. To do this, add the following code to the MySolution.Module | Module.cs file.

    using DevExpress.Persistent.BaseImpl;
    // ...
    public sealed partial class MySolutionModule : ModuleBase {
        public MySolutionModule() {
            InitializeComponent();
            // Adds a business object
            AdditionalExportedTypes.Add(typeof(Note));
        }
        // ...
    }
    
  2. If your ORM is EF Core, register the Note type in DbContext. Edit the BusinessObjects\MySolutionDbContext.cs file as shown below:

    public class MySolutionDbContext : DbContext {
        //...
        public DbSet<Note> Notes { get; set; } 
    }
    
  3. Add a new View Controller to the MySolution.Module project, as described in the Add a Simple Action lesson. Name it PopupNotesController.

  4. In the MySolution.Module | Controllers | PopupNotesController.cs file, specify the controller options.

    using DevExpress.ExpressApp;
    using DevExpress.ExpressApp.Actions;
    using MySolution.Module.BusinessObjects;
    using DevExpress.Persistent.BaseImpl;
    using DevExpress.Persistent.Base;
    using System;
    // ...
    public partial class PopupNotesController : ViewController {
        public PopupNotesController() {
            InitializeComponent();
            // Target required Views (via the TargetXXX properties) and create their Actions.
            TargetObjectType = typeof(DemoTask);
            TargetViewType = ViewType.DetailView;
        }
        // ...
    }
    
  5. Add the ShowNotesAction action and handle its CustomizePopupWindowParams event:

    public partial class PopupNotesController : ViewController {
        public PopupNotesController() {
            InitializeComponent();
            TargetObjectType = typeof(DemoTask);
            TargetViewType = ViewType.DetailView;
    
            PopupWindowShowAction showNotesAction = new PopupWindowShowAction(this, "ShowNotesAction", PredefinedCategory.Edit) {
                Caption = "Show Notes"
            };
    
            showNotesAction.CustomizePopupWindowParams += ShowNotesAction_CustomizePopupWindowParams;
        }
    
        private void ShowNotesAction_CustomizePopupWindowParams(object sender, CustomizePopupWindowParamsEventArgs e) {
            IObjectSpace objectSpace = Application.CreateObjectSpace(typeof(Note));
            string noteListViewId = Application.FindLookupListViewId(typeof(Note));
            CollectionSourceBase collectionSource = Application.CreateCollectionSource(objectSpace, typeof(Note), noteListViewId);
            e.View = Application.CreateListView(noteListViewId, collectionSource, true);
        }
        // ...
    }
    
  6. Handle the ShowNotesAction‘s Execute event:

    // ...
    public PopupNotesController() {
        // ...
        showNotesAction.Execute += ShowNotesAction_Execute;
    }
    
    private void ShowNotesAction_Execute(object sender, PopupWindowShowActionExecuteEventArgs e) {
        DemoTask task = (DemoTask)View.CurrentObject;
        foreach(Note note in e.PopupWindowViewSelectedObjects) {
            if(!string.IsNullOrEmpty(task.Description)) {
                task.Description += Environment.NewLine;
            }
            // Add selected notes' text to a Task's description
            task.Description += note.Text;
        }
        View.ObjectSpace.CommitChanges();
    }
    
  7. Run the application.

    Open a Task object’s detail view. The detail view toolbar displays the Show Notes button. This is the action implemented in this lesson.

    blazor tutorial popup window action

    Click the button, the popup window opens. The popup window displays a list view for the Note objects. Create several Note objects.

    blazor tutorial popup window action

    blazor tutorial popup window action

    Select a Note object in the list and click OK: the Task.Description property value has been changed.

    Tip

    For an example of how to create and show a Detail View, refer to the How to: Create and Show a Detail View of the Selected Object in a Popup Window topic.

Detailed Explanation

PopupWindowShowAction

PopupWindowShowAction is used to invoke a pop-up Window with a specified View and execute custom code when a user clicks the OK or Cancel button.

In step 5, you handle the PopupWindowShowAction.CustomizePopupWindowParams event and set the required View to the handler’s CustomizePopupWindowParamsEventArgs.View parameter. This code creates the Notes List View when it generates the pop-up window.

In this code, you use the event handler’s PopupWindowShowActionExecuteEventArgs.PopupWindowViewSelectedObjects parameter to get a selected object in the pop-up window.

The Execute event occurs when a user clicks OK in the pop-up window. The event handler code appends the Note.Text property value to the Task.Description property value.

Next Lesson

Add an Action with Option Selection

See Also