Quick Response (QR) Codes are a popular type of two-dimensional barcode. They are also known as hard links or physical world hyperlinks. QR Codes store up to 4,296 alphanumeric characters of arbitrary text. This text can be anything, for example, a URL, contact information, a telephone number, or even a poem! QR codes can be read by an optical device with the appropriate software. Such devices range from dedicated QR code readers to mobile phones. In this video, you will learn the use of QR codes in your Oracle APEX applications.
Generating QR Code Manually
In the following initial steps, the QR Code will be generated after clicking a button.
1. Download SourceCode, Open the QRcode folder, and import the QRCode.sql plug-in into your application.
2.
Create a blank page and add a region with the following attributes.
The region will generate the manual QR code.
|
Property |
Value |
|
Title |
Manual
QR Code |
|
Type |
Static
Content |
|
Custom Attribute |
style="background-color: rgba(255,255,255,0.05);" |
3.
Add a Text Field item to the page using the following attributes.
The text you enter in this item will be transformed into a QR code.
|
Property |
Value |
|
Name |
P14_INPUT_TEXT (my page
number is 14) |
|
Type |
Text
Field |
|
Label |
Enter
Text: |
|
Region |
Manual
QR Code |
|
Default Type |
Static |
|
Static Value |
Submit
Text |
4.
Add one more page item for the plug-in using the
following attributes. The plug-in will use the P14_INPUT_TEXT item’s value as
its source.
|
Property |
Value |
|
Name |
P14_PLUGIN |
|
Type |
QR
Code Item [Plug-In] |
|
Label |
No label |
|
Region |
Manual
QR Code |
|
Source Type |
Item |
|
Source Item |
P14_INPUT_TEXT |
|
Used |
Always,
replacing any existing value in session state |
5.
Add a button to the region as follows. The QR code will be generated
after clicking this button.
|
Property |
Value |
|
Button Name |
SUBMIT |
|
Label |
Submit
Text |
|
Region |
Manual
QR Code |
|
Button Position |
Copy |
|
Hot |
Yes |
|
Action |
Submit
Page |
Save and run the page,
which will appear with a default value (Submit Text) in the sole text field
page item along with the generated QR code. Type some other text in the text
field item and hit the Submit Text button. The QR code will be refreshed for
the newly entered text.
Generating QR Code Dynamically
Execute the following steps to use the same QR code plug-in to generate the code dynamically. In this tutorial, you will create a dynamic action to generate the code. Here’re the steps:
1.
Add another region to the same page with the following attributes:
|
Property |
Value |
|
Title |
Dynamic
QR Code |
|
Type |
Static
Content |
|
Custom Attribute |
style="background-color: rgba(255,255,255,0.05);" |
2.
Add a text field item to the region, as follows:
|
Property |
Value |
|
Name |
P14_DYNAMIC_TEXT
|
|
Type |
Text
Field |
|
Label |
Enter
Text: |
|
Region |
Dynamic
QR Code |
3.
Add the following item to hold the plug-in:
|
Property |
Value |
|
Name |
P14_DYNAMIC_PLUGIN |
|
Type |
QR
Code Item [Plug-In] |
|
Label |
No label |
|
Color |
#000077 |
|
Region |
Dynamic
QR Code |
4.
Finally, create the following dynamic action to generate the QR code dynamically.
|
Property |
Value |
|
Name |
Generate
QR Code |
|
Event |
Key
Release |
|
Selection Type |
Item(s) |
|
Item(s) |
P14_DYNAMIC_TEXT |
|
Action |
Execute
JavaScript Code |
|
Code |
renderQR_P14_DYNAMIC_PLUGIN($x("P14_DYNAMIC_TEXT").value); |
Save and run the page.
As you start to enter some value in the text field item, the QR code gets
updated by the dynamic action.
Generating a Dynamic QR Code List
Let's move a step
forward to address a real-world scenario. In this step, you will create a
dynamic list of QR codes (as shown in Figure-2) for all the products in the
DEMO_PRODUCT_INFO table in Object Browser. The QR codes will store product ids.
Here’re the steps to follow:
1.
Create a new interactive report page using the following SQL query:
SELECT p.product_id,
p.product_name,
p.product_description,
p.category,
decode(p.product_avail, 'Y','Yes','N','No') product_avail,
p.list_price,
p.list_price as qr_code,
(select sum(quantity) from demo_order_items where product_id = p.product_id) units,
(select sum(quantity * p.list_price) from demo_order_items where product_id = p.product_id) sales,
(select count(o.customer_id) from demo_orders o, demo_order_items t
where o.order_id = t.order_id and t.product_id = p.product_id group by p.product_id) customers,
(select max(o.order_timestamp) od from demo_orders o, demo_order_items i where o.order_id =
i.order_id and i.product_id = p.product_id) last_date_sold, p.product_id img,
apex_util.prepare_url(p_url=>'f?p='||:app_id||':6:'||:app_session||
'::::P6_PRODUCT_ID:'||p.product_id) icon_link,
decode(nvl(dbms_lob.getlength(p.product_image),0),0,null,
'<img alt=" '||p.product_name||' " title=" '||p.product_name||' " style="border: 4px solid #CCC;
-moz-border-radius: 4px; -webkit-border-radius: 4px;" '||
'src=" '||apex_util.get_blob_file_src('P6_PRODUCT_IMAGE',p.product_id)||' " height="75"
width="75" />') detail_img,
decode(nvl(dbms_lob.getlength(p.product_image),0),0,null,
apex_util.get_blob_file_src('P6_PRODUCT_IMAGE',p.product_id)) detail_img_no_style
FROM demo_product_info p
2.
In Page Designer, expand the Columns node and click on the PRODUCT_IMAGE column. Set the following
attributes for this column. The Display Image type enables the column to show
images. The PRODUCT_IMAGE BLOB column is the
column that contains the images you want to show on the page.
|
Property |
Value |
|
Type |
Display
Image |
|
Table Name |
DEMO_PRODUCT_INFO |
|
BLOB Column |
PRODUCT_IMAGE |
|
Primary Key Column 1 |
PRODUCT_ID |
3.
Click the QR_CODE
column, and enter the following code in its HTML
Expression property:
<div id="#PRODUCT_ID#" class="qrcode" qrcodedata="#PRODUCT_ID#"></div>
4.
Create a dynamic action using the following properties and values.
|
Property |
Value |
|
Name |
Generate
QR Code List |
|
Event |
Before
Refresh |
|
Selection Type |
Region |
|
Region |
QR Code List |
|
Action |
Execute
JavaScript Code |
|
Code |
$('.qrcode').each(function(){ var qrcode = new QRCode ($(this).attr('id'),{ text: $(this).attr('qrcodedata'), width: 80, height: 80, colorDark:
"#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); }); |
|
Fire on Initialization |
Yes |
5. Go to Shared Components, and upload qrcode.min.js file using the Static Application Files option from the SourceCode\QRcode folder. It is a JavaScript library for generating QRCode. It allows you to easily add QRCode to your web pages. It is standalone and doesn’t rely on external services that go on and off, or add latency while loading.
6. Finally, add a reference to the JS file. Click the root node of your page. In the Properties pane, scroll down to the JavaScript section, and type #APP_IMAGES#qrcode.min.js in the File URLs property.
Save and run the page,
which should resemble Figure-2. The QR codes are ready to be used on products.
You can scan these
codes with the help of optical devices or smartphones to retrieve details from
the database, and this is what you are going to do in the next step.
Scanning QR Code
After generating QR codes in your application and using them on your products, you will definitely need a solution that enables you to scan and retrieve information from these codes. The instructions provided in this section will allow you to integrate a QR Code scanner plug-in into your application. With the help of this plug-in, you can scan QR codes via an optical device, smartphone, or laptop to get details held in these codes, as shown in Figure-3.
Execute the following steps to complete the task.
1.
Go to Shared Components and import QRCodeScanner.sql plug-in from \SourceCode\QRcode folder.
2.
Create a Blank page, and name it QR Code Scanner.
3.
Add a region to the page to hold the plug-in, and set the following attributes for this region:
|
Property |
Value |
|
Title |
QR
Code Scanner |
|
Type |
APEX
QR Code Scanner [Plug-In] |
|
Set Mode (under Attributes) |
Set
APEX Item |
|
Item that is set |
P19_QRCODE |
4.
Add a Page Item, and set the following properties. The item will
display the product id extracted from the QR Code.
|
Property |
Value |
|
Name |
P19_QRCODE |
|
Type |
Display
Only |
|
Label |
QR
Code |
|
Template |
Optional
- Floating |
5.
Add a second-page item to display the product name.
|
Property |
Value |
|
Name |
P19_PRODUCT_NAME |
|
Type |
Display
Only |
|
Label |
Product |
|
Template |
Optional
- Floating |
6.
Add one more page item to display the product price.
|
Property |
Value |
|
Name |
P19_LIST_PRICE |
|
Type |
Display
Only |
|
Label |
Price |
|
Template |
Optional
- Floating |
7.
Create a dynamic action using the following properties and values. The
dynamic action will fetch the product name and price based on the scanned QR Code,
which carries the ids of the products.
|
Property |
Value |
|
Name |
Generate
Product Info |
|
Event |
Change |
|
Selection Type |
Item(s) |
|
Item(s) |
P19_QRCODE |
|
Action |
Set
Value |
|
Set Type |
SQL
Statement |
|
SQL Statement |
SELECT
product_name, list_price FROM
demo_product_info WHERE
product_id = :P19_QRCODE |
|
Items to Submit |
P19_QRCODE |
|
Selection Type (under Affected Elements) |
Item(s) |
|
Item(s) |
P19_PRODUCT_NAME,
P19_LIST_PRICE |
I ran this scanner page
on my Android smartphone, and the QR Code List page (created in the previous
section) on my PC to scan the QR codes from the list. As you bring your smartphone
near to a QR code in the list, the code is scanned, and the relevant product id,
name, and price are shown in relevant page items.
For Visual Instruction Watch This Video
