Set popup position

#1

Hi


I have a request to put a filtered chart in a popup. The client wants to view the unfiltered chart on the dashboard, and click a button to see the same chart filtered on the popup. They need to be side by side for comparison


I have put the filtered chart on a separate dashboard, and a popup interaction on the button. The problem that I am running into is that it doesn't seem possible to control where the popup appears or move it afterwards. This means that sometimes the popup overlaps the unfiltered chart so that both are not visible simultaneously.


Is there any way to control this, or do I need to use layers (which I really don't want to do as I have enough already).

#2

A quick fix would be to programmatically move the popup window you have created. Here is a sample script I found that should do the trick:


// use the script name of the adapter that shows the popup i.e. chart1
// use "click" instead of "hover" if you want to show the popup on click
$(chart1).on("hover",function(e){
e.actionDeferreds[0].done(function(){
var popup = chart1.hoverActions[0].getPopup();
if(!popup){
return;
}
else{
// the position (0,0) starts from top-left corner
popup.left =0;
popup.top=0;
// recalculates position and shows accordingly
popup.updateLayout();
}
});
});

The other option is to indicate the position while creating the popup, which means creating the whole popup programmatically, including the parameter mapping you require to filter. This approach is more involved, but I should be able to give you a sample script if you want.

#3

I think the second option is best for my requirements.

Can you send the sample script for that please Elia?

#4

This is what I have. Let me know if something isn't clear or there are any issues.


//values that are needed

var opt = {

clickResult: e.relatedData.metricSetBinding.dataResult.cellset.rows[e.relatedData.rows[0]].members[0].compatibleUniqueName;

width: 400,

height: 400,

popupId: "d250cb23-677a-4fb3-8807-2dcbe48bd1d9",

thisId: "12adb819-b5e5-71ca-ed60-97142ca33b65"

};


//Set the event data to center, and set the adapter property. This places the popup right in the middle of the screen. Adjust as needed.

e.originalEvent.clientX = (e.originalEvent.view.innerWidth - opt.width) /2;

e.originalEvent.clientY = (e.originalEvent.view.innerHeight - opt.height) /2;


//the adapter is set in the event, because we are passing it to execute() instead.

e.adapter = this.getService("CanvasService").canvasAdapter.getAdapterById(opt.thisId);


//Create the Popup settings

var popUpOptions = {

targetObjectId: opt.popupId,// used the id of the popup dashboard

targetObjectType: "Dashboard",

actionType: dundas.view.ActionType.POPUP,

actionTarget: dundas.view.ActionTarget.SAME_WINDOW,

navigateType: dundas.view.DataActionNavigateType.ANOTHER_VIEW,

boundVisual: "",

width: opt.width,

height: opt.height,

isMouseLeaveIgnored: true,

isFocusLostIgnored: false,

parameterMappings: []

};


//set up the parameter mappings to pass the parameter from the adapter to the popup dashboard.
var mapping1 = new dundas.view.ParameterMapping({
source: new dundas.view.ParameterMappingItem({
"parameterValueType": dundas.data.ParameterValueTypes.ALL_HIERARCHY,
"elementUsageUniqueName": "Group"
})
,
target: new dundas.view.ParameterMappingItem({
"parameterValueType": dundas.data.ParameterValueTypes.ALL_HIERARCHY,
"elementUsageUniqueName": "Group",
"viewParameterId": "3538c295-bd15-2f29-3f26-9e355c9482c7" // the id of the view parameter in the popup dashboard
})
});
popUpOptions.parameterMappings.push(mapping1);


//Create and execute the Popup.

var popup = new dundas.view.PopupAction(popUpOptions);

popup.execute(e);

#5

Thanks Elia - this works perfectly

#6

This no longer seems to work for setting the positioning of the popup. Can anyone else verify or add the new solution?

#7

Does the script at least run all the way through for you? When I run it, it gives me this in the browser console:

image

#8

Yeah I am able to get the script to fire without errors, it just doesn’t do anything to reorient the popup properly. Maybe you messed up the IDs.

#9

You’re right! My thisId must wrong when setting it up, as e.adapter is undefined for me.

I was under the assumption that this Id should be the ID of the current dashboard/view, so now I’m wondering what thisId should be. What did you use for it, Dante?

#10

I think it’s the id of the button that is clicked to bring up the popup