Hey everyone, I am trying to implement a dropdown tag which has multiple selection, I want to implement Lazy Load/lazy Search/Infinite Scroll (Whatever it is called), in the dropdown.
I don't want to use "Dropdown Server Side" as it will require me to update to current OutSystems UI version.
I have use some "InfiniteScroll" Forge component which works for the table, how ever not working for my Dropdown.
Here is the image of that dropdown. I am also attaching the OML. if there is any javascript code which will detect the end fo scrolling and then trigger my OnScrollEnding event, please share, Thank you. Or let me know if anything else is also available.
Hello
You can refer to the Forge Component available
https://www.outsystems.com/forge/component-overview/9513/lazysearch
Thanks
Tousif Khan
Hi,
To detect the end of scrolling: One of the approach is to register a scroll event handler to the DropdownTags options container in the DropdownTagInitialized event handler screen action flow using JS node.
JS Snippet:
Referenced from: stackoverflow
OutSystems.OSUI.Patterns.DropdownAPI.GetDropdownById($parameters.DropdownTagsId)._provider.$optionsContainer.addEventListener('scroll', event => { const {scrollHeight, scrollTop, clientHeight} = event.target; if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) { $actions.OnScrollEnding(); } });
Demo screen: POC_DemoScreen
Refer to the attached oml.
I hope this helps!
Kind regards,
Benjith Sam
I tried it on the dropdown tags, it's not triggering the onscrollending event.
In yours it is just showing on message.
Here is attached new OML
In my sample app I'm invoking a screen action only with a feedback node - just to confirm the flow is getting invoked when the scroll reaches at the bottom.
Did you debug the code to confirm whether the OnScrollEnding screen action is getting called or not? Or is that you meant the OnScrollEnding logical flow you defined is not working as required?