The Library asna-qsys-expo-barcodes is the Client-side Barcode Detection support for Monarch Applications.
The Library may be used by either:
- Monarch Base Clients.
- Monarch Framework 11.1 Clients
For all supported Clients, the Library is delivered to the Application website using a Libman JSON configuration file.
The reference to the Library as well as the supporting CSS is added to the ASP.NET in a slightly different way.
Please refer to the appropriate ASP.NET version below:
A. Monarch Base Clients
Monarch Base clients already contain a libman.json file to restore the Client Side Content.
In addition to the Basic Expo Web Content, the Expo Barcodes Web Content needs to be added to the libraries needed to be delivered (or restored - using dotnet terminology -) to the website.
This is done by adding a new JSON entry into the libraries array property.
The modified libman.json file looks like the following :
{
"version": "1.0",
"libraries": [
{
"provider": "jsdelivr",
"library": "asnaqsys/asna-qsys-expo-web-content@5.0.3",
"destination": "wwwroot/lib/asna-expo",
"files": [
"**/*", "!.github/**/*", "!css/*.min.*", "!js/*.min.*", "!js/**/*.min.*"
]
},
{
"provider": "jsdelivr",
"library": "asnaqsys/asna-qsys-expo-barcodes@5.0.0",
"destination": "wwwroot/lib/asna-expo",
"files": [
"**/*", "!.github/**/*", "!css/*.min.*", "!js/*.min.*", "!js/**/*.min.*"
]
}
]
}Note: Library
asnaqsys/asna-qsys-expo-barcodeshas been added to thelibrariesarray (same destination asasna-qsys-expo-web-content).
When the Website is re-built, the new asnaqsys/asna-qsys-expo-barcodes files will appear on the website.
For the Razor Pages to reference the barcode CSS and the JavaScript support,
the _Layout.cshtml file needs to be updated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="google" content="notranslate" />
<title>@ViewData["Title"] - ExpoSite</title>
<link rel="stylesheet" href="~/lib/asna-expo/css/expo.css" />
<link rel="stylesheet" href="~/lib/asna-expo/css/barcodes.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
@RenderBody()
<script type="module">
import { Barcodes } from '../lib/asna-expo/js/barcode-detection/barcode-field.js';
import { Page } from '../lib/asna-expo/js/asna.js';
Barcodes.init({ formId: 'MonarchForm' });
Page.init({ formId: 'MonarchForm' });
</script>
@RenderSection("Scripts", required: false)
</body>
</html>Notes:
a) A new reference to CSS was added in the head HTML:
<link rel="stylesheet" href="~/lib/asna-expo/css/barcodes.css" />
b) A new symbol Barcodes has been imported inside the module script section at the bottom:
import { Barcodes } from '../lib/asna-expo/js/barcode-detection/barcode-field.js';
c) A call to initialize the Barcode engine has been added inside the script section:
Barcodes.init({ formId: 'MonarchForm' });
B. Monarch Framework 11.1 Clients.
Applications using Monarch Monarch Framework 11.1 do not use the libman Web-content delivery mechanism (rather use JavaScript injected at runtime stored in the WebDspf.dll assembly as static resources ).
To enable libman, create a new text-file (using file extension .json) at the root of the Website project in Visual Studio 2022 (or later). Add the following contents to this new file:
Libman.json:
{
"version": "1.0",
"libraries": [
{
"provider": "jsdelivr",
"library": "asnaqsys/asna-qsys-expo-web-content@5.0.3",
"destination": "lib/asna-expo/",
"files": [
"js/asna-data-attr.js",
"js/base-64.js",
"!.github/**/*",
"!css/*.min.*",
"!js/*.min.*",
"!js/**/*.min.*"
]
},
{
"provider": "jsdelivr",
"library": "asnaqsys/asna-qsys-expo-barcodes@5.0.0",
"destination": "lib/asna-expo",
"files": [
"**/*",
"!.github/**/*",
"!css/*.min.*",
"!js/*.min.*",
"!js/**/*.min.*"
]
}
]
}As soon as you save the new file, the asna-qsys-expo-barcodes web contents will be restored to your local file system.
You can Enable Restore on Build following the easy steps on this link.
For the ASPX Pages that will contain Barcode Reader Web Controls the following CSS style class needs to be defined, to complete the style for the camera video-frame viewer, which will apear while the barcode is being scanned.
<style>
.dds-field-barcode-video-frame {
position: absolute;
left:0px;
top: 50%;
transform: translateY(-50%);
}
</style>Note: If more than one Page will contain Barcode Reader Web controls, this style can be added to the ASPX MasterPage or to the user-defined
site.cssthat the Application uses to define the Application global style.
For the ASPX Pages that will contain Barcode Reader Web Controls the script reference should be added at the end of the Page:
<script type="module">
import { Barcodes } from '../../lib/asna-expo/js/barcode-detection/barcode-field.js';
Barcodes.init({ formId: 'form1' });
</script>Note: If more than one Page will contain Barcode Reader Web Controls, this script reference can be added to the ASPX MasterPage. When adding the script to the MasterPage, Pages that do not use Barcode scanning feature will be unaffected.