21
Views
16
Comments
[Javascript QR Code Generator] QR Code value a server action or client action
javascript-qr-code-generator
Reactive icon
Forge asset by Paulo Moreira
Application Type
Reactive
Service Studio Version
11.55.15 (Build 64075)
Platform Version
11.34.0 (Build 44828)

Hello its been my first time using the QR Code and a forge and ive tried other forge in QR code generator and i ve noticed is that the value that they put is text or link, is there a way or is it possible that i can put a server action or client action like when the qr code is scanned it will trigger an action? pls help me thnaks!


2022-12-22 10-00-39
Beatriz Sabino

Hi jesu,

Are you planning to read the QR code through a mobile application? If so, you can use a component called the Barcode Plugin, which allows you to scan QR codes. You can check out the demo to see how to integrate your custom logic once the QR code is successfully scanned.

UserImage.jpg
jesu verso

I  am plan on using reactive

2022-12-22 10-00-39
Beatriz Sabino

Hi jesu, 

Could you provide more details about your use case? How do you plan to use the QR code? I just want to point out that QR codes can't be scanned through a PC, so you'll need to use a phone for that.

UserImage.jpg
jesu verso

hehe sorry im really new to this qr code scanning so im still catching up to this but here is the use case:


Customer Portal

  • Displays a QR code linked to the customer's loyalty account.

Web Application

  1. User Access & Roles

    • Users log in with their credentials.

    • Roles include:

      • Standard User: Can process redemptions and access their own reports.

      • Administrator: Can manage users and generate reports with additional filters.

  2. Redemption Workflow

    • Users input the points or amount to be deducted.

    • The system supports QR code scanning for seamless processing.

    • Key actions:

      • Verify the QR code.

      • Check if the customer has sufficient points.

      • Deduct the appropriate points upon confirmation.

    • Each transaction is logged with:

      • A unique reference number.

      • Customer loyalty identifier.

      • Timestamp of the transaction.

      • User who processed the redemption.

      • Points deducted.

2022-12-22 10-00-39
Beatriz Sabino

Hi jesu,

Thank you for the information.

I’ve attached two .oml files:

  1. One where you generate a QR code that links to a specific page of your application, in this case, the User Detail page.

  2. The other is a mobile app that uses the Barcode Plugin to scan the QR code with your phone and allows you to perform additional actions after the scan is successful.

QRCode_Scanner.oml
QRCode_Generator.oml
UserImage.jpg
jesu verso

holy moly, thank you so much must try this first. thank you so much, you helpede me

UserImage.jpg
jesu verso


may i know why i have this error on qr code scanner oml? thnaks

Foreign Module Error


Your OutSystems subscription only allows uploading modules developed in your environment, or downloaded from the OutSystems Forge. To share this module with the community, upload it at http://www.outsystems.com/goto/forge.

2022-12-22 10-00-39
Beatriz Sabino

The reason for this is that you're using a Personal Environment, and as the error message indicates, you can only upload modules developed within your own environment or those downloaded from Forge.

A potential workaround is to create a mobile app within your environment and replicate the code there. 

Additionally, make sure to download the Barcode plug-in from Forge.


UserImage.jpg
jesu verso

i download the IPP and it works! thanks and the qr code works, but is there a way where after i scan there will be an actions or i cant put client actions to do the what i want to execute? because in your example after i scan it a link of the user pop up, is there a way where i can jput client actions or do some message pop up instead of link that i can show? after showing qr code? thanks!

2022-12-22 10-00-39
Beatriz Sabino

I'm not sure I completely understand your request.

Once the scan is complete, you can add any additional logic you need. The example I provided was just a starting point. After checking if the scan was successful, you can include a message or any other logic that works for your needs.

This is also valid.

UserImage.jpg
jesu verso

sorry for the confusion and thank you for replying!


here's it is:

After scanning the QR code, instead of opening a link, you can trigger a Client Action in OutSystems to execute specific behavior. You can create a Client Action that handles the QR code scan event, such as showing a pop-up message or performing other actions like updating UI elements, navigating to a screen, or executing business logic or using a REST api for pointing system. Instead of binding the QR code to a URL, you bind it to this Client Action, which will execute your desired behavior, like displaying a message with a pop-up or performing any custom logic in your app. This allows you to fully control the actions triggered after the scan. 

2022-12-22 10-00-39
Beatriz Sabino

Hi jesu,

Yes you can do all that, that you described.

2024-07-12 05-57-50
Gourav Shrivastava
Champion

Hello @jesu verso 

Encode a URL in the QR code that points to your app screen, e.g., 

https://outsystems.com/screen?param=value. 

Scan the barcode with your mobile. This URL will open your app when scanned. If your app is installed and associated with the deep link, it will open automatically and where you can handle the logic. 

how_to_define_mobile_app_deep_links


Regards

Gourav Shrivastava

UserImage.jpg
jesu verso

is this the same function same in reactive or using it in web? thanks

2022-07-12 09-55-09
Philip Paolo De Castro

Hi Jesu,

Adding to others suggestion,

If you are aiming to run an action on the page where the QR Code is displayed after being scanned by (assuming) your own developed Mobile Application Like (Scan the QR Code to login) kind of implementation, I would suggest using this component 

You can also check out this article for additional details: Mobile to Web App QR Code-based Authentication Using OutSystems



UserImage.jpg
jesu verso

may i know whats the purpose of this its my fist time trying to work on qr codes. thanks!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.