Current filter:
                                You should refresh the page.
                                  • -----------------------------------------------
                                    The Mobile UI is in maintenance mode. However, our installation still includes the Mobile UI. We continue to provide support and fix critical bugs, but we do not create new features. Once the new SPA UI is mature, it should cover all the Mobile UI scenarios and also provide new functionality. Refer to the New XAF HTML5/JavaScript SPA UI for Web & Mobile (CTP) KB article for more information on the SPA UI.
                                    -----------------------------------------------
                                    We've created a KB article that describes how to scan barcodes in your XAF mobile application using the Cordova Barcode Scanner plugin. In this KB article, we'll show you how to implement an Action in a DetailView to save a scanned barcode to a current object property. Additionally, you will learn how to access the PhoneGap config file (regular XML file), add the plugin to your application and get access to the camera functionality with it.

                                    Prerequisites
                                    Install any v17.2.3+ version.
                                    The implementation steps below are given for our MainDemo app available at "C:\Users\Public\Documents\DevExpress Demos 17.2\Components\eXpressApp Framework\MainDemo\CS\MainDemo.sln", though they can be applied to any other XAF mobile app.

                                    UPDATED (July 23, 2018):

                                    1. The Cordova Barcode Scanner plugin utilized in this article has been discontinued. For possible solution, refer the Mobile - Application cannot be built in PhoneGap when Cordova Barcode Scanner plugin is used ticket.
                                    2. When you upgrade this example to v18.1+, be sure to add the DevExpress.XtraReports.Web assembly reference.

                                    Steps to implement
                                    1.  Add the Cordova Barcode Scanner plugin to the XAF mobile application using the PhoneGap config file.
                                    For this, in the MainDemo.Mobile/MobileApplication.cs file, append additional config lines to the MobileApplication.AdditionalPhoneGapPlugins property as shown below:

                                    [C#]
                                    using System.Xml.Linq; using System.Linq; //... namespace MainDemo.Mobile { public partial class MainDemoMobileApplication : MobileApplication { public MainDemoMobileApplication() { //... InitAdditionalPhoneGapPlugins(); //... } //... private void InitAdditionalPhoneGapPlugins() { AdditionalPhoneGapPlugins.Add("<gap:plugin name=\"cordova-plugin-barcodescanner\" source=\"npm\" />"); AdditionalPhoneGapPlugins.Add("<config-file platform=\"ios\" parent=\"NSCameraUsageDescription\" overwrite=\"true\">"); AdditionalPhoneGapPlugins.Add("<string>We are using the Camera for Bar Code Scan</string>"); AdditionalPhoneGapPlugins.Add("</config-file>"); AdditionalPhoneGapPlugins.Add("<config-file target=\"AndroidManifest.xml\" parent=\"/*\" mode=\"merge\">"); AdditionalPhoneGapPlugins.Add("<uses-permission android:name=\"android.permission.CAMERA\" />"); AdditionalPhoneGapPlugins.Add("<uses-feature android:name=\"android.hardware.camera\" />"); AdditionalPhoneGapPlugins.Add("<uses-feature android:name=\"android.hardware.camera.autofocus\" />"); AdditionalPhoneGapPlugins.Add("</config-file>"); } } }
                                    [VB.NET]
                                    Imports System.Xml.Linq Imports System.Linq '... Namespace MainDemo.Mobile Public Partial Class MainDemoMobileApplication Inherits MobileApplication Public Sub New() '... '... InitAdditionalPhoneGapPlugins() End Sub '... Private Sub InitAdditionalPhoneGapPlugins() AdditionalPhoneGapPlugins.Add("<gap:plugin name=""cordova-plugin-barcodescanner"" source=""npm"" spec=""0.7.4"" />") AdditionalPhoneGapPlugins.Add("<config-file platform=""ios"" parent=""NSCameraUsageDescription"" overwrite=""true"">") AdditionalPhoneGapPlugins.Add("<string>We are using the Camera for Bar Code Scan</string>") AdditionalPhoneGapPlugins.Add("</config-file>") AdditionalPhoneGapPlugins.Add("<config-file target=""AndroidManifest.xml"" parent=""/*"" mode=""merge"">") AdditionalPhoneGapPlugins.Add("<uses-permission android:name=""android.permission.CAMERA"" />") AdditionalPhoneGapPlugins.Add("<uses-feature android:name=""android.hardware.camera"" />") AdditionalPhoneGapPlugins.Add("<uses-feature android:name=""android.hardware.camera.autofocus"" />") AdditionalPhoneGapPlugins.Add("</config-file>") End Sub End Class End Namespace

                                    2.  Create a new ViewController with the Scan Action for the Contact_DetailView to scan a barcode and save the scan result in the Contact's Email, WebPageAddress or other string properties.
                                    For this, in the MainDemo.Mudule.Mobile project, add a code file with the following content:

                                    [C#]
                                    using DevExpress.ExpressApp; using DevExpress.ExpressApp.Actions; using DevExpress.Persistent.Base; using MainDemo.Module.BusinessObjects; namespace MainDemo.Module.Mobile.Controllers { public class BarCodeScanController : ObjectViewController<DetailView, Contact> { public const string EnabledInEditMode = "EnabledInEditMode"; private SimpleAction scanBarCodeAction; public BarCodeScanController() { scanBarCodeAction = new SimpleAction(this, "Scan", PredefinedCategory.Edit); scanBarCodeAction.ImageName = "Photo"; scanBarCodeAction.RegisterClientScriptOnExecute("ScanScript", GetBarCodeClientScript()); } protected override void OnActivated() { base.OnActivated(); scanBarCodeAction.Enabled[EnabledInEditMode] = View.ViewEditMode == DevExpress.ExpressApp.Editors.ViewEditMode.Edit; } protected string GetBarCodeClientScript() { return @"if (cordova && cordova.plugins && cordova.plugins.barcodeScanner) { cordova.plugins.barcodeScanner.scan( function (scanResult) { if (!scanResult.cancelled) { $model.CurrentObject.Email = scanResult.text; //!!! } }, function(scanError) { DevExpress.ui.notify({ closeOnClick: true, message: scanError, type: 'error' }, 'error', 5000); } ); }"; } public SimpleAction ScanBarCodeAction { get { return scanBarCodeAction; } } } }
                                    [VB.NET]
                                    Imports Microsoft.VisualBasic Imports DevExpress.ExpressApp Imports DevExpress.ExpressApp.Actions Imports DevExpress.Persistent.Base Imports MainDemo.Module.BusinessObjects Namespace MainDemo.Module.Mobile.Controllers Public Class BarCodeScanController Inherits ObjectViewController(Of DetailView, Contact) Public Const EnabledInEditMode As String = "EnabledInEditMode" Private scanBarCodeAction_Renamed As SimpleAction Public Sub New() scanBarCodeAction_Renamed = New SimpleAction(Me, "Scan", PredefinedCategory.Edit) scanBarCodeAction_Renamed.ImageName = "Photo" scanBarCodeAction_Renamed.RegisterClientScriptOnExecute("ScanScript", GetBarCodeClientScript()) End Sub Protected Overrides Sub OnActivated() MyBase.OnActivated() scanBarCodeAction_Renamed.Enabled(EnabledInEditMode) = View.ViewEditMode = DevExpress.ExpressApp.Editors.ViewEditMode.Edit End Sub Protected Function GetBarCodeClientScript() As String Return "if (cordova && cordova.plugins && cordova.plugins.barcodeScanner) { " & ControlChars.CrLf & _ " cordova.plugins.barcodeScanner.scan( " & ControlChars.CrLf & _ " function (scanResult) { " & ControlChars.CrLf & _ " if (!scanResult.cancelled) { " & ControlChars.CrLf & _ " $model.CurrentObject.Email = scanResult.text; " & ControlChars.CrLf & _ " } " & ControlChars.CrLf & _ " }, " & ControlChars.CrLf & _ " function(scanError) { " & ControlChars.CrLf & _ " DevExpress.ui.notify({ closeOnClick: true, message: scanError, type: 'error' }, 'error', 5000); " & ControlChars.CrLf & _ " } " & ControlChars.CrLf & _ " );" & ControlChars.CrLf & _ " }" End Function Public ReadOnly Property ScanBarCodeAction() As SimpleAction Get Return scanBarCodeAction_Renamed End Get End Property End Class End Namespace

                                    If the target property is not visible in the layout by default, show it as described here and modify this JavaScript code line to use the required property name instead of Email:

                                    [JavaScript]
                                    $model.CurrentObject.Email = scanResult.text; //!!!

                                    UPDATED:
                                    The SetClientScript method demonstrated in the previous hot fix build was removed and replaced with the RegisterClientScriptOnExecute one in v17.1.5+. The link to a hot fix build is updated.

                                    3.  Follow the Install the Application to a Smartphone  help topic to deploy your XAF mobile application service to a public server, create and download the application configuration ZIP file and finally build the native mobile application using PhoneGap and install it to your mobile device.

                                    Once you get your mobile app running on your actual device, open the Contact List View, create a new Contact or edit an existing one. In the Detail View, click the Scan button and scan the barcode below:


                                    A text from this QR code (support@devexpress.com) will be placed in the Email  field of this detail view, as demonstrated in the image below:

                                    You will find a modified C# version of our MainDemo in the attachment (BarCodeMobile_CS.zip).

                                    See Also:
                                    eXpressApp Framework > Getting Started > XAF Mobile (CTP) Tutorial
                                    XAF Mobile - Overview Video
                                    FAQ: New XAF HTML5/JavaScript mobile UI (CTP)
                                    How to send push notifications to the XAF Mobile application using Azure Notifications Hub
                                    How to use a Background Geolocation in XAF Mobile

                                • Achmad Mulyadi 07.03.2017

                                  Voila, it's coming... I'll try this feature once I get back from my vacation. Keep it up guys!!

                                • Phan Sin Tian 11.26.2017

                                  The code work well in 17.1 but after upgrade to 17.2 i got the following error when build

                                  1>------ Rebuild All started: Project: MainDemo.Module, Configuration: Debug Any CPU ------
                                  1>  MainDemo.Module -> E:\Code\BarCodeMobile_CS\MainDemo.Module\bin\Debug\MainDemo.Module.dll
                                  2>------ Rebuild All started: Project: MainDemo.Module.Mobile, Configuration: Debug Any CPU ------
                                  2>  MainDemo.Module.Mobile -> E:\Code\BarCodeMobile_CS\MainDemo.Module.Mobile\bin\Debug\MainDemo.Module.Mobile.dll
                                  3>------ Rebuild All started: Project: MainDemo.Mobile, Configuration: Debug Any CPU ------
                                  3>E:\Code\BarCodeMobile_CS\MainDemo.Mobile\MobileApplication.cs(122,71,122,81): error CS0234: The type or namespace name 'Validation' does not exist in the namespace 'DevExpress.ExpressApp.Mobile' (are you missing an assembly reference?)
                                  ========== Rebuild All: 2 succeeded, 1 failed, 0 skipped ==========

                                • Alexander N (DevExpress) 11.27.2017

                                  Hello,

                                  I am afraid that we do not have an immediate answer. I have passed this ticket to our team for further research. Please bear with us, we will get back to you as soon as possible.

                                • Uriah (DevExpress Support) 11.27.2017

                                  Hello Phan,

                                  To process this issue, we've created a separate ticket on your behalf: T581139: The solution provided in the T530459 article causes compilation errors after upgrade to version 17.2). We will reply in that ticket as soon as we find the solution. Please bear with us.

                                • Anatol (DevExpress Support) 07.23.2018

                                  Currently, if you rebuild your Mobile application on PhoneGap, you will likely encounter the following issue: Mobile - Application cannot be built in PhoneGap when Cordova Barcode Scanner plugin is used. See possible solutions there.

                                0 Solutions

                                Creation Date Importance Sort by