How to: Add an XAF Mobile Custom Module

  • 5 minutes to read

XAF Mobile Custom Modules allow you to use your and third-party controls in XAF Mobile UI. They also enable you to register JavaScript functions, which you can call later in client events handlers. This topic describes how to add a Mobile Custom Module with a custom String Property Editor to a Mobile application.

  1. Create new folders in one of the following places:

    • the Mobile application project

      This is aimed at new Mobile Custom Module development. Since this Module is in the application project, you can load a new Module version by reloading a page in a browser without rebuilding the application.

      In the MySolution.Mobile project, create the new Static folder and the modules subfolder in it. Set the XafMobileStaticFilesLocation key value to Static in the web.config file.

    • the Mobile module project

      Select this option to integrate an existing ready-to-use Mobile Custom Module.

      In the MySolution.Module.Mobile project, create a new folder for the Mobile Custom Module's resources (for example, MobileResources). Implement the IMobileResourcesHolder interface in the module's ModuleBase descendant and return this folder name in the GetMobileResourcesRelativePath method. Then, add the modules subfolder for your Mobile Custom Modules to the resources folder.

    Refer to the Resources in Mobile Applications topic to access code examples for the items above.

  2. Right-click the created modules folder and choose Add DevExpress Item | New Item… in the context menu.
  3. In the invoked DevExpress Template Gallery, choose the XAF Mobile UI Templates | XAF Mobile UI Custom Module template and specify the Item Name, for example, simpleviewer, and click Add Item.


    Your project now contains a default module template which displays plain text in a blue font color. This template contains the following files:

    • module.json - contains a list of all the module's files. The module's main JavaScript file is specified in the main parameter, and additional files – as a list in the files parameter;
    • widget.js - contains component registration info for your module. It may also contain functions' registration code;
    • template.html - contains an HTML template of the custom module's widget;
    • widget.css - contains style definitions for your widget.



    If you have created this module in the application project, set the Build Action property to Content for all the module's files.


  4. Register the simpleviewer module in your Mobile application. To do this, open the MobileApplication.cs (MobileApplication.vb) file's code and subscribe to the MobileApplication.CustomizeApplicationConfig event in the application constructor, as shown below:

    using DevExpress.ExpressApp.Mobile.MobileModel;
    // ...
    public partial class MySolutionMobileApplication : MobileApplication {
        public MySolutionMobileApplication() {
            // … 
            CustomizeApplicationConfig += MySolutionMobileApplication_CustomizeApplicationConfig; 
        private void MySolutionMobileApplication_CustomizeApplicationConfig(object sender, CustomizeApplicationConfigEventArgs e) { 
            MobileModule simpleViewerModule = new MobileModule { Name = "simpleviewer" };             
  5. In the MySolution.Module.Mobile | Editors folder, create the SimpleStringViewer class that is a CustomComponent descendant, and the SimpleStringPropertyEditor Property Editor for it:

    using DevExpress.ExpressApp.Editors;
    using DevExpress.ExpressApp.Mobile.Editors;
    using DevExpress.ExpressApp.Mobile.MobileModel;
    using DevExpress.ExpressApp.Model;
    using System;
    // ...
    public class SimpleStringViewer : CustomComponent { 
        public SimpleStringViewer() { 
            Type = "simpleviewer"; 
    [PropertyEditor(typeof(System.String), "SimpleStringPropertyEditor", false)] 
    public class SimpleStringPropertyEditor : MobileStringPropertyEditor { 
        public SimpleStringPropertyEditor(Type objectType, IModelMemberViewItem model) 
            : base(objectType, model) { } 
        protected override object CreateViewModeControlCore() { 
            SimpleStringViewer editor = new SimpleStringViewer(); 
            editor.AddStyle("padding", "0px"); 
            return editor; 
        protected override void ReadViewModeValueCore() { 
            SimpleStringViewer linkControl = ((SimpleStringViewer)Control); 
            linkControl["text"] = BindToCurrentObjectProperty(); 

    Note that CustomComponent's Type should coincide with your module name.

  6. In the MySolution.Module | BusinessObjects folder, create the SimpleObject class for your Property Editor:

    using DevExpress.Persistent.Base;
    using DevExpress.Persistent.BaseImpl;
    using DevExpress.Xpo;
    // ...
    public class SimpleObject : BaseObject { 
        public SimpleObject(Session session) 
            : base(session) { } 
        private string name;
        public string Name {
            get { return name; }
            set { SetPropertyValue("Name", ref name, value); }
  7. Rebuild your solution.
  8. Specify that the SimpleStringPropertyEditor should display the SimpleObject's Name property. For this purpose, invoke the Model Editor for the MySolution.Module.Mobile or MySolution.Mobile project and find the SimpleObject node in the BOModel. Navigate to the SimpleObject's Name member and set its PropertyEditorType property to SimpleStringPropertyEditor.


  9. Run the application. Now, the SimpleObject's Name property value is blue in View mode, which means that it is displayed using the SimpleStringPropertyEditor.