QR code breaks when a link with %20 for spaces is included

[bejeweledone]

We discovered that a link added to a QR code that has spaces represented by %20 doesn't give the whole link when scanned. It truncates as soon as it reaches the first %20. This is using the online api when creating the QR code.

[metafloor]

Are you going to provide an example?

[bejeweledone]

Here is a slightly modified version of the link we were working with. We did extensive testing and the results are below.

https://companyname.sharepoint.com/sites/spectrum-co-dir-fac-en/Shared%20Documents/APAC/INDGOA1/SPARSH-Newsletter/SPARSH%20-%202022%20-%20Q3%20Final.pdf

The QR code offers the opportunity to download 'Shared' when using this link.

Using this link the QR code offered the opportunity to download 'SPARSH'

https://companyname.sharepoint.com/sites/spectrum-co-dir-fac-en/SharedDocuments/APAC/INDGOA1/SPARSH-Newsletter/SPARSH%20-%202022%20-%20Q3%20Final.pdf

Each time we removed the space represented by %20 we were given a little more of the link when scanning the QR code.

[metafloor]

Please show the bwip-js URL that generates the incorrect result.

[bejeweledone]

https://bwipjs-api.metafloor.com/?bcid=qrcode&backgroundcolor="FFFFFF"&barcolor="000000"&text={cvHTMLText}&eclevel=Q

{cvHTMLText} is a text variable in the Power app that contains the text for the QR code. The text is entered using a Rich Text editor that allows text, links, images and so on. We tested adding the link using the included link function, also by simply typing it into the text editor and by copy and paste. I also tested using "" around the link.

[metafloor]

That does not help. I need to see the actual URL you are using with the API. Your issue is most likely not with bwip-js but with how you are encoding the url. When using spaces in a url, the %20s must be preserved. Since you are embedding a url within a url, you need to double-encode: each %20 should be encoded as %2520.

I suspect you are new to software development and don't understand how to submit a bug report. The single most important thing when asking for help is to provide an example that reproduces the issue.

[bejeweledone]

You mean the url I entered into the first comment? The ONLY thing I changed about that link was the company name. It is the actual URL.

[metafloor]

Ok, we are not succeeding. You need to provide the full and complete URL you are using with the API.

Let's re-phase my question. Please provide an actual URL to the bwipjs API that can be "clicked". Not the URL you want to encode but the full URL to the bwipjs API, after the {cvHTMLText} has been substituted.

[bejeweledone]

My apologies.

https://bwipjs-api.metafloor.com/?bcid=qrcode&backgroundcolor=FFFFFF&barcolor=000000&text=<p>https://companyname.sharepoint.com/sites/spectrum-co-dir-fac-en/SharedDocuments/APAC/INDGOA1/SPARSH-Newsletter/SPARSH%20-%202022%20-%20Q3%20Final.pdf</p>&eclevel=Q

What is interesting to me is the fact that the link has <p> and </p> added. This doesn't seem to have caused the issue as the only thing that was different between this and the working link is the presence of the %20.

[metafloor]

You definitely want to get rid of the <p> and </p> in the url. That will cause potential problems regardless of the encoding issue. Here is a reformatted version of the URL, without the html markup:

https://bwipjs-api.metafloor.com/?bcid=qrcode&backgroundcolor=FFFFFF&barcolor=000000&text=https://companyname.sharepoint.com/sites/spectrum-co-dir-fac-en/SharedDocuments/APAC/INDGOA1/SPARSH-Newsletter/SPARSH%20-%202022%20-%20Q3%20Final.pdf&eclevel=Q

Now let's discuss the url encoding. When you send that URL to the API, all of those %20 escapes get converted back to spaces. So after URL decoding by the API, it sees:

bcid=qrcode&backgroundcolor=FFFFFF&barcolor=000000&text=https://companyname.sharepoint.com/sites/spectrum-co-dir-fac-en/SharedDocuments/APAC/INDGOA1/SPARSH-Newsletter/SPARSH - 2022 - Q3 Final.pdf&eclevel=Q

But you want the spaces to stay as %20 so the barcode decoder knows they are part of the URL. That is, you need to double-encode the spaces. The double-encoding converts the % to %25, resulting in each space encoded as %2520:

https://bwipjs-api.metafloor.com/?bcid=qrcode&backgroundcolor=FFFFFF&barcolor=000000&text=https://companyname.sharepoint.com/sites/spectrum-co-dir-fac-en/SharedDocuments/APAC/INDGOA1/SPARSH-Newsletter/SPARSH%2520-%25202022%2520-%2520Q3%2520Final.pdf&eclevel=Q

[bejeweledone]

So to make sure I understand, I need to ensure that any %20 is actually %2520 when it goes to the api to be decoded

[metafloor]

Yes. Technically, the entire URL you are embedding as the text value should be encoded. For example, the / and : should be url-escaped. If you ever supply a URL with query parameters that contain &, it will really break. The API will think the & are part of its URL, and not part of the text value. Basically you should do something like:

cvHTMLText = encodeURIComponent(cvHTMLText.replace(/ /g, '%20'))

Before the {cvHTMLText} substitution happens.

[bejeweledone]

I will give that a try. Thanks for all the help. Sorry for the confusion. Trying to setup a new laptop and deal with other issues at the same time.

[bejeweledone]

Is there anything else that needs to be double encoded? PowerApps doesn't have encodeURIComponent, it has EncodeURL. EncodeURL will take this link with a display name( I haven't trimmed out the html or done any double encoding for the spaces)

<a href="https://companyname.sharepoint.com/sites/spectrum-co-dir-fac-en/Shared%20Documents/APAC/INDGOA1/SPARSH-Newsletter/SPARSH%20-%202022%20-%20Q3%20Final.pdf">Test</a>

And turns it into this:

%3Ca%20href%3D%22https%3A%2F%2Fcompanyname.sharepoint.com%2Fsites%2Fspectrum-co-dir-fac-en%2FShared%2520Documents%2FAPAC%2FINDGOA1%2FSPARSH-Newsletter%2FSPARSH%2520-%25202022%2520-%2520Q3%2520Final.pdf%22%3ETest%3C%2Fa%3E

[metafloor]

The first URL you show in the <a> example already has the %20 escapes for the spaces, so adding the EncodeURL() call produces the correct output (double-encoding of the spaces).

[bejeweledone]

Is there a good document that lists escapes for other characters, such as the & you mentioned in an earlier comment, that I could review?

[metafloor]

Only & and = and possibly # have special meaning after the ? in a URL. But as long as you use EncodeURL() on the text value, you don't need to worry. Just make sure any spaces are replaced with %20 before calling EncodeURL().