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.