How to Add Custom JavaScript

[R2bEEaton]

Disclaimer

The following is sketchy behavior known as Cross Site Scripting (What is XSS?). Some browsers or good company firewalls can block this kind of thing. Budibase is often used for internal apps, so most people should be able to use this without a problem if you know your company's policies or, better yet, if you're the one making them.
I am a user of Budibase, not a maintainer.

How to Inject JavaScript Code

This is just a quick guide for how to add custom JavaScript into Budibase. I'm sure it's been done before, but I couldn't find any information on it here in discussions, so I figured I might as well share.

1. Create a new Embed. Anyone that's tried to add custom scripts into Budibase will be familiar with the Embed component. Currently, it filters out <script> tags for XSS security reasons (Import a script from the embed element #1892). We can work around this! This method of injecting JavaScript still involves an Embed component.
2. Inside the Embed, set the Embed property to the following:

<img style="display: none;" src onerror="
	// JavaScript goes here!
	alert('Hello world!');
	// Be careful to escape quotation marks or using &quot; or something like single quotes,
	// the onerror attribute is surrounded by double quotes in this example.
">

Practical Example

An example of what this could be used for can be found here: #6721.
And here is the Budibase export so you can examine it further (though there's not much else that the explanation doesn't cover):
Updating Time Example-export-1657913724917.txt

How it Works

An image element with an empty src attribute will throw an error that can be used to trigger the built-in onerror attribute, containing our JavaScript code. This code will run as soon as the "hijacked" image is loaded by the browser.
The browser compatibility for this feature can be found here: https://caniuse.com/mdn-html_elements_img_onerror

If this doesn't work:
Review this page to find an option that works for you depending on your needs.

Hope this helps!

[SufiSR]

Thanks for sharing @R2bEEaton. This really helped me to find a solution to my specific challenge: #12143

[APEWAW]

Hello @R2bEEaton @SufiSR ,

Thanks for sharing!

I'm trying to use a long form field as a search field using the javascript code below (disable enter key/new line for textarea), but it doesn't work in embed widget. Could you help me? Thank you

<img style="display: none;" src onerror="
function submitOnEnter(event) {
if (event.which === 13) {
if (!event.repeat) {
const newEvent = new Event("submit", {cancelable: true});
event.target.form.dispatchEvent(newEvent);
}
event.preventDefault();
}
}
var justDoIt = document.getElementById("id-ca2dbe91cfa7142d1b07c50852b68131f");
justDoIt.addEventListener("keydown", submitOnEnter);
">

[R2bEEaton]

Hi, it looks like you have double quotes inside your JavaScript. Since the onError field is a string, you are then closing the string with your JavaScript. Use single quotes either on the outside or inside, or escape the double quotes with a backslash.

In other words, switch to one of these options:

" JavaScript 'stuff' "
' JavaScript "stuff" '
" JavaScript \"stuff\" "

[APEWAW]

Thank you so much @R2bEEaton ! This solves part of the problem. But what is now blocking the code from working on my search field is that BudiBase does not generate <form></form> tags around my textarea field. Would you know if it is possible to adapt this?

<img style="display: none;" src onerror="
function submitOnEnter(event) {
if (event.which === 13) {
if (!event.repeat) {
const newEvent = new Event('submit', {cancelable: true});
event.target.form.dispatchEvent(newEvent);
}
event.preventDefault();
}
}
var justDoIt = document.getElementsByTagName('textarea')[0];
justDoIt.addEventListener('keydown', submitOnEnter);
">

[gmentzik]

Thank you so much @R2bEEaton ! This solves part of the problem. But what is now blocking the code from working on my search field is that BudiBase does not generate <form></form> tags around my textarea field. Would you know if it is possible to adapt this?

<img style="display: none;" src onerror="
function submitOnEnter(event) {
if (event.which === 13) {
if (!event.repeat) {
const newEvent = new Event('submit', {cancelable: true});
event.target.form.dispatchEvent(newEvent);
}
event.preventDefault();
}
}
var justDoIt = document.getElementsByTagName('textarea')[0];
justDoIt.addEventListener('keydown', submitOnEnter);
">

Did you find any solution? At my test I found that you cannot catch screen HTML elements rendered by Budibase with code in Embed. Somehow are hidden. Maybe there is a trick. Can anyone help?

[R2bEEaton]

As far as I'm aware, you can access other Budibase elements. I use this to modify elements to my liking. Are you selecting the element properly? Make sure to inspect the page source so that you can come up with a proper selector for class, id, or data selector.

[gmentzik]

As far as I'm aware, you can access other Budibase elements. I use this to modify elements to my liking. Are you selecting the element properly? Make sure to inspect the page source so that you can come up with a proper selector for class, id, or data selector.

Hi I have tested the suggested solution with adding JS in onError of img element and indeed can read the rendered elements.

[gmentzik]

Hi @R2bEEaton . After updating Budibase and apps to 3.2.29 the hack no longer works. JS will not execute and if you check console gives an CORS error and suggests adding some headers or hash if having access to backend. Have you found a new workaround?

[melohagan]

@gmentzik That use-case should be possible with custom components, but I believe it can be done without.

Might not be exactly what you need, but should hopefully give you an idea:

text.import.mov

This works by combining two key parts:

1. Add a form with an attachment field for uploading your text files to a table. This uses the Single Attachment data type in the Data section.
2. Add a GET REST query that uses a binding for the entire URL.
3. Pass the URL of the table attachment into the query with the binding: {{ Text Repeater Block.text_files.text_file.url }}

Here is the app export so you can take a closer look:
Import text-export.tar.gz

Hope that gets you started!

[gmentzik]

Hi both.
I checked again custom components and maybe I can use https://github.com/chungchunwang/Budibase-File-Upload, I just have to read the generated json of the field value and convert link blob back to text. I will see how it goes. Thank you for the feedback.

[gmentzik]

@gmentzik That use-case should be possible with custom components, but I believe it can be done without.

Might not be exactly what you need, but should hopefully give you an idea:

text.import.mov
This works by combining two key parts:

1. Add a form with an attachment field for uploading your text files to a table. This uses the Single Attachment data type in the Data section.
2. Add a GET REST query that uses a binding for the entire URL.
3. Pass the URL of the table attachment into the query with the binding: {{ Text Repeater Block.text_files.text_file.url }}

Here is the app export so you can take a closer look: Import text-export.tar.gz

Hope that gets you started!

Hi @melohagan. I will also check your suggestion. Thank you!

[gmentzik]

@gmentzik That use-case should be possible with custom components, but I believe it can be done without.

Might not be exactly what you need, but should hopefully give you an idea:

text.import.mov
This works by combining two key parts:

1. Add a form with an attachment field for uploading your text files to a table. This uses the Single Attachment data type in the Data section.
2. Add a GET REST query that uses a binding for the entire URL.
3. Pass the URL of the table attachment into the query with the binding: {{ Text Repeater Block.text_files.text_file.url }}

Here is the app export so you can take a closer look: Import text-export.tar.gz

Hope that gets you started!

Hi @melohagan ,

I tried to import and run the example but I am getting 400 error probably from the API call.

It seams to ask for app_id. Could you please help?

Additional Info:
I modified the API Get request to have base url in front http://10.44.xxx.xxxx:10000{text_url} and it returns result when testing from backend using a setting a value at url. Also when putting the full url at browser tab it also works.
http://xx.xxx.xx.x39:10000/files/signed/prod-budi-app-assets/app_f609f881551146e59cd50185c52ea8da/attachments/584bd9a0-77e2-4fb4-a471-8a7de05e05c9.csv?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=xxxxuser%2F20250xxx%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250113T141705Z&X-Amz-Expires=3600&X-Amz-Signature=xxxxx635b1d9425fd6647caxxxxxx767db96114dd74a6bba9b315cadcfxxxx4da1&X-Amz-SignedHeaders=host.
But at screen i am getting Bad request 400.

[melohagan]

You shouldn't need to change the base URL. The URL of the file should be a direct link to the file, and thus all you should have to do is pass the file URL as the URL for the GET query.

[NicolasFabre81]

From such JS blocks, is it possible to get the x-budibase-session-id and x-csrf-token variables to be able to run a HTTP budibase request ?

In my case, I managed to integrate a graph with visjs.org , and I'd like to run a db query when clicking on my graph nodes ...

[NicolasFabre81]

In latest budibase version, is it now possible to integrate js library such as d3.js to build complex charts ?