Scroll to particular component using af:scrollComponentIntoViewBehavior tag in ADF Faces

Sharing is Caring

You all must have seen HTML Anchor links, this is actually called link within the page and used to navigate between page sections
Same as HTML anchor tag ADF Faces has af:scrollComponentIntoViewBehavior tag that allows the user to jump to a particular component on the page

See what docs say-
The scrollComponentIntoViewBehavior tag is a declarative way to have a command component (e.g. a button) scroll a component into view and optionally set focus in it. This tag will be ignored for any server-rendered components, as it is only supported for the rich client.
The scrollComponentIntoViewBehavior tag cancels server-side event delivery automatically – so actionListener or action attributes on the parent component will be ignored. This cannot be disabled. Developers that need to also trigger server-side functionality can add an additional client listener that uses AdfCustomEvent and af:serverListener to deliver a server-side event. 

So in this post, I am using 5 images and 5 buttons to navigate to each image, set clientComponent property of all af:image to true because this tag is supported only by client rendered components.

Dropped scrollComponentIntoViewBehavior under all buttons and provided the id of respective af:image component
See XML source of the page –

<af:panelStretchLayout id="psl1" topHeight="25px" bottomHeight="25px" dimensionsFrom="parent">
                    <f:facet name="bottom">
                        <af:panelGroupLayout id="pgl3" layout="horizontal">
                            <af:button text="Paragliding" id="b4">
                                <af:scrollComponentIntoViewBehavior componentId="i1"/>
                            </af:button>
                            <af:button text="Rope Way" id="b5">
                                <af:scrollComponentIntoViewBehavior componentId="i5"/>
                            </af:button>
                        </af:panelGroupLayout>
                    </f:facet>
                    <f:facet name="center">
                        <af:panelGroupLayout id="pgl1" layout="scroll">
                            <af:image source="#{resource['images:1.jpg']}" id="i1"
                                      inlineStyle="width:700px;height:400px;" shortDesc="Paragliding"
                                      clientComponent="true"/>
                            <af:image source="#{resource['images:3.jpg']}" shortDesc="Rope Way" id="i5"
                                      inlineStyle="width:700px;height:400px;" clientComponent="true"/>
                            <af:image source="#{resource['images:2.jpg']}" id="i2"
                                      inlineStyle="width:700px;height:400px;" shortDesc="Green Ground"
                                      clientComponent="true"/>
                            <af:image source="#{resource['images:8.jpg']}" id="i3"
                                      inlineStyle="width:700px;height:400px;" shortDesc="Beautiful Cottage"
                                      clientComponent="true"/>
                            <af:image source="#{resource['images:9.jpg']}" id="i4"
                                      inlineStyle="width:700px;height:400px;" shortDesc="Sheeps"
                                      clientComponent="true"/>
                        </af:panelGroupLayout>
                    </f:facet>
                    <f:facet name="start"/>
                    <f:facet name="end"/>
                    <f:facet name="top">
                        <af:panelGroupLayout id="pgl2" layout="horizontal">
                            <af:button text="Green Ground" id="b1">
                                <af:scrollComponentIntoViewBehavior componentId="i2"/>
                            </af:button>
                            <af:button text="Beautiful Cottage" id="b2">
                                <af:scrollComponentIntoViewBehavior componentId="i3"/>
                            </af:button>
                            <af:button text="Sheeps" id="b3">
                                <af:scrollComponentIntoViewBehavior componentId="i4"/>
                            </af:button>
                        </af:panelGroupLayout>
                    </f:facet>
                </af:panelStretchLayout>

Page looks like this –

af:scrollComponentIntoViewBehavior

All done, now just click on buttons to navigate among images. here I am attaching sample ADF application for reference – Download

Cheers:) Happy Learning

Related Posts

6 thoughts on “Scroll to particular component using af:scrollComponentIntoViewBehavior tag in ADF Faces”

  1. Hi Ashish,
    In af:table, if we have horizontal scroll. page does not scroll to mandatory field by default. So if I have a button which is suppose to take me to some other page and there is a mandatory check on one of columns which is visible only when you scroll, user does not get to know what is the issue and still won’t be able to navigate.
    Is there any way we can solve this?
    Requirement is not to navigate to other page unless this page has all mandatory fields populated, so can’t put immediate=true on the button.

    Thanks in advance!

Leave a Reply

Your email address will not be published. Required fields are marked *