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
    image

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

35 Responses to List Applet scroll using mouse wheel – Siebel Open UI

  1. Hi Neel,
    Nice article…..Thanks for sharing.
    I tried this thing, and using ‘CONTROL’ key with mousescroll down/up for going to next/prev record is working fine but the using of ‘SHIFT’ key for going to the next/prev page is not working. Do you have any idea why this is not working?

    • It is difficult to say why it is not working without actually looking at it. But can you put some SiebelJS.Log commands and see where it might be breaking.
      and share the output.

  2. Hi Neel,
    I tried with alert functionality and it seems that the code is getting all the constants correctly. like it is getting the constant ‘pvst’ for directionPrev and ‘nxst’ for directionNext as expected from siebel constants when ‘SHIFT’ key is pressed. But not taking user to the next page, a horrizontal scroll to the right/left is happening instead. I think this is another BUG in Siebel Open UI constants. I found another BUG using Siebel Constants like the ‘PHYEVENT_TAB_KEY_PRESS’/’PHYEVENT_ENTER_KEY_PRESS’. In the TAB and ENTER key press, it doesnot matter whether you press a TAB or ENTER key, if you use this.AttachEventHandler(siebConsts.get(“PHYEVENT_ENTER_KEY_PRESS”)), it executes for both ‘TAB’ and ‘ENTER’ key press.
    Do you think this may be an issue with the version of siebel that the user is using? Is the example working fine for you in both the case of ‘CONTROL’ and ‘SHIFT’ key?

    Thanks!!!

    • Chiranjit,

      I implemented my example on sample DB with zero customization and it is working fine with SHIFT key there. It seems that it is mouse scroll issue. What are the delta values that you are getting when you use mouse with shift key???

      Also try to comment the key press part and just invoke the Next Page and Previous Page command and see if it is working.

  3. Neel,

    I tried with commenting the key press code but surprisingly after commenting also, it worked with ctrl+mouse scroll perfectly.I also checked that it is getting the delta value correct;y like for scroll down it is -1 and for up it is 1. I am working on a totaly customized applet, may be thats why something got corrupted and the shift functionality is not working as expected. Anyway I will try to implement the same in sample DB once I get some time and let you know the outcome. One more request can you please check the event of ‘ENTER’/’TAB’ key press that I mentioned earlier in your sample DB and let me know if the are working fine in your sample DB. It will help to know that whether all this issue is for customization or not.
    Thanks again for sharing the article.

  4. Neel,
    Just to update that I tried the same thing with sample DB, but no luck. In sample DB there is zero customization except for that 3rdParty jQuery mousewheel plugin and the custom PR for that particular applet on which I am implementing the code. But no luck, in there also it is working fine with Ctrl key, but not so with the Shift key.
    And the other question that I asked you about ‘ENTER’/’TAB’ key press, yes in sample DB also they are behaving erratically.Like for the event handler of ‘ENTER’ key, ‘TAB’ key press also executes the same thing. I added the following code in the PM file :

    HWDesktopGeneralPM.prototype.Init = function () {
    SiebelAppFacade.HWDesktopGeneralPM.superclass.Init.call(this);

    this.AttachNotificationHandler(consts.get( “SWE_PROP_BC_NOTI_NEW_QUERYSPEC”),function(){
    this.AttachEventHandler(consts.get(“PHYEVENT_ENTER_KEY_PRESS”),function setCodeCheck(keyCode) {
    alert(‘hello’);
    });
    });
    };
    In both TAB and ENTER the alert is coming. Can you check the same thing in your system once and let me know the outcome?

    • Chiranjit,

      I have had a chance to test the TAB/ENTER thing but regarding the page down and page up. If you say you have commented the keys code and still CTRL + scroll combination is working it means that either your changes have not taken effect or you haven’t commented the right code.

      Ideally the code should be just this

      $(‘#’ + pHolder).on(‘mousewheel’, {ctx:this,consts:siebConsts}, function(event){
      var that = event.data.ctx; //get instance
      var directionNext = “”, directionPrev = “”; //initialize
      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 down
      //invoke the physical action
      that.GetPM().OnControlEvent( event.data.consts.get( “PHYEVENT_VSCROLL_LIST” ), directionPrev );
      event.preventDefault(); //stop default action (page scrolling)
      }

      Which means that no code for next record/previous record or reference to any key. This should ideally do a page up and down action when you just go to list applet and perform a scroll.

      Let me know how this goes

  5. I tried to extend the JQGridRenderer as such – but to no avail… Help appreciated 😉

    if(typeof(SiebelAppFacade.MouseWheelListPR) === “undefined”){
    SiebelJS.Namespace(“SiebelAppFacade.MouseWheelListPR”);
    define(“siebel/custom/mousewheelpr”, [“siebel/jqgridrenderer”], function(){
    SiebelAppFacade.MouseWheelListPR = (function(){

    function MouseWheelListPR(pm){
    SiebelAppFacade.MouseWheelListPR.superclass.constructor.apply(this,arguments);}
    //Extend list applet renderer
    SiebelJS.Extend(MouseWheelListPR, SiebelAppFacade.JQGridRenderer);

    MouseWheelListPR.prototype.ShowUI = function(){
    SiebelAppFacade.MouseWheelListPR.superclass.ShowUI.apply(this, arguments);

    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)
    }
    });
    return MouseWheelListPR;
    }
    } ());
    return “SiebelAppFacade.MouseWheelListPR”;
    })
    }

    • I can see two things that are amiss in this PR.

      1. ShowUI signature is wrong. We should only be passing “this” as an argument
      SiebelAppFacade.ListPopup.superclass.ShowUI.call(this);
      2. You haven’t defined BindData and BindEvents. I think at minimum bind data needs to be defined
      ListPopup.prototype.BindData = function (bRefresh) {
      SiebelAppFacade.ListPopup.superclass.BindData.call(this, bRefresh);

      } //end

      I have also shared link to my PR in the comments

      • Working fine now.

        I see two main issues:

        1) If you scroll too fast (by record) using CTRL – Firefox (did not test others) will interpret it as Zoom.
        2) If you scroll up quickly (by page) using Shift – you will face “We are unable to process your request. This is most likely because you used the browser BACK or REFRESH button to get to this point.(SBL-UIF-00335)” error.

        Other than that – it feels as nice basis.

        Jeroen

        • Hi Jeroen,

          I also faced 2nd issue when I had put the code in BindData but after moving it to ShowUI it didn’t happen and I thought it is fixed. It seems I didn’t scroll fast enough.

          I think all it need is tweak to check if there previous page is possible or not and only invoke command if it is allowed. I am trying to look for API that let us know if we are on first page or not.

  6. Neel,
    Thanks!!! Yeah, that worked fine here. With scroll it was taking me to the next page and previous page. Will try to find out the issue behind the code not working properly in my environment once I am free.

    • So, the code is fine and it seems it has go to do something scroll is happening using SHIFT key.. any other shortcut associated with this combination?

  7. Neel,

    I have one query. This is not related to this topic, but I have one requirement where I need to put user email Id in the cc field as soon as user select the recipient from the pick applet after pressing F9 in open ui. Is there any way to achieve this requirement?

    Thanks!!

  8. Hi Neel,

    thank you so much for your post. Really interesting. I assume you will have to add the PR file to the manifest as well, otherwise it will never be loaded by the browser?
    If so, to which manifest do you do that? To the same one you ued to add the jquery file for the mousewheel? (I mean, Application, PLATFORM_INDEPENDENT?)
    And another thing I noticed… On my environment (8.1.1.11_11), I noticed that I am not able to add files to that manifest. For entries I created myself, i am able to do that. So i cant actually test this functionality. Am i the only one having this problem?

    Thanks in advance!
    Ozzie

    • Ozie,

      Yes the files have to be added in manifest. You need to copy PLATFORM_INDEPENDENTT entry and add your files in that. That is the only way to have a JS file available throughout the application.
      I am sure Oracle is going to give a better way in future for this.

  9. Hi Neel,
    I am new to open UI and doesn’t know much about it. Can you please let me know in which PR File you are referring to add the above code? Is it phyrenderer.js or someone else. Appreciate your help!
    Or Do we Need to save this JS file as it is in 3rd Party Folder. I am confused, can you please clarify this?

      • @lex was kind enough to provide me a solution to the problem.

        The problem with the zoom kicking in when you scroll too fast can be rectified (so I found in the debugger) when you switch from -1 or 1 to ‘less than or equal to -1’ or ‘greater than or equal to 1’

        You need to change the comparison operator. I will soon be posting the complete solution on blog.

  10. Thanks Neel for your code and explanation. I am implementing it here in our project and of course, giving you the credits in the comment of the PR file

  11. Hi Nell,

    thanks for your code.

    As another blogger I have faced some issues with IE by SHIFT key. It does not work similiar for Chroome or IE.

    Here the solution code I have implemented.

    if (event.ctrlKey || (!(event.ctrlKey) && !(event.shiftKey))) { //in case of CTRL Key get the constants for Next Record and Previous Record
    if (event.deltaY === -1) { //delta Y = -1 means scroll down
    direction = “PAG_NEXT_RECORD”;
    }
    else if (event.deltaY === 1) { //delta Y = 1 means scroll up
    direction = “PAG_PREV_RECORD”;
    }
    }
    else if (event.shiftKey) { //in case of shift key – Next Page and Previous Page
    if (event.deltaX === 1){ //delta X = 1 means scroll down
    direction = “PAG_SCROLL_DN”;
    }
    else if (event.deltaX === -1) { //delta X = -1 means scroll up
    direction = “PAG_SCROLL_UP”;
    }
    else if (event.deltaY === -1) { // scroll down for IE
    direction = “PAG_NEXT_SET”;
    }
    else if (event.deltaY === 1) { // scroll up for IE
    direction = “PAG_PREV_SET”;
    }
    }
    if (that.GetPM().OnControlEvent(event.data.consts.get(“PHYEVENT_VSCROLL_LIST”), event.data.consts.get(direction))) {
    SiebelJS.Log(that.GetPM().Get(“GetName”)+”: DefaultListRendererPR: Error on mousewheel direction = ” + direction);
    }

    Here you get the full code.
    https://www.dropbox.com/s/7kblh5xqvvezlqu/DefaultListRendererPR.js

    Regards,
    Jose Luis

  12. Hi Neel,

    Wondering if there is a solution can be imnplemented across the application on all List Applets instead of adding One entry for each applet in the Manifest Administration ?

    Not sure if we have anything like the Plugin Wrappers that are introduced for controls..
    Any thoughts?

    Thanks!
    Ashok

    • Hi Ashok,

      Yes there is a global solution. You can register a global js file and attach the postload event handler with it.
      Then loop around all the applets present and determine if there is a list applet present and attach the mousewheel event with all those applets.

      You can refer to Siebelhub framework release by @lex for working code. I am also working on writing a post around the solution but not sure how much time will it take

  13. Hi Neel,

    I have a similar requirement for one of the task assigned to me. I tried to implement the same with some small modifications but couldn’t do that due to an older version of Siebel(IP2013 Path) which doesn’t have the ‘Manifest Administration Screen’.
    Kindly let me know that how can I register the ‘mousewheel.js’ and ‘unmousewheel.js’ files in the older version of Siebel.

    Thanks in advance !

    Regards
    Siddhant

Leave a Reply

Contribute