SAP UI5 Binded Text inside a ScrollContainer

[Silvio_Stoykov]

Hello colleagues,

I am trying to enable an “Accept” button only when a user has scrolled to the bottom of a long text (e.g., license agreement). This logic works only when the text is hardcoded directly in the <Text> control, like:

<Text text="Some long hardcoded sentence..." />

However, when the text is bound to a model:

<Text text="{/long/text}" />

The “Accept” button becomes enabled immediately, without scrolling, which breaks the expected behaviour.
The <Text> control is wrapped inside a <ScrollContainer> like that:

<ScrollContainer id="someId" height="400px" vertical="true" focusable="true"
width="100%">
    <Text id="anotherId" text="{/long/text}" wrapping="true" width="100%"> 
        <layoutData>
            <l:GridData span="XL12 L12 M12 S12" />
        </layoutData>
    </Text>
</ScrollContainer>

It works correctly when I call the function that handles the scrolling inside an onAfterRendering like that:

			this.onAfterRendering = function(){
				setTimeout(() => {
					this.handleScrollbar();
				}, 1000)	
			}

However, I would like to avoid using setTimeout. Any help would be appreciated!

Kind Regards,
Silvio

[Manisha_19]

Hi @Silvio_Stoykov,

So, the main issue arises due to how the content is loaded.
When the <Text> control contains hardcoded text, the scroll height is fully available during rendering.
However, when the text is bound to a model (e.g., {/long/text}), it loads asynchronously. As a result, the scrollable height isn’t immediately calculated, causing your scroll logic to assume there's no need to scroll — and enabling the button too early.

Assuming you Button is like the following - 

<Button id="acceptButton" text="Accept" enabled="false" press="onAccept" />

 Do not bind button enabled to any model property.
 Only set it to true in the scroll listener when the bottom is reached.

And to answer your second question -> Instead of setTimeOut you can use "addEventDeleagate". It attaches your handler to a control’s lifecycle event, so your function runs immediately after that event happens. This is more reliable than waiting a fixed delay with "setTimeout", which guesses when the UI is ready but can be wrong.

this.getView().addEventDelegate({
  onAfterShow: () => {
    this.handleScrollbar();
  }
});

This ensures handleScrollbar() runs right after the view is fully shown, without arbitrary delays.
Reference - https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.core.Element%23methods/Summary

Hope this helps 🙂

Regards,
Manisha Chaturvedi