Current filter:
                                You should refresh the page.
                                Support Center
                                1
                                  • 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.

                                    Your feedback is needed!
                                    This is not an official feature of our Mobile UI (CTP) and our API may change in future release cycles. We are publishing this article prior to the 17.2 release to collect early user feedback and improve overall functionality. We would appreciate your thoughts on this feature once you've had the opportunity to review it. Please report any issues, missing capabilities or suggestions in separate tickets in our Support Center. Thanks for your help in advance!

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

                                    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, handle the MobileApplication.CustomizePhoneGapConfig event and manipulate the PhoneGapConfig property of the XDocument type as shown below:

                                    [C#]
                                    using System.Xml.Linq; //... namespace MainDemo.Mobile { public partial class MainDemoMobileApplication : MobileApplication { public MainDemoMobileApplication() { CustomizePhoneGapConfig += YourMobileApplication_CustomizePhoneGapConfig; //... } //... private void YourMobileApplication_CustomizePhoneGapConfig(object sender, CustomizePhoneGapConfigEventArgs e) { XElement root = e.PhoneGapConfig.Root; XNamespace phoneGapNamespace = "http://phonegap.com/ns/1.0"; root.Add(new XElement(phoneGapNamespace + "plugin", new XAttribute("name", "cordova-plugin-barcodescanner"), new XAttribute("source", "npm")), new XAttribute("spec", "0.7.0")); XElement cameraUsageDescription = new XElement("config-file", new XAttribute("platform", "ios"), new XAttribute("parent", "NSCameraUsageDescription"), new XAttribute("overwrite", "true")); cameraUsageDescription.Add(new XElement("string", "We are using the Camera for Bar Code Scan")); root.Add(cameraUsageDescription); } } }
                                    [VB.NET]
                                    Imports System.Xml.Linq '... Namespace MainDemo.Mobile Partial Public Class MainDemoMobileApplication Inherits MobileApplication Public Sub New() AddHandler CustomizePhoneGapConfig, AddressOf YourMobileApplication_CustomizePhoneGapConfig '... End Sub '... Private Sub YourMobileApplication_CustomizePhoneGapConfig(ByVal sender As Object, ByVal e As CustomizePhoneGapConfigEventArgs) Dim root As XElement = e.PhoneGapConfig.Root Dim phoneGapNamespace As XNamespace = "http://phonegap.com/ns/1.0" root.Add(New XElement(phoneGapNamespace + "plugin", New XAttribute("name", "cordova-plugin-barcodescanner"), New XAttribute("source", "npm")), New XAttribute("spec", "0.7.0")) Dim cameraUsageDescription As New XElement("config-file", New XAttribute("platform", "ios"), New XAttribute("parent", "NSCameraUsageDescription"), New XAttribute("overwrite", "true")) cameraUsageDescription.Add(New XElement("string", "We are using the Camera for Bar Code Scan")) root.Add(cameraUsageDescription) 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!!

                                0 Solutions

                                Creation Date Rating Importance Sort by

                                If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2017 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners