Having difficulties calling a custom function from an event listener

I’m trying to call a UI Builder custom function from a dblclick event listener added on pageEnter.

When the element is double-clicked on, I need to call a custom function and then I need to capture the value returned from the custom function after it’s invoked.

I was hoping that someone would have some examples on how to do this properly.

Here is the code where the event listeners are being added: (Which is working correctly)

// Create an array by ClassName 'content_editable' and invoke the function (editable) and create an event listener for each index in the array
const runner = { currentDataSource: ""};

Array.from(document.getElementsByClassName('content_editable')).forEach((editable) => {
  editable.addEventListener('click', (e)=>{

editable.addEventListener('dblclick', (e)=>{
    runner.currentDataSource = e.currentTarget.getAttribute('data-source');
    console.log("A double-click has occurred on element with the ID of: "+ runner.currentDataSource);
    return runner


When the dblclick event occurs, I need to call a Backendless custom function and pass the custom function the runner.currentDataSource object.

Then the custom function passes an objectId back to UI Builder so I can launch a rich-text editor and load its appropriate content from the passed objectId that the user just double-clicked on.

I know I’m probably overthinking this! :slight_smile:

Any help would be appreciated!

Hi @Michael_Kadron

Well, I would recommend you create a custom UI component and have all the necessary logic inside.
However, I can try to provide you with an alternative solution using CustomCode codeless block

  1. you provide a code from the CustomCode block which you are running on a page enter, is that correct?

  2. in order to execute a custom function from the CustomCode block you need to copy the function invocation code, for that open the custom function logic editor and using the context menu copy the code by clicking on the “Copy Invocation Code”

  1. then open your custom code and paste it into the code

is this what you are looking for?

I’ve got this working correctly without calling an custom function, however, I’m having some issues removing an event listener that’s been added from a custom code block.

Do I need a special Backendless call to remove a listener that’s registered within a custom code block?

Here’s the code for the addEventListener triggered by a button click:

const myFunction = (e)=> {

const myFunction2 = (e)=> {
  pageData.currentDataSource = e.currentTarget.getAttribute('data-source'); // Above code MUST be set to currentTarget to trap the element's event that the code is actually running from.
  console.log("pageData.currentDataSource =: "+ pageData.currentDataSource);
  pageData.isOpenModal = true;
  return pageData  

Array.from(document.getElementsByClassName('content_editable')).forEach((editable) => {
  editable.addEventListener('click', myFunction);
  editable.addEventListener('dblclick', myFunction2);

and here’s the code to try to unregister the listener, also called by a button click:

const myFunction = (e)=> {
  // console.log(e.currentTarget.getAttribute("data-source"));

const myFunction2 = (e)=> {
  pageData.currentDataSource = e.currentTarget.getAttribute("data-source");
  // console.log("pageData.currentDataSource =: "+ pageData.currentDataSource);
  pageData.isOpenModal = false;
  return pageData;

Array.from(document.getElementsByClassName("content_editable")).forEach((editable) => {
  editable.removeEventListener("click", myFunction);
  editable.removeEventListener("dblclick", myFunction2);

Both of these custom code blocks are located on the same page, inside a reusable component.

I’m thinking that the issue that I’m having is from the constants not being declared from a global scope, but I’m not sure how to fix this.

Hello @Michael_Kadron

Could you create or share a minimal reproducible example on an external page? It should be an example that doesn’t require any business logic and doesn’t require a login.


I could do a page without login, but I already mentioned that the eventListeners are added by two element onClick events.


Okay, can you let us know when you create a reproducible example for us?


Hello @Inna_Shkolnaya

Here’s the link: https://app.webmojo.io/api/files/ui-builder/containers/accofgweb/index.html?page=home_diagnosics

Clicking on the “Edit” button on the toolbar at the top adds the event handlers, which are triggered when you double-click on one of the editable paragraphs in the document, such as “Building Tomorrow Today…”.
Clicking on the “Cancel” button in the same toolbar is supposed to remove the listeners.
It doesn’t, and multiple listeners are created when the “Edit” button is clicked again.

I know I’m probably doing something stupid :slight_smile:


Hello @Michael_Kadron

Take a look at this post. I believe that must helps you.

Regards, Dima.

Hello again, @Inna_Shkolnaya, @Dima

Thank you, I will try to implement that approach.
I figured that scope was what was breaking this.

On another issue, is there a workaround for the errors when editing inside a reusable component for missing unknown components that belonged to the owning webpage?

This is very annoying, since the errors prevent you from editing and saving existing logic if you try to edit the reusable component.

This is actually working correctly, because the reusable component is referring to the legitimate Snackbar ID that exists on the containing webpage.

…But these can’t be removed, because it would be impossible to add it back again, since the Snackbar doesn’t exist inside the reusable component.

Do you have any JS examples for calling the Snackbar from a custom code block using the ID of the control?

Answered here - Reusable Controls Issue