QR Code Creator – Oracle Apex

QR Code Creator

QR Code is defines that a machine-readable code consisting of an array of black and white squares, typically used for storing URLs or other information for reading by the camera on a smartphone.

One of the significant region components in Oracle APEX region is Static Content. As the name denotes, the Static Content has no dynamicity or perform any operation. But it’s more like a prime white canvas for a painter, and it’s up to our imagination to do wonders with HTML, CSS and JavaScript.

Learning Objective

The static content renders the content entered in the “Source” attribute as HTML so we can display the same in the application. Since it is similar to a white canvas, we can build a customized solution using this functionality of static content. Below is a use case for Static Content:

Use case for Static Content-QR Code:

Requirement

The QR CODE Will be generated based on the inputs given by the user by using java scripts.

Solution

You could achieve this using HTML and JavaScript in Oracle APEX static region. Let us see the step by step process to achieve this.

Step 1

We  have to create  two static regions and one Interactive or classic Report.

Region 1: Display Region

Sample Code

<div id=”qrdiv”> <canvas id=”qrcanv”></div>

 Region 2: Download Region

Sample code

<a id=”download” download=”QRCODE.jpg” href=”“ onclick=”download_img(this);”>Download</a>

Region 3 : Interactive Report

Sample Code:

select QRCODE_ID,
       QRCODE_VALUE,
       FILENAME,
       MIMETYPE
      (dbms_lob.getlength(FILECONTENT))  download
  from DOY_FLEXR_QR_CODETBL
  order by 1 desc

Note:  “DOY_FLEXR_QR_CODETBL” is an custom Table & user can able to use their own Tables.

Step 2

We need to create two page items as Text field(Input) and Hidden Item.

Step 3

In the page   On the “Function and Global Variable Declaration” of the page, type in the below JavaScript function code.

Sample Code:

qr-code-script

Step 4

We need to create a Two dynamic actions as follows

Dynamic Action 1:

• On Event: Page Load

• Action: Execute JavaScript Code : setupqr();  

Dynamic Action 2:

• Event : Change of Input Item

• Action:

• Execute javascript code : doqr();

• Execute Javascript code : captureToCanvas();

• Compile Procedure:

• create or replace FUNCTION base64decode(p_clob CLOB)
  RETURN BLOB
  IS
  l_blob BLOB;
  l_raw RAW(32767);
  l_amt NUMBER := 7700;
  l_offset NUMBER := 1;
  l_temp VARCHAR2(32767);
  BEGIN
  BEGIN
  DBMS_LOB.createtemporary (l_blob, FALSE, DBMS_LOB.CALL);
  LOOP
  DBMS_LOB.read(p_clob, l_amt, l_offset, l_temp);
  l_offset := l_offset + l_amt;
  l_raw := UTL_ENCODE.base64_decode(UTL_RAW.cast_to_raw(l_temp));
  DBMS_LOB.append (l_blob, TO_BLOB(l_raw));
  END LOOP;
  EXCEPTION
  WHEN NO_DATA_FOUND THEN
  NULL;
  END;
  RETURN l_blob;
  END;

• Execute Plsql Code :

  Declare
  Lv_Qrcode_Id Number;
  V_Result Blob;
  V_Clob Clob := Replace(:P70_Image_Base64,'data:image/png;base64,','');
  Begin
  V_Result := Base64decode(V_Clob);
  Select
  Nvl(Max(Qrcode_Id),0) + 1
  Into Lv_Qrcode_Id
  From
  Doy_Flexr_Qr_Codetbl;
  Begin
  Insert Into Doy_Flexr_Qr_Codetbl (
  Qrcode_Id,Qrcode_Value,Filename,Mimetype,Filecontent,Created_By,Created_Date) 
  Values (
  Lv_Qrcode_Id,:P70_Qrinput,'QRCODE'|| Lv_Qrcode_Id|| '.jpeg','image/jpeg',V_Result,
  :App_User,Sysdate);
  End;
  End;

• Refresh Classic/IR Report

Output:

QR Code is abbreviated as “Quick Response code”.It is most popular due to its readability and its greater storage capacity compared to other standard codes By following the above steps,We can able to create QR Code Values based on user inputs.