Use case of scrollComponentIntoViewBehavior

The scrollComponentIntoViewBehavior tag is a declarative way to have a command component  scroll a component into view and optionally set focus on it. scrollComponentIntoViewBehavior.

In this post, I will explain a use case of scrollComponentIntoViewBehavior tag to scroll and set focus on a component in a page.

UseCase:

In a webcenter application, if you have a menu defined as mentioned below.

where all the selections(i.e Calendar, Choose Date etc.) are mapped to the same page i,e if a user selects any of these options, he/she is navigated to the same page but with the selected option/section scrolled and focused into. It is similar to anchor tag for jumping on a specific location of a page.

Steps implemented are:

1. Create a Webcenter Portal Framework Application.

2.Create a new jspx page. (eg: news.jspx). In this page, define the various components to set focus on based on selection in navigation menu.

3. Define the navigation menu as mentioned above.

• Go to default-navigation-model & delete the default pageHierarchy
• Click on Add new node and select link from various options. Modify Id, Type, URL, URL Attributes for the Home page as shown below.
  
  
  
  
  
• Add another node of type link below Home as Calendar. Set the Id, Type, URL, URL Attributes for the new page. Additionally set a URL parameter for this node as shown below.
  
  
   
  
  
  Here the url parameter section is assigned value: pt1:pb1 which is clientId of the component to set focus on when Calendar is chosen from the navigation menu.
• Repeat the above steps to add other nodes(Choose Date & Choose Color).

4. Define a command button with visible property set to false. Add scrollComponentIntoViewBehavior inside it as shown below.

Here the componentId property of scrollComponentIntoViewBehavior is set to #{param.section}.

5. Define a client listener method scrollToComponent on page Load. The java script code is

function scrollToComponent(loadEvent) {
     var id = "pt1:command1";
     var t = document.getElementById(id);
     t.click();
}

when the user selects any option(i.e Calendar, Choose Date) from the navigation menu, the page news.jspx is loaded which triggers the above java script and in turn clicks the command button and invokes scrollComponentIntoViewBehavior tag. 

Based on the url parameter set in the default-navigation-model the navigation jumps to the particular section of the page.

Sample workspace:

Download the sample workspace from here.