Servoy Forum

POPUP FORM
How do I anchor a form popup when clicking a button?

I'm having a form popup after clicking a button. However, the form just shows up in the center of the screen. I want it to show up where the user clicked the button. Is there a way of doing that?

Code: Select all

/**
* @private
*
* @properties={typeid:24,uuid:"B7A2E14D-B371-41A3-9BF9-DE2B900592C2"}
*/
function pop_filterWindow() {
   
   plugins.window.createFormPopup( forms.grid_filter_css ).show()
   
}


EXAMPLE OF WHAT I WANT TO DO



MODAL
Or is that not possible to do in Servoy, and instead use some type of Modal window instead? What is the best Modal Dialogue for TiNG? Is that JSWindow?

Hi John,

that can be done in 2 ways:

Code: Select all

/**
* @param {JSEvent} event
* @param {String} dataTarget
*
* @private
*
* @properties={typeid:24,uuid:"C5746AB8-1B48-42EB-95CB-5144362AB6B2"}
*/
function onActionOpenFID(event, dataTarget) {
   var x = event.getX();
   var y = event.getY();
   
   pop_filterWindow(x, y);
}

/**
* @private
*
* @properties={typeid:24,uuid:"B7A2E14D-B371-41A3-9BF9-DE2B900592C2"}
*/
function pop_filterWindow(x, y) {
   
   var f = plugins.window.createFormPopup( forms.grid_filter_css );
   f.x(x);
   f.y(y);
   
   f.show();
}

or

Code: Select all

/**
* @param {JSEvent} event
* @param {String} dataTarget
*
* @private
*
* @properties={typeid:24,uuid:"C5746AB8-1B48-42EB-95CB-5144362AB6B2"}
*/
function onActionOpenFID(event, dataTarget) {
   pop_filterWindow(event.getSource());
}

/**
* @param {RuntimeWebComponent} e
*
* @private
*
* @properties={typeid:24,uuid:"B7A2E14D-B371-41A3-9BF9-DE2B900592C2"}
*/
function pop_filterWindow(e) {
   
   var f = plugins.window.createFormPopup( forms.grid_filter_css );
   f.component(e);
   
   f.show();
}

mboegem wrote:Hi John,

that can be done in 2 ways:

Code: Select all

/**
* @param {JSEvent} event
* @param {String} dataTarget
*
* @private
*
* @properties={typeid:24,uuid:"C5746AB8-1B48-42EB-95CB-5144362AB6B2"}
*/
function onActionOpenFID(event, dataTarget) {
   var x = event.getX();
   var y = event.getY();
   
   pop_filterWindow(x, y);
}

/**
* @private
*
* @properties={typeid:24,uuid:"B7A2E14D-B371-41A3-9BF9-DE2B900592C2"}
*/
function pop_filterWindow(x, y) {
   
   var f = plugins.window.createFormPopup( forms.grid_filter_css );
   f.x(x);
   f.y(y);
   
   f.show();
}

or

Code: Select all

/**
* @param {JSEvent} event
* @param {String} dataTarget
*
* @private
*
* @properties={typeid:24,uuid:"C5746AB8-1B48-42EB-95CB-5144362AB6B2"}
*/
function onActionOpenFID(event, dataTarget) {
   pop_filterWindow(event.getSource());
}

/**
* @param {RuntimeWebComponent} e
*
* @private
*
* @properties={typeid:24,uuid:"B7A2E14D-B371-41A3-9BF9-DE2B900592C2"}
*/
function pop_filterWindow(e) {
   
   var f = plugins.window.createFormPopup( forms.grid_filter_css );
   f.component(e);
   
   f.show();
}

Thank you very much for this!

I want to make a comment on the behavior of the solution.


Since I'm using bootstrap columns, the button I'm using to activate the window technically can be moved around....

show() only seems to TRANSFORM where the window appears, rather than ANCHOR it to the button's position which can moved around.


Is there way of anchoring a position rather than just transforming the X, Y ? This is more up to Servoy's functionality of course.