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)=>{
console.log(e.currentTarget.getAttribute('data-source'));
});
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.
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
you provide a code from the CustomCode block which you are running on a page enter, is that correct?
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”
@vladimir-upirov
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)=> {
console.log(e.currentTarget.getAttribute('data-source'));
}
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:
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.
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.
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.
