46
Views
22
Comments
Solved
[Javascript QR Code Generator] generate qr code using button?
javascript-qr-code-generator
Reactive icon
Forge asset by Paulo Moreira
Application Type
Reactive
Service Studio Version
11.55.16 (Build 64072)
Platform Version
11.34.0 (Build 44828)

good day mam and sir im doing testing on this forge a js qr code generator but the widget is automatic generate once i change the value but i want it to generate when i click the button. is there a way on this? thnaks

testingforQR.oml
2023-03-12 08-39-51
Iheb Maatali Riahi
Solution

Hi, it's simple — just use another local variable for the input. Then, when the button is clicked, assign that new local variable to the local variable (Value) that is associated with the input parameter of the component. 




- Attachement oml file provided


testingforQR.oml
UserImage.jpg
jesu verso

thanks !!! sir!

UserImage.jpg
jesu verso

good day sir may i know how can i change a qr code of a value ? because when i typed the www.google.com its the same. how can i change it is sir? thanks!

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

Hi jesu,

I've updated your .oml file. The QRCode itself is hidden in a container and is only generated once you click the button. Also I removed the default value of the "Value" local variable, and only assign it once you click the button.

testingforQR.oml
UserImage.jpg
jesu verso

thank you sos much!

UserImage.jpg
jesu verso

good day mam may i know how can i change a qr code of a value ? because when i typed the www.google.com its the same. how can i change it is mam? thanks!

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

Hi jesu,

If I understood correctly, you'd like your QR Code to generate a different value each time, and only when a button is clicked.

In a recent post, I shared a similar solution where a random value is assigned to the QR Code. You can apply that same logic here as well.

To help out, I’ve attached an .oml file that shows how it all works.

I created a new screen called QRCodeClickButton. On this screen, there’s a Data Action configured to fetch data "Only on demand". 

When the button is clicked, it triggers the Data Action to fetch a new value, so the QR Code is only generated at that moment.


Also, the QR Code block is inside a container that’s only visible after the button is clicked. This ensures that nothing is shown until a new code is actually generated. 

Hope this helps! 

QRCode_ClickButton.oml
UserImage.jpg
jesu verso

is it possible on this with sticking the qr code with generateUID  for validation with a countdown? thans for this really apprecaite it

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

You want the QR Code to be valid for only a period of time, is that it? 

UserImage.jpg
jesu verso
2022-12-22 10-00-39
Beatriz Sabino

Yes that's possible. I'm not sure how you can do that with this component. 

UserImage.jpg
jesu verso

mam i've been testing on ur oml may i ask how can i put a value onto a qr code? thanks! like ive seen is the genuid code only and what if i put names or other value into it? is it possible thanks!

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

Inside the Data Action, add the new parameter in the Assign step as shown. 

Please keep in mind what I mentioned earlier about the built-in CurrDateTime function. 

You can append this parameter in the After Fetch of the Data Action as well.

I’ve attached an updated .oml file where the parameter has already been added in the After Fetch step.

QRCode_Example_NewUpdate.oml
UserImage.jpg
jesu verso

thank you so much again and again mam. inside the qr code is the GENuid may i know if its possible to add another data inside the qr code like the name of it?  thanks!

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

Yes, you can. You can add as many variables as you want. 

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

Hi jesu,

If I understood correctly, you'd like your QR Code to generate a different value each time, and only when a button is clicked.

In a recent post, I shared a similar solution where a random value is assigned to the QR Code. You can apply that same logic here as well.

To help out, I’ve attached an .oml file that shows how it all works.

I created a new screen called QRCodeClickButton. On this screen, there’s a Data Action configured to fetch data "Only on demand". 

When the button is clicked, it triggers the Data Action to fetch a new value, so the QR Code is only generated at that moment.


Also, the QR Code block is inside a container that’s only visible after the button is clicked. This ensures that nothing is shown until a new code is actually generated. 

Hope this helps! 

QRCode_ClickButton.oml
2023-03-12 08-39-51
Iheb Maatali Riahi
Solution

Hi, it's simple — just use another local variable for the input. Then, when the button is clicked, assign that new local variable to the local variable (Value) that is associated with the input parameter of the component. 




- Attachement oml file provided


testingforQR.oml
UserImage.jpg
jesu verso

thanks !!! sir!

UserImage.jpg
jesu verso

good day sir may i know how can i change a qr code of a value ? because when i typed the www.google.com its the same. how can i change it is sir? thanks!

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

Hi jesu,

I've updated your .oml file. The QRCode itself is hidden in a container and is only generated once you click the button. Also I removed the default value of the "Value" local variable, and only assign it once you click the button.

testingforQR.oml
UserImage.jpg
jesu verso

thank you sos much!

UserImage.jpg
jesu verso

good day mam may i know how can i change a qr code of a value ? because when i typed the www.google.com its the same. how can i change it is mam? thanks!

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

Hi jesu,

If I understood correctly, you'd like your QR Code to generate a different value each time, and only when a button is clicked.

In a recent post, I shared a similar solution where a random value is assigned to the QR Code. You can apply that same logic here as well.

To help out, I’ve attached an .oml file that shows how it all works.

I created a new screen called QRCodeClickButton. On this screen, there’s a Data Action configured to fetch data "Only on demand". 

When the button is clicked, it triggers the Data Action to fetch a new value, so the QR Code is only generated at that moment.


Also, the QR Code block is inside a container that’s only visible after the button is clicked. This ensures that nothing is shown until a new code is actually generated. 

Hope this helps! 

QRCode_ClickButton.oml
UserImage.jpg
jesu verso

is it possible on this with sticking the qr code with generateUID  for validation with a countdown? thans for this really apprecaite it

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

You want the QR Code to be valid for only a period of time, is that it? 

UserImage.jpg
jesu verso
2022-12-22 10-00-39
Beatriz Sabino

Yes that's possible. I'm not sure how you can do that with this component. 

UserImage.jpg
jesu verso

mam i've been testing on ur oml may i ask how can i put a value onto a qr code? thanks! like ive seen is the genuid code only and what if i put names or other value into it? is it possible thanks!

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

Inside the Data Action, add the new parameter in the Assign step as shown. 

Please keep in mind what I mentioned earlier about the built-in CurrDateTime function. 

You can append this parameter in the After Fetch of the Data Action as well.

I’ve attached an updated .oml file where the parameter has already been added in the After Fetch step.

QRCode_Example_NewUpdate.oml
UserImage.jpg
jesu verso

thank you so much again and again mam. inside the qr code is the GENuid may i know if its possible to add another data inside the qr code like the name of it?  thanks!

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

Yes, you can. You can add as many variables as you want. 

2023-03-12 08-39-51
Iheb Maatali Riahi

Hi, yes you can. I made some updates in the OML (see below), specifically in the QrCodeClickButton screen. Now, the QR code will disappear after 5 seconds.

If you want to extend this time, just increase the ValidTimer default value (currently set to 5000 ms = 5s).
Take a look at the OnAfterFetch client action

QRCode_ClickButton -edit.oml
2022-12-22 10-00-39
Beatriz Sabino

This doesn't mean the QR Code is invalid. If I took a screenshot of it and later scanned again, I could. This will just hide the generated QR Code. 

2023-03-12 08-39-51
Iheb Maatali Riahi

Hi @Beatriz Sabino ,

Thanks for your reply!

I didn’t quite understand what @jesu verso  meant exactly. What does it mean for a QR code to be "valid"? Does that mean when he scans the QR code, something is supposed to appear? Or is it that the QR code is expired and nothing shows up?

Just trying to clarify what’s actually needed here.

UserImage.jpg
jesu verso

sorry for super late reply sir yes u r right meaning when the qr code is expired is not scannable now

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

Hi jesu,

This component doesn't provide a built-in function to invalidate a QR Code. I looked for an alternative component in Forge but couldn’t find one. 

A possible workaround to achieve what you need is by adding a parameter to your QR Code value for example, appending "&expires=" + AddMinutes(CurrDateTime(), 5)". Then, in your scan logic, you can use the server action Regex_Search (available in the Text module) with the pattern "\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}". This will extract the DateTime value from the QR Code string. 

After retrieving the timestamp, you can check whether the time has passed beyond your set limit (in this case, 5 minutes) using a condition like: TextToDateTime(Regex_Search.PatternResult) >= CurrDateTime().

If the condition is true, you can display a message indicating the QR Code is invalid. Otherwise, proceed with the redirecting the user to a specific link or perform your the intended logic. 

Please keep in mind that using DateTime function in server side and client side will produce different results. "Builtin functions such as CurrDateTime() will return the date and time from the device when they are used in the client context (either in the UI or in a client action). If they're called in a server action they will return server date and time."

UserImage.jpg
jesu verso

Good day mam, thank you so much for simple explanation may i ask that maybe i put an genuid inside the qr code so i can validate it? thanks so much?

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

Hi jesu, 

How are you planning to use a GUID to validate your QR code? A GUID is just a randomly generated string. You could use a regex to check if the format matches, but how would you actually validate it?

The main purpose of adding the new parameter is to verify whether the time limit has been exceeded. I'm not sure how you can achieve that using just the GUID.

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