Hello, will the 20.1 release support any method to allow external plugins like in this https://community.devexpress.com/blogs/xaf/archive/2017/06/29/how-to-use-a-barcode-scanner-in-xaf-mobile.aspx ?
Thank you, Paolo
XAF Blazor - How to implement a QR / barcode scanner using a camera of a mobile device
Answers approved by DevExpress Support
Hi all,
the solution is simply based on this ticket https://supportcenter.devexpress.com/ticket/details/t943982 and others.
Basically, I've created a custom View Item for the "cam open" button, then I added the custom View Item to a Dashboard View.
BarcodeCamDVI
C#using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;
using Microsoft.AspNetCore.Components;
using System;
namespace MyProject.Module.Blazor.Editors
{
public interface IModelBarcodeCamDVI : IModelViewItem { }
[ViewItem(typeof(IModelBarcodeCamDVI))]
public class BarcodeCamDVI : ViewItem
{
public class DxButtonHolder : IComponentContentHolder
{
private readonly View currentView;
public DxButtonHolder(View _currentView)
{
this.currentView = _currentView;
}
RenderFragment IComponentContentHolder.ComponentContent => RazorComponents.BarcodeCamButton.Create(currentView);
}
public BarcodeCamDVI(IModelViewItem model, Type objectType) : base(objectType, model.Id) { }
protected override object CreateControlCore() => new DxButtonHolder(this.View);
}
}
ArticoloGetInvokeHelper
C#using Microsoft.JSInterop;
using System;
namespace MyProject.Module.Blazor.Editors
{
public class ArticoloGetInvokeHelper
{
private Action<SearchItemArticolo> action;
public ArticoloGetInvokeHelper(Action<SearchItemArticolo> action)
{
this.action = action;
}
[JSInvokable]
public void SearchRecordCaller(SearchItemArticolo param)
{
this.action.Invoke(param);
}
}
public class SearchItemArticolo
{
public string Barcode { get; set; }
}
}
Next, I created a new Navigation Item for the Dashboard View, and a razor component containing the gallery and the DxButton elements:
BarcodeCam.razor
Razor...
<h3>BarcodeCamButton</h3>
<DxButton Text="Apri Fotocamera" Click="Button_Click" />
<div id="gallery"></div>
<div id="scanStatus"></div>
...
@code {
[Parameter]
public View View { get; set; }
private IObjectSpace objectSpace;
//
protected async void Button_Click(MouseEventArgs e)
{
var app = ApplicationProvider.GetApplication();
IList<Articolo> Articoli = objectSpace.GetObjects<Articolo>();
await JSRuntime.InvokeVoidAsync("ScannerFunctions.StartCamStreaming", DotNetObjectReference.Create(articoloGetInvokeHelper));
}
private Editors.ArticoloGetInvokeHelper articoloGetInvokeHelper;
//
protected override void OnInitialized()
{
articoloGetInvokeHelper = new Editors.ArticoloGetInvokeHelper(SearchRecord);
}
//
protected override async Task OnAfterRenderAsync(bool firstRender)
{
objectSpace = View.ObjectSpace;
}
//
private async void SearchRecord(Editors.SearchItemArticolo param)
{
//var obj = objectSpace.GetObjectByKey<Articolo>(param.Key);
var obj = objectSpace.GetObjects<Articolo>().FirstOrDefault(a => a.Barcode == param.Barcode);
if (obj == null)
{
await JSRuntime.InvokeVoidAsync("ScannerFunctions.ShowScanStatus", $"Barcode {param.Barcode} not found");
return;
}
var app = ApplicationProvider.GetApplication();
IObjectSpace objSpace = app.CreateObjectSpace(typeof(Articolo));
Articolo art = objSpace.GetObject<Articolo>(obj);
if (art != null)
{
DetailView createdView = app.CreateDetailView(objSpace, art);
createdView.ViewEditMode = ViewEditMode.View;
app.MainWindow.SetView(createdView);
}
}
//
void IDisposable.Dispose()
{
objectSpace?.Dispose();
}
public static RenderFragment Create(View view) =>@<BarcodeCamButton View=@view />;
...
}
Finally, in the Javascript code I implemented the cam functions (start, close, restart etc.) using (in my case) the external library ZXing:
https://github.com/zxing-js/browser
The gallery content (cam streams) come from Navigator.mediaDevices:
JavaScriptvar gallery = [];
navigator.mediaDevices.enumerateDevices().then(function (devices) {
...
for (var i = 0; i < devices.length; i++) {
gallery.push(devices[i]);
}
...
$("#gallery").dxGallery({
dataSource: gallery,
...
});
If you are interested, I could try to create a sample project with this functionality and share it with you (after correcting and fixing all the code I have implemented now ;)) or enrich the synthetic explanation above.
Ps: ciao Paolo, sì sono italiano! :D
Best regards!
Hello Emanuele,
I have tried it: quite smart your implementation!
You have added a great feature to XAF.
Thank you very much, Paolo
Hello Paolo,
Thanks for your interest in XAF's Blazor UI.
You can implement the same standard solutions you would use for this task in a non-XAF ASP.NET Core Blazor Server app. For instance, there are plenty of JavaScript options if you search for this in public community resources like GitHub, Stack Overflow, etc.: https://www.google.com/search?q=javascript+barcode+scanner+site%3Agithub.com
XAF is an extendable framework: it allows and will always allow integrating various standard, DevExpress, or third-party UI components - we have no limits here. If you encounter certain repeating tasks or experience issues, we will certainly be happy to learn more from you to offer a custom solution today or consider enhancements for common tasks tomorrow. This is the nature of our framework evolution and it will certainly continue in the future.
See Also
XAF's Blazor UI FAQ: Integrate Custom Components
Hi,
I would like to put a vote for this as well, just to stay on the radar once more important functionality is implemented.
Best regards,
Mario
Hi Paolo,
I saw your recent feedback on XAF's Blazor integration and wanted to verify if you have any comments on my previous questions. With that, we will be in a better position to shape our development plans and better meet your needs. Thank you for your time in advance.
Hello Dennis,
I think that XAF’s Blazor integration would be really a major breakthrough to develop office application of small to medium complexity, but first of all we need to have access to all of the XAF standard modules (from my personal point of view the missing of conditional appearance is a bad gap).
Next thing is the possibility to have full advantage of mobile devices: I see everyday new mini ERP-like suites that are win/web based and let you for example upload camera picture from the app running on a mobile device to complete the order entry.
I do understand and agree that DX is doing a great job (and I really appreciate that), but we need a platform that let us think more about how to simplify our end user daily job than how to solve RAD tool limitation.
Please do not think that I am not satisfied with your product: I just would like you to know what would let me really say “Wow!!! That’s really what I needed!!!”.
Best regards, Paolo
Hello Paolo,
I appreciate your feedback. The ConditionalAppearance module is already on the roadmap. The upcoming v20.1 update will include improved data validation, which I hope you will like too.
Modern web lets you use mobile devices. For instance, it is already possible to upload images from camera using our demo (image and file attachment editors). The same goes for location, etc.

I want to emphasize that XAF's Blazor UI is in preview in v20.1 and a lot of work still needs to be done before it is mature. Feel free to share your other most important requirements - we will be happy to consider them or the first release at the end of this year.
Hello Dennis,
Are there any updates on a barcode (1D) scanner for XAF?
For info:
Our current route would be to use Bluetooth scanner with text input or image upload with scan recognition (spire.barcode or zxing) both not optimal for Blazor / mobile first approach.
Kind Regards,
Simply Genius
@Simply Genius: Would you please clarify what kind of update you expected?
We have not planned barcode scanner support in XAF 2021. You can implement the same standard solutions you would use for this task in a non-XAF ASP.NET Core Blazor Server app. For instance, there are plenty of JavaScript options if you search for this in public community resources like GitHub, Stack Overflow, etc.: https://www.google.com/search?q=javascript+barcode+scanner+site%3Agithub.com
XAF is an extendable framework: it allows and will always allow integrating various standard, DevExpress, or third-party UI components - we have no limits here.
If you encounter certain repeating tasks or experience issues, we will certainly be happy to learn more from you to offer a custom solution today or consider enhancements for common tasks tomorrow. This is the nature of our framework evolution and it will certainly continue in the future.
Dennis, I support this post. In our hospital we can use the functionality of barcode scanner support within XAF greatly when we do stock takes. For me the ideal solution will be to use the build in camera on an android phone.
Regards
Armand
@Armand: Thank you for informing us of your requirements. I would be happy to hear your feedback on JavaScript options available on public community resources once you have an opportunity to research and integrate them into XAF's Blazor Server app as part of a custom View Item/Property Editor/Action. As a rule of thumb, we recommend that you first implement this JavaScript solution in a standard ASP.NET Web Forms app – XAF integration will be much easier after.
Hi all, I've created an application that read a barcode and open the related product, as you can see in the attached video. With a specific javascript library and the DxGalley component is relative simple to implement a barcode scanner in a XAF Blazor app ;)
Hi Emanuele,
Thank you for your reply. We will appreciate it if you can share your solution or more detailed steps/tricks to implement this usage scenario. This will help other users who may encounter this issue.
Thanks,
Stanley
Hello Emanuele,
that is really nice!!!
Could you explain how you managed that?
Thank you, Paolo
PS: sei italiano?