[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Collapse]eXpressApp Framework
 [Expand]Getting Started
 [Expand]Design-Time Features
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Scheduler and Notifications
  [Expand]Maps Module
  [Collapse]Miscellaneous UI Customizations
    How to: Add a Button to a Detail View Using a Custom View Item
    How to: Add an XAF Mobile Custom Module
    How to: Adjust the Size and Style of Pop-up Dialogs (ASP.NET)
    How to: Adjust the Windows' Size and Style
    How to: Change an Application Logo and Info
    How to: Create a Custom Control Detail Item
    How to: Customize a Window Caption
    How to: Customize ASP.NET Layout Elements Using Custom CSS Classes
    How to: Customize Export Options of the Printing System
    How to: Customize the Conditional Appearance Module Behavior
    How to: Customize Window Status Messages (WinForms)
    How to: Enable High DPI Support in a WinForms Application
    How to: Implement a Custom Messaging Class
    How to: Implement Client-Side Logic in Mobile Applications
    How to: Include an Action to a Detail View Layout
    How to: Raise XAF Callbacks from Client-Side Events and Process these Callbacks on Server
    How to: Set Images and Captions for Enumeration Values
    How to: Show a Custom Window with an Embedded XAF View
    How to: Show a Custom Windows Form
    How to: Use a Custom Plugin in a Mobile Application
    How to: Use a DevExtreme Chart in a Mobile Application
    How to: Use Custom Themes in ASP.NET Applications
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Add an XAF Mobile Custom Module

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:

  5. In the MySolution.Module.Mobile | Editors folder, create the SimpleStringViewer class that is a CustomComponent descendant, and the SimpleStringPropertyEditor Property Editor for it:

    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:

  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.

Is this topic helpful?​​​​​​​