QR Code Generator — OutSystems Forge Documentation

📋 Table of Contents

1. Overview & Description
2. Installation Guide
3. Component Properties Reference
4. Usage Examples
5. Troubleshooting Guide

1. Overview & Description <a name="overview"></a>

What is QR Code Generator?

QR Code Generator is a lightweight, fully client-side Reactive Web Block for OutSystems that allows you to generate QR codes directly in your application without any server-side processing or external API calls.

Built on top of the popular open-source qrcode.js library, this component is easy to drop into any Reactive Web screen and configure with just a few properties.

Key Features

• ✅ Generate QR codes from any Text or URL
• ✅ Customizable Width & Height
• ✅ Custom Foreground & Background Colors
• ✅ Error Correction Level (L / M / Q / H)
• ✅ Download QR as PNG
• ✅ Returns Binary Data output for further processing
• ✅ Multiple instances supported on the same screen
• ✅ No API keys or server calls required
• ✅ Mobile compatible

Supported Platforms

Dependencies

Note: The component loads qrcode.js dynamically from CDN. An internet connection is required on first load. For offline environments, host the library internally and update the script URL accordingly.

2. Installation Guide <a name="installation"></a>

Step 1 — Download from Forge

1. Go to OutSystems Forge
2. Search for QR Code Generator
3. Click Install → Select your environment
4. Wait for installation to complete

Step 2 — Add Reference in Your Application

1. Open your Reactive Web Module in Service Studio
2. Go to Manage Dependencies (Ctrl+Q)
3. Search for QRCodeLib
4. Select and add the following:

5. Click Apply

Step 3 — Add the Block to Your Screen

1. Open the screen where you want to display the QR code
2. In the widget toolbox, find QRCodeGenerator under UI Flows
3. Drag it onto your screen
4. Configure the Config input parameter (see Properties Reference below)

Step 4 — Publish and Test

1. Press Ctrl+P to publish
2. Open the app in browser
3. QR code should appear automatically

3. Component Properties Reference <a name="properties"></a>

Web Block: QRCodeGenerator

Structure: QRCodeConfig

Error Correction Level Reference

Client Action: DownloadQRCode

Client Action: GenerateQRCode (Internal)

This action is used internally by the Web Block. You do not need to call it directly unless building a custom implementation.

Server Action: ConvertBase64ToBinary (Internal)

Used internally to convert the JS canvas Base64 output to OutSystems Binary Data type.

4. Usage Examples <a name="usage"></a>

Example 1 — Basic QR Code (URL)

Simply drag the block onto your screen and configure:

QRCodeGenerator
  Config:
    Text        = "https://www.outsystems.com"
    Width       = 200
    Height      = 200
    ColorDark   = "#000000"
    ColorLight  = "#ffffff"
    ErrorLevel  = "M"
  ShowDownloadButton = False

Result: A 200x200 QR code that encodes the OutSystems website URL.

Example 2 — Dynamic QR from User Input

Bind the QR code to a local variable so it updates as the user types:

1. Create a Local Variable: URLToEncode (Text, default: "https://outsystems.com")
2. Add an Input widget bound to URLToEncode
3. Configure the block:

QRCodeGenerator
  Config:
    Text        = URLToEncode
    Width       = 250
    Height      = 250
    ColorDark   = "#000000"
    ColorLight  = "#ffffff"
    ErrorLevel  = "M"
  ShowDownloadButton = True

Result: QR code updates automatically when the user changes the input.

Example 3 — Colored QR Code

Generate a branded QR code with custom colors:

QRCodeGenerator
  Config:
    Text        = "https://www.yourcompany.com"
    Width       = 200
    Height      = 200
    ColorDark   = "#E8173A"   ← Red dots
    ColorLight  = "#FFF5F6"   ← Light pink background
    ErrorLevel  = "M"
  ShowDownloadButton = True

⚠️ Important: Always ensure enough contrast between ColorDark and ColorLight — low contrast QR codes may fail to scan.

Example 4 — Download QR and Process Binary

Use this when you need to process the QR image before downloading (e.g., adding watermark via server):

On Click (Download Button)
  │
  ├── DownloadQRCode
  │     Input:  WidgetId = QRContainer.Id
  │     Output: QRBinary
  │
  ├── YourServerAction (process QRBinary as needed)
  │     Input:  InputBinary = QRBinary
  │     Output: ModifiedBinary
  │
  └── JavaScript Node (trigger download)
        Input: ModifiedBase64 = BinaryToBase64(ModifiedBinary)

JavaScript to trigger download after processing:

var link = document.createElement("a");
link.download = "qrcode.png";
link.href = "data:image/png;base64," + $parameters.ModifiedBase64;
link.click();

Example 5 — Multiple QR Codes on Same Screen

The component handles multiple instances automatically. Just drag multiple blocks:

Screen
  ├── QRCodeGenerator (Config.Text = "https://site1.com")
  ├── QRCodeGenerator (Config.Text = "https://site2.com")
  └── QRCodeGenerator (Config.Text = "https://site3.com")

Each block renders its own unique QR code independently. No extra configuration needed.

Example 6 — QR Code for vCard / Contact Info

Generate a QR code that opens contact info when scanned:

QRCodeGenerator
  Config:
    Text =
      "BEGIN:VCARD" +
      "VERSION:3.0" +
      "FN:John Doe" +
      "ORG:OutSystems" +
      "TEL:+1234567890" +
      "EMAIL:john@example.com" +
      "END:VCARD"
    Width      = 250
    Height     = 250
    ErrorLevel = "M"

Result: Scanning this QR code opens the contact in the phone's contacts app.

5. Troubleshooting Guide <a name="troubleshooting"></a>

❌ Issue: QR Code Not Showing / Blank Screen

Possible Causes & Fixes:

❌ Issue: QRCode is not defined Error in Console

This means the qrcode.js library failed to load.

Fix:

1. Open browser DevTools → Network tab
2. Refresh the page and check if qrcode.min.js loads successfully
3. If blocked, check your environment's Content Security Policy (CSP)
4. If CDN is blocked in your environment, host the file internally:
   • Download: https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js
   • Add as a Resource in QRCodeLib module
   • Update the script src in the On Initialize JS node to point to the local file

❌ Issue: QR Code Renders but Won't Scan

Possible Causes & Fixes:

❌ Issue: Download Button Does Nothing

Fix:

1. Check browser allows file downloads (some block auto-downloads)
2. Make sure ShowDownloadButton = True is set on the block
3. Verify the QR code has rendered before clicking download
4. Check browser console for any JS errors

❌ Issue: Multiple QR Codes on Same Screen Show Same QR

This should not happen with the current implementation.If it does:

1. Verify each block instance has its own Config variable
2. Make sure you are NOT sharing the same local variable across blocks
3. Re-publish and hard refresh (Ctrl+Shift+R)

❌ Issue: QR Code Not Updating When Input Changes

Fix:Make sure the Config.Text is bound to a Local Variable (not a hardcoded value):

• The block re-renders via On After Render whenever its parameters change
• If using a button to trigger update, add an Assign node that sets the variable to itself to force a re-render:

Assign: URLToEncode = URLToEncode

❌ Issue: QR Code Works on Desktop but Not Mobile

Fix:

1. Ensure the container width is not larger than the mobile screen
2. Set Width and Height to relative values or use a smaller size like 150
3. Test on actual device — some mobile browsers handle canvas differently

💡 General Tips

• Always use ErrorLevel = "H" when overlaying logos or images on the QR code
• Keep Text under 500 characters for best scan performance
• White background (ColorLight = "#ffffff") gives the most reliable scan results
• Test scanned QR codes with multiple apps (Google Lens, iPhone Camera, dedicated QR apps)

Documentation Version: 1.0.0Component Version: 1.0.0Last Updated: 2026Author: — (your name here)