Popup Form After Clicking Button?

Find out how to get things done with Servoy. Post how YOU get things done with Servoy

Popup Form After Clicking Button?

Postby john1598360627 » Wed Feb 15, 2023 3:43 am

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

Screenshot 2023-02-14 173408.png
Screenshot 2023-02-14 173408.png (14.63 KiB) Viewed 1359 times



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?
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Popup Form After Clicking Button?

Postby mboegem » Wed Feb 15, 2023 12:23 pm

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();
}
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Popup Form After Clicking Button?

Postby john1598360627 » Wed Feb 15, 2023 11:55 pm

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!
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Popup Form After Clicking Button?

Postby john1598360627 » Sat Feb 18, 2023 4:18 am

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.
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm


Return to How To

Who is online

Users browsing this forum: No registered users and 10 guests