Popup Form After Clicking Button?

Feedback
1

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?

/**
 * @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
[attachment=0]Screenshot 2023-02-14 173408.png[/attachment]

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?

Screenshot 2023-02-14 173408.png
Screenshot 2023-02-14 173408.png310×244 11.6 KB

2

Hi John,

that can be done in 2 ways:

/**
 * @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

/**
 * @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();
}
3

mboegem:
Hi John,

that can be done in 2 ways:

/**

  • @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

/**

  • @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!

4

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.