April 30, 2013

Scroll a CRM 2011 Tab to the top when is expanded

Tailoring CRM 2011 Forms to customer needs often brings unusual requirements. What can we do if the user wants to automatically scroll a tab to the top when is expanded? We can use this function:
function ScrollTabToTop(executionObj) {
   // retrieve the current tab
   var currentTab = executionObj.getEventSource();
   // check if the click made the tab to be expanded
   if (currentTab.getDisplayState() == "expanded") {
      // set the focus to the current tab
      currentTab.setFocus();
   }
}
The function needs to be attached to the TabStateChange event for all the tabs.
Because the function use the Execution Context, is necessary to select the checkbox "Pass execution context as first parameter" when we add the handler:

2 comments:

  1. Thanks a lot for this guide.

    I have a problem with it. It works correctly on one of my forms, but when I use the same code on another form, it behaves oddly: When I unfold a tab, the system also unfolds the tab ABOVE it, and then sets focus on that one.

    This is definitely caused by the call to "currentTab.setFocus()", because it goes away if I disable this Javascript event.
    It happens only on one particular entity form. On my other entity form it works perfectly. Both are custom entities.

    Do you have any advice on this? Have you seen that before?

    Thanks in advance! :)

    Best regards
    Claus Appel

    ReplyDelete
    Replies
    1. I managed to solve my own problem from above. I did this:

      Common.ScrollTabIntoView = function (executionObj) {
      // Retrieve the current tab
      var currentTab = executionObj.getEventSource();

      // Check if the click made the tab to be expanded
      if (currentTab.getDisplayState() == "expanded") {

      // We cannot trust the tab object that we receive from "getEventSource".
      // Calling "setFocus" on it might fail.
      // Instead, we fetch the "full" tab object from Xrm.Page.ui.Tabs
      // and call "setFocus" on that.
      var tabName = currentTab.getName();
      var fullTab = Xrm.Page.ui.tabs.get(tabName);
      fullTab.setFocus();
      }
      };

      Delete