Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[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]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Collapse]eXpressApp Framework
 [Expand]Fundamentals
 [Expand]Getting Started
 [Expand]Concepts
 [Expand]Design-Time Features
 [Expand]Deployment
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]Actions
  [Expand]Navigation
  [Expand]Views
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Templates
  [Expand]Filtering
  [Expand]Reporting
  [Expand]Dashboards
  [Expand]Scheduler and Notifications
  [Expand]Maps
  [Expand]Security
  [Expand]Workflow
  [Expand]Localization
  [Expand]Testing
  [Collapse]Miscellaneous UI Customizations
    How to: Add a Button to a Detail View Using 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: 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 Custom Splash Screen
    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]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
This documentation page describes implementations made in our v17.2 release cycle. To learn about functionality shipping with v18.1, navigate to our updated help file experience at 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.

    Note

    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 CustomConponent'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?​​​​​​​