In this blog post, we’ll explore how to utilize JavaScript/MLE to develop a QR Code application. Before delving into the application creation process, it’s important to note that although I operate in the APEX 23.2 version environment, the JavaScript/MLE functionality is available as early as version 23.1, residing within the Oracle Database 23c Free-Developer Release.
To integrate the QR Code into Oracle as an MLE module, start by navigating to the Object Browser.
Click on the plus (+) button in the left panel and opt for “MLE Module – JavaScript” or select it directly from the central pane:
By initiating this action, a dialogue box will pop up prompting you to enter the name of the module, QRCODE, along with the version 1.4.4 (optional). Then you will choose the URL as a source type and input the following: https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js
Then click the “Create MLE Module” button and patiently await a few seconds until you receive confirmation that the module has been successfully created.
Afterwards, you need to create a new MLE environment to import the “qrcode” that you can attach it to your application afterwards.
In the Object browser, hit the (+) button, select “MLE Environment”.
Enter “DEV” as the name for the environment and click on “Create MLE Environment”:
Once created, click on the “Add import” to open the dialog box for adding the MLE module.
Select “QRCODE” as schema and “qrcode” as its import name and hit “CREATE”:
The created MLE environment should look like this:
Now we are ready to create application, In the App Builder, click “Create”.
Choose the name for your application. For this example, I used “QR Code”.
Once the application is created, you’ll be directed to this page. 
To configure the environment with the necessary modules, navigate to “Shared components.” In the “Security” tab, select “Security attributes.” Under “Database session,” set “MLE Environment” to “DEV” and apply the changes. By specifying the app’s MLE Environment, we ensure that any JavaScript (MLE) code executed by the application will utilize this environment to resolve imports.
Now, access the Page Designer, proceed to page 1, and create a new Region, along with three Items below:
- P1_TEXT – an input text field used to contain the value to be converted to a QR Code.
- P1_QRCODE – a display item used to hold the QR Code image. Ensure to update the attribute “Based On” to select “Image URL stored in the Page Item Value.”
- GENERATE_QQCODE – pressing this button will trigger the process to generate the QR code.
- Language: JavaScript (MLE).
- When Button Pressed: GENERATE_QRCODE
- Enter the following from the JavaScript Code:
// import the qrcode module
const {default : qrcode } = await import ("qrcode");
//library option
const code = qrcode(0, 'L');
// send value of input text to the function.
code.addData(apex.env.P1_TEXT);
code.make();
//saving the result into display image item
apex.env.P1_QRCODE = code.createDataURL(4);
Click “Run” and there here you go:
