If you have been using Open UI for a while, you can list out many differences you observe from HI client and Open UI client. One difference is if you right click on a list applet, it does not open the menu as it did in HI client. If you are looking to make this work similar to HI client, this post is for you.
Below is the PM code to open the applet menu on right click on Applet.
---------------------------------------------------------------------------------------------
if( typeof( SiebelAppFacade.openmenupm ) === "undefined" ){
SiebelJS.Namespace( "SiebelAppFacade.openmenupm" );
define("siebel/custom/openmenupm", [], function () {
SiebelAppFacade.openmenupm = ( function(){
var consts = SiebelJS.Dependency( "SiebelApp.Constants" );
function openmenupm( proxy ){
SiebelAppFacade.openmenupm.superclass.constructor.call( this, proxy );
}
SiebelJS.Extend( openmenupm, SiebelAppFacade.ListPresentationModel );
openmenupm.prototype.Init = function(){
SiebelAppFacade.openmenupm.superclass.Init.call( this );
this.AddMethod( "ShowSelection", SelectionChange, { sequence : false, scope : this } );
};
function SelectionChange(){
var FullId = this.Get("GetId"); // get applet Id
$(".ui-jqgrid-btable").mousedown(function(event){
if(event.which == 3) //this is the right click event on table body
{
$("#s_at_m_" + FullId).click(); // simulate click on the menu object
return false;
}
});
$(function () {
$(".ui-jqgrid-btable").bind("contextmenu",function(e){
e.preventDefault(); // prevent the right click browser menu to open like view source, inspect element
});
});
};
return openmenupm;
} ());
return "SiebelAppFacade.openmenupm";
});
}
Below is the PM code to open the applet menu on right click on Applet.
---------------------------------------------------------------------------------------------
if( typeof( SiebelAppFacade.openmenupm ) === "undefined" ){
SiebelJS.Namespace( "SiebelAppFacade.openmenupm" );
define("siebel/custom/openmenupm", [], function () {
SiebelAppFacade.openmenupm = ( function(){
var consts = SiebelJS.Dependency( "SiebelApp.Constants" );
function openmenupm( proxy ){
SiebelAppFacade.openmenupm.superclass.constructor.call( this, proxy );
}
SiebelJS.Extend( openmenupm, SiebelAppFacade.ListPresentationModel );
openmenupm.prototype.Init = function(){
SiebelAppFacade.openmenupm.superclass.Init.call( this );
this.AddMethod( "ShowSelection", SelectionChange, { sequence : false, scope : this } );
};
function SelectionChange(){
var FullId = this.Get("GetId"); // get applet Id
$(".ui-jqgrid-btable").mousedown(function(event){
if(event.which == 3) //this is the right click event on table body
{
$("#s_at_m_" + FullId).click(); // simulate click on the menu object
return false;
}
});
$(function () {
$(".ui-jqgrid-btable").bind("contextmenu",function(e){
e.preventDefault(); // prevent the right click browser menu to open like view source, inspect element
});
});
};
return openmenupm;
} ());
return "SiebelAppFacade.openmenupm";
});
}
------------------------------------------------------------------------------------------------------------
This code is working fine but please test this thoroughly if you are trying to use it in your application.
The only issue is this PM opens the menu of the Applet as if the user clicked on the Menu button. The only difference is that the menu opens near the menu button and not at the location of mouse click. This can be taken care by setting the menu object's top and left coordinates like below. You can try and see if the code similar to below can be used to set the coordinates.
---------------------------------------------------------------------------------------------
var y = event.clientY; // get current click Y coordinate
var x = event.clientX; // get current click X coordinate
$("#s_at_m_" + FullId).click(); // open Menu
var off = $("#s_at_m_" + FullId).offset().top; // get the height of menu button
y = y - off; // calculate the Y of the menu click with respect to Menu button
$(".siebui-appletmenu").css("position","absolute");
$(".siebui-appletmenu").css("top",y);
$("siebui-appletmenu").css("left",x); // set the coordinates
return false; // this is a psuedo code and it works for y coordinate, x coordinate is not working.. give it a try and try opening the menu at the click location
---------------------------------------------------------------------------------------------
Well this is not full functional code, but give it a try to open the menu at the click coordinates.
So, we can make the Applet Menu to open on right click of the Applet. If you have a requirement to make the applet work similar to HI mode, this code will take care of it.
Hope this helps!!
Thanks for the post.
ReplyDeleteI know this is old, but I bet your x-coordinate is not working because in the last few lines of your code you have '$("siebui-appletmenu")' as the jQuery selector for 'x' instead of '$(".siebui-appletmenu")' (The dot "." is missing.)
Take care.