List Applet scroll using mouse wheel – Siebel Open UI

I was going through Open UI themes a really nice site dedicated to paid themes and plugins for Siebel Open UI. While browsing the plugin section I came across a plugin that was titled Auto-Scroller Plugin. The description said that it allows you to navigate through list applet (Next Page, Previous Page, Next Record , Previous Record) using scroll action (mouse wheel scroll) instead of clicking the icon and scrolling.

I really liked the idea and set about implementing it and soon I had a working PR which included in a list applet allows following behavior:

1. If CTRL Key is pressed and scroll action is preformed, then record by record navigation will occur.
2. If SHIFT key is pressed and scroll action is preformed, then page by page navigation will occur.
3. Scrolling without any key will perform normal behaviour i.e. page scrolling

Want to know how to do it ? So, lets get started

I used a jQuery plug-in named jquery-mousewheel to track mouse wheel although technically you can write your own code to track mouse wheel but I didn’t see any point in re-inventing the wheel so went the plug-in route.

jQuery-mousewheel plugin details:

The plug-in gives you two events “mousewheel” and “unmousewheel”.

mousewheel: When this event is bound to a particular element it gives you direction, X and Y co-ordinates when ever mouse wheel is used on that element.

unmousewheel: This event is used to unbind tracking of mouse wheel.

Here are the steps for the plug-in:

1. Download the plugin js from here.
2. Copy the jquery.mousewheel.min file in the 3rd party folder.
3. Go to manifest administration and query for entry Create a manifest entry for the file in the PLATFORM INDEPENDENT
   

That’s it for the plugin part. Now comes the PR part.

List Applet PR:

var pHolder = this.GetPM().Get("GetFullId"); //get placeholder to bind the mousewheel event
var siebConsts = SiebelJS.Dependency( "SiebelApp.Constants" ); //get the constants

//code to add mouse scrolling to list applets
$('#' + pHolder).on('mousewheel', {ctx:this,consts:siebConsts}, function(event){
    var that = event.data.ctx; //get instance
    var directionNext = "", directionPrev = ""; //initialize

    if(!(event.ctrlKey) && !(event.shiftKey)){ //if no key pressed then do nothing
       return true;
    }
    if(event.ctrlKey && event.shiftKey){ //if both are pressed do nothing
       return true;
    }

    if(event.ctrlKey){ //in case of CTRL Key get the constants for Next Record and Previous Record
       directionNext = event.data.consts.get("PAG_NEXT_RECORD");
       directionPrev = event.data.consts.get("PAG_PREV_RECORD");
    }
    else if(event.shiftKey){ //in case of shift key - Next Page and Previous Page
       directionNext = event.data.consts.get("PAG_NEXT_SET");
       directionPrev = event.data.consts.get("PAG_PREV_SET");
    }

    if(event.deltaY === -1){ //delta Y = -1 means scroll down
     //invoke the physical action
     that.GetPM().OnControlEvent( event.data.consts.get( "PHYEVENT_VSCROLL_LIST" ), directionNext );
     event.preventDefault(); //stop default action (page scrolling)
    }

    if(event.deltaY === 1){//delta Y = 1 means scroll up
      //invoke the physical action
      that.GetPM().OnControlEvent( event.data.consts.get( "PHYEVENT_VSCROLL_LIST" ), directionPrev );
      event.preventDefault(); //stop default action (page scrolling)
    }
});

Including the above code in ShowUI method will make the PR complete. The code itself is not as complex as was the finding, how to do it. This code basically is

“Whenever mousewheel (thanks to plugin) action happens on the list applet div (applet placeholder) then check if either Shift key or CTRL key is down at that time then based on the scroll direction either perform page up/page down/next record/previous record.”

Inclusion of keys (CTRL / SHIFT) was not compulsory but then you would end up with following problems

1. Normal page scroll functionality wouldn’t work on list applet
2. You would have to calculate based on distance if user intended next record or next page. There are chances of doing what the user didn’t intend

Explicit use of keyboard keys helps us to do exactly what user intends to do, rather than guessing.

The key to whole functionality is knowing how to trigger the list applet scroll event using onControlEvent and Siebel Constant. Hopefully the code is simple enough to understand but if you still have questions find the comments section.

Happy Scrolling !!! Don’t forget to rate the post and encourage through comments.

Note: In case you end up using this in anywhere please don’t forget to credit the author (that’s me! ). This will keep me motivated to build bigger and better things in Open UI and most importantly share it with all of you.

Another Note: It seems there were some problems in trying to use the code. So, I am posting the link to the PR that is working for me. Hopefully just including this along with the plugin should get the functionality working

Download PR From Here