[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: 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 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]eXpress Persistent Objects
[Expand]CodeRush
[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: Implement Client-Side Logic in Mobile Applications

This topic demonstrates how to create an Action that runs JavaScript code in an XAF Mobile Client application and includes the following examples:

These examples use the Organization and Person classes from the Business Class Library (see the Add a Class from the Business Class Library (XPO/EF) topic).

Expanded Execute an Action on Client-Side without Requests to a Server

This section describes how to access a current object and its properties in JavaScript. This example demonstrates how to get a link specified in the Organization's WebPage property and open this link in a new browser window.

  1. Create a new ObjectViewController<ViewType, ObjectType> descendant called "OpenWebSiteController". Set the Controller's ViewType parameter to "DetailView" and the ObjectType parameter to "Organization".
  2. In the Controller's constructor, create a new SimpleAction and name it "OpenUrlAction".
  3. Declare a new OpenLinkScript string variable to store JavaScript. Use the $model.CurrentObject property to access the current object and get its WebSite property value (refer to the Ways to Customize a Mobile Application topic's Run a Script in a Client Application section to learn more about client-side Mobile API members.). Call the window.open method to open this website in a new browser window.
  4. Pass the script's name and code to the ActionBaseExtensions.RegisterClientScriptOnExecute method. The script runs when the OpenUrlAction is executed.

The code below demonstrates the OpenWebSiteController:

Run the application, open an Organization's Detail View and specify the WebSite property. Click the Open Web Site Action to execute the client-side script - the specified link is opened in a browser.

Expanded Execute an Action on Client-Side and Get a Property Value from a Server

This section describes how to get an object passed from the server and use it in a script on the client-side. The script gets the manager's email when an Organization's Detail View is shown. The script then opens the default mail client and creates a new message for this email address. For example, the manager is the Person object whose FirstName property is set to "Karl".

  1. Create a new ObjectViewController<ViewType, ObjectType> descendant called "SendFeedbackController" (as described in the Execute a Script on Client-Side without Requests to a Server section's first step).
  2. Override the OnViewControlsCreated method to access the current Frame only when its controls are created. Cast the Frame to the MobileWindow type and use the MobileWindow.ViewModelManager property to get the Frame's View Model (see the Ways to Customize a Mobile Application topic's Run a Script in a Client Application section).
  3. Use the IObjectSpace.FindObject method to get the Person object with the FirstName property set to "Karl".
  4. Pass the "organizationManagerEmail" string to the ClientModelManager.RegisterProperty method, thus adding the new property with the specified name to the View Model. Call its UpdatePropertyValue method (see ClientModelManager.UpdatePropertyValue). Pass the "organizationManagerEmail" property name as the method's first parameter, and the string that consists of the "mailto" substring and the Person's Email property value as the second parameter. This allows you to get the property value when the Organization's Detail View is shown.
  5. Create a new SendFeedbackScript string variable to store a JavaScript. Use the $model variable to access the organizationManagerEmail property and call the window.open method to open a mailto-format link in a new browser window. Refer to the Ways to Customize a Mobile Application topic's Run a Script in a Client Application section to learn more about the client-side Mobile API members.
  6. In the Controller's constructor, create a new SimpleAction and name it "SendFeedbackAction".
  7. Pass the script's name and code to the SendFeedbackAction's ActionBaseExtensions.RegisterClientScriptOnExecute method. The script runs when the SendFeedbackAction is executed.

The code below demonstrates the SendFeedbackController:

Run the application. Specify the Email property for "Karl", and then open the Organization object's Detail View. Click the Send Feedback Action to ensure that the client-side script is executed - a default mail client opens the form with a new message for the corresponding email address.

Expanded Execute an Action on Both Client-Side and Server-Side

This approach differs from one described in the Execute a Script on Client-Side and Make a Request to a Server section because additional code is run on the server-side when an Action is executed. This code adds a new record in the log file.

Modify the SendFeedbackController demonstrated in the Execute a Script on Client-Side and Make a Request to a Server section as follows:

  1. In the Controller's constructor, subscribe to the Action's Execute event.
  2. In this event handler, add a new record to the log file using the Tracer.LogText method.
  3. Specify the RegisterClientScriptOnExecute's second parameter with the script and value the ActionBaseExtensions.GetProcessActionOnServerScript method returns. In this case, the code from the Execute event's handler is executed on the server-side, and SendFeedbackScript is executed on the client-side.

The code below demonstrates the modified SendFeedbackController:

Expanded See Also

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