Custom function & infinite scroll

UI Builder
1

Just watched the (really great) Backendless tutorial on ‘Data Paging’ (Data Paging | Backendless Database Training Course (pt. 23) - YouTube). We want to implement “infinite scroll”, so instead of clicking a “load more” button, we want users to scroll which triggers loading more data from a table… two questions:

  1. I’m guessing we would need to create a custom function (JS) which detects scroll position. OK — but is it possible to have such a custom function run “automatically”, so it’s not in a particular event handler of UI Builder? Where to put it? and

  2. can a custom function (JS) invoke a Codeless function (such as the “loadDataWithPaging” marketplace function) if the two functions are in the same logic area? Can a custom function (JS) invoke a custom function (Codeless, in the list of custom functions for our app)?

2

Nobody can answer my two questions above? Maybe I didn’t explain/articulate things well enough… restated:

Can I build custom JS code that includes an event listener (for example, listening for “scroll” events) which then triggers some other Codeless function(s) to run? Where would I place such a JS custom code function? Basically I want to create a scroll event handler. Any help = greatly appreciated :slight_smile:

3

Hi @Alex_Klein

Sorry for the delay in response

There is an OnScroll handler for a Page or a Block component which runs when you scroll content in it

4

you can add a custom js code there or create a custom function and define the code there

5

in order to run a Codeless Function from JS you need to copy the invocation code and then insert it into your Custom Code

UI Builder - test - Backendless 2023-02-21 15-16-15
UI Builder - test - Backendless 2023-02-21 15-16-152598×1499 287 KB

await BackendlessUI.Functions.call('aaa222') // the function id is: "0688c303853a49797e34501e1b1eb4ce"
6

I feel stupid now… don’t know how I missed it:

image

Thanx

7

Ah perfect — so the ‘aaa222’ is the function name, the “0688c303853a49” is the invocation code? Please confirm and thank you :pray:

8

when you click on the context menu CopyInvocationCode it copies the code to the clipboard and you can paste it wherever you need it

yes, “aaa222” is just a name
// the function id is: “0688c303853a49797e34501e1b1eb4ce” this is just a reference to the function, it does not affect to the code execution

await BackendlessUI.Functions.call('aaa222') // the function id is: "0688c303853a49797e34501e1b1eb4ce"
1 Like