Customize CRUD Forms

• Sep 18, 2024
• 3 minutes to read

This topic explains how to customize built-in CRUD forms and how to create custom forms.

Configure Form Templates

You can specify the DXCollectionView.DetailFormTemplate, DXCollectionView.DetailNewItemFormTemplate, and DetailEditFormTemplate properties to implement custom view and edit detail forms.

The CollectionView passes a view model to the template’s BindingContext. Use this object to access information about the edited or displayed item and call such commands as Delete, Edit, and Close from your custom form template. Depending on the form type, the CollectionView passes a DetailFormViewModel (View form) or DetailEditFormViewModel (Edit and Create forms) object as a BindingContext for form templates.

The following example shows how to use a DataFormView object to implement a custom edit form:

XAML

<dxcv:DXCollectionView ...
                       DetailEditFormTemplate="{DataTemplate local:ContactEditingPage}">

Show ContactEditingPage implementation

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors"
            xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors"
            xmlns:dxco="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
            x:Class="CollectionViewExample.ContactEditingPage"
            BackgroundColor="{StaticResource Gray50}" Shell.ForegroundColor="{StaticResource Primary}">
   <Shell.BackButtonBehavior>
       <BackButtonBehavior IsVisible="True" IsEnabled="True" />
   </Shell.BackButtonBehavior>
   <ContentPage.ToolbarItems>
       <ToolbarItem IconImageSource="savechanges.svg" Clicked="SaveItemClick"/>
   </ContentPage.ToolbarItems>
   <Grid>
       <ScrollView>
           <VerticalStackLayout BackgroundColor="{StaticResource Gray50}">
               <Image Source="{Binding Item.PhotoImageSource}" WidthRequest="100" HeightRequest="100"
                      Margin="0,0,0,20" />
               <Border BackgroundColor="White" StrokeThickness="0" StrokeShape="RoundRectangle 10,10,0,0">
                   <dxdf:DataFormView x:Name="dataForm" DataObject="{Binding Item}"
                                      EditorLabelColor="{StaticResource Primary}" IsAutoGenerationEnabled="False"
                                      EditorLabelWidth="40" ValidateProperty="dataForm_ValidateProperty"
                                      Margin="0,10,0,0">
                       <dxdf:DataFormTextItem FieldName="FirstName" LabelIcon="editorsname.svg" LabelWidth="40"
                                              LabelText="" InplaceLabelText="First Name" IsInplaceLabelFloating="True" />
                       <dxdf:DataFormTextItem FieldName="LastName" IsLabelVisible="True" LabelText=""
                                              InplaceLabelText="Last Name" IsInplaceLabelFloating="True" />
                       <dxdf:DataFormMaskedItem FieldName="HomePhone" Keyboard="Telephone" Mask="[phone]"
                                                IsLabelVisible="True" LabelIcon="editorsphone.svg"
                                                InplaceLabelText="Phone" IsInplaceLabelFloating="True" />
                       <dxdf:DataFormTextItem FieldName="Email" IsLabelVisible="True" LabelIcon="editorsemail.svg"
                                              InplaceLabelText="Email" IsInplaceLabelFloating="True" />
                       <dxdf:DataFormTextItem FieldName="Company" IsLabelVisible="True" LabelIcon="editorscompany.svg"
                                              InplaceLabelText="Company" IsInplaceLabelFloating="True" />
                       <dxdf:DataFormTextItem FieldName="State" IsLabelVisible="True" LabelIcon="editorslocation.svg"
                                              InplaceLabelText="State" IsInplaceLabelFloating="True" />
                       <dxdf:DataFormTextItem FieldName="City" IsLabelVisible="True" LabelText=""
                                              InplaceLabelText="City" IsInplaceLabelFloating="True" />
                       <dxdf:DataFormTextItem FieldName="Address" IsLabelVisible="True" LabelText=""
                                              InplaceLabelText="Street" IsInplaceLabelFloating="True" />
                       <dxdf:DataFormNumericItem FieldName="ZipCode" IsLabelVisible="True" LabelText=""
                                                 InplaceLabelText="Zip" IsInplaceLabelFloating="True" />
                   </dxdf:DataFormView>
               </Border>
           </VerticalStackLayout>
       </ScrollView>
   </Grid>
</ContentPage>

C#

using DevExpress.Maui.Core;
using System.Net.Mail;
namespace CollectionViewExample;
public partial class ContactEditingPage : ContentPage {
   DetailEditFormViewModel ViewModel => (DetailEditFormViewModel)BindingContext;
   public ContactEditingPage() {
       InitializeComponent();
   }
   private async void SaveItemClick(object sender, EventArgs e) {
       if (!this.dataForm.Validate())
           return;
       this.dataForm.Commit();
       ViewModel.Save();
   }
   private void dataForm_ValidateProperty(object sender, DevExpress.Maui.DataForm.DataFormPropertyValidationEventArgs e) {
       if (e.PropertyName == "Email" && e.NewValue != null) {
           MailAddress res;
           if (!MailAddress.TryCreate((string)e.NewValue, out res)) {
               e.HasError = true;
               e.ErrorText = "Invalid email";
           }
       }
   }
}

If you use the DataFormView component to implement custom edit forms, you can use its built-in mechanisms to validate input values. For more information, refer to the following help topic: Validate User Input in Data Form for .NET MAUI.

In other cases, you can handle the DXCollectionView.ValidateAndSave event to validate data before it is saved to the source. For more information, refer to the following help topic: Validate and Save Data.

Use Data Form View Attributes

CollectionView uses the DataFormView component to generate the predefined detail forms. You can assign attributes to the source object class properties to configure generated editors. For more information, refer to the following section: Specify Editor Properties.

The example below shows how to apply a mask to a text editor:

C#

using DevExpress.Maui.DataForm;
//...
    [DataFormMaskedEditor(Mask = "[phone]", MaskPlaceholderChar = '_') ]
    public string Phone { get; set; }

Specify Form Settings

Handle the DetailFormShowing event to customize view/edit form options. The following example specifies the page title for an edit form:

C#

private void collectionView_DetailFormShowing(object sender, DetailFormShowingEventArgs e) {
    if (e.ViewModel is not DetailEditFormViewModel editViewModel)
        return;
    bool isNew = editViewModel.IsNew;
    if (isNew) {
        DetailEditFormPage form = (DetailEditFormPage)e.Content;
        form.TitleLabel.Text = "Add new Contact";
    } 
}