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.

Share this post
Recent Posts
Showing 7 comments
  • Keenan
    Reply

    You are so cool! I do not think I’ve read anything like that before.
    So good to find another person with original thoughts on this issue.
    Seriously.. many thanks for starting this up.
    This site is something that is needed on the internet, someone with a bit of originality!

    • Sathya Jegan
      Reply

      Thanks For your Feedback. These kind of words will keep us motivating and to do create more Innovative Things.

  • Imam Tri Harsono
    Reply

    Hi,

    It’s great to read your tutorial.
    I already trying follow your tutorial, but I got error “PLS-00201: identifier ‘BASE64DECODE’ must be declared for Execute PL/SQL Code.” in my oracle apex.
    Could you share that procedure and others script needed in this tutorial?

    Thanks a lot Sathya,.

    • Sathya Jegan
      Reply

      Thanks for the response. I have updated the blog, Kindly check

  • Sarah Elhagry
    Reply

    Hello Sathya Jegan thanks for your effort, i have a question please is there a way to auto generate and view a QR column automatically in a report or a form ?

    Thanks in Advance

    • Sathya Jegan
      Reply

      Hi Sarah,
      Thanks for your support. To answer your question, Already We have find the solution to create the QR Code Dynamically & also displayed in both Report & Forms. We will try to post the same detailly in another blog.

      Thanks,
      Sathya Jegan

  • Sunny
    Reply

    Hi there, thank you fo r this tutorial very helpful indeeed! I am trying to insert the newly generated QR code to the table similar to your “Doy_Flexr_Qr_Codetbl” however I seem to be getting this error on APEX:

    “Ajax call returned server error ORA-06502: PL/SQL: numeric or value error: invalid LOB locator specified: ORA-22275 for Execute PL/SQL Code”

    It seem’s that there is something I have to change about the base64decode function as “V_Result := Base64decode(V_Clob);” must be what’s causing this error as it contains the LOB locator, but I’m not sure what exactly it is? Any input would be so appreciated

Leave a Comment

Start typing and press Enter to search