Thu, 24 Sep 2026
Login

Load javascript from file source at Custom HTML field

Confluence User - 22 Sep, 2021

Good day everyone!

I am trying to build a barcode scanner in a joget form using Custom HTML field.

In my attempt, I tried to read some script from some js files, sample code as below:

<!DOCTYPE html>

<div id="qr-reader" style="width:500px"></div>
<div id="qr-reader-results"></div>

<script src="D:\barcodescanner\html5-qrcode.min.js"></script>
<script src="D:\barcodescanner\html5-qr-code.js"></script>


Then when I click on preview in form builder, google Chrome returns an error : 

Not allowed to load local resource: file:///D:/barcodescanner/html5-qrcode.min.js
localhost/:1 
Not allowed to load local resource: file:///D:/barcodescanner/html5-qr-code.js


May I have some advice on how to read js files in custom html? 

Thanks in advance for any input! (smile) 


Regards,

Lee

forms;javascript

2

Confluence User •
22 Sep, 2021 •
confluenceUser •
1 •
confluenceUser •

I think the best way to add those kind of files is via resources. So, from the administration of the app go to Properties & Export. There, go to Add Resource and select the js file from your local computer. That would make the file available in the Resources list. 


Depending on the use that you are going to give it (if it will remain in a section available for anonymous user or not, basically) you will have to adjust the permissions by selecting the file.

Additionally, in this Edit resource screen, you will see the "Hash Variable" assigned for the resource, copy its value to have it available. When editing the form (or the userview, depending on how you made the application) in the custom html field when you make the link to the local file you must refer to the URL of the element using the hash variable . E.g:


<script src="#appResource.script.js#"></script>

There you have it.


Confluence User •
23 Sep, 2021 •
confluenceUser •
•
confluenceUser •

This works exactly as expected! Thanks so much! (big grin)

1
CSV | Excel | XML | PDF
RELATED QUESTIONS
Process not starting with Form submission.
Form Submission Performance Issue
How to embedded autoplay video to Homepage ?
Export As PDF
Select Box
one to many relationship
Can we create a dropdown field directly in a Joget List so that users can change the status of a record from the list view itself?
How to auto load client data after selecting it in a dropdown?
npm install in joget
Retrieve image upload from form into PDF
1
CSV | Excel | XML | PDF

Your answer

To answer a question you'll need an account.

Print