dialog window management

[kotinkarwak]

Hi,
Looking up how to implement a login dialog from the webapp menu where on click of the login button, a dialog is opened positioned at/near the button as shown in a sample site I am referencing

http://screencast.com/t/QvA9PusVOKV

In such implementation, should the page for login be defined as a separate form or can it simply be a page for the app's main form? Any consideration I need to be aware on either approach?

Working through Acallis sample template just to layout the page and still finding my way in ebase but getting there.

regards.


Working in V5.0.0, build 20150706

[Jon]

It's probably best as a separate form. The alternative to this would be to popup a panel - it isn't possibly to popup a page. A technique we use quite a lot is to popup a form using a jQuery dialog and an iframe containing the url to launch the form, something like this:

Code: Select all

function displayFormPopup(formName, title, tgt, width, height, closeFunction)
{
  var iframe = "<iframe id='iframepopup' src='" 
                + formName + ".eb"
	              + "' width='100%' height='100%' align='center' frameborder='0'/>";
	var tgt = $&#40;tgt&#41;;
	tgt.empty&#40;&#41;;
	tgt.append&#40;iframe&#41;;
	tgt.dialog&#40; &#123; 
		width&#58; width, 
		height&#58; height, 
		modal&#58; true, 
		resizable&#58; true, 
		title&#58; title, 
		draggable&#58; true,
    zIndex&#58; 10000,
    dialogClass&#58; "popupClass",
		close&#58; function&#40;event, ui&#41; &#123;
			if&#40;closeFunction&#41;
			&#123;
				closeFunction.call&#40;&#41;;
			&#125;
			window.parent.closePopup&#40;true&#41;;
		&#125;
	&#125; &#41;; 
&#125;

To make this work, you also need a Panel Control hidden with css display:none. Give this Panel Control an id (in HTML Element Properties) and then pass this id as variable tgt in the function above. This example has been copied/pasted from a working application and probably needs to be modified to work with your form.

A separate consideration is whether or not to use the logon framework built in to the Ebase Xi system. This is optional but has advantages - mainly that the user logon will then apply to the whole user session. If you choose to use the logon framework, it will probably take you longer to implement. Documentation on this: Help > Help Index > Security > Runtime User Authentication > Implementing a Logon Service.

[AJDulk]

Here is the bare minimum code.

Web-resource Client Javascript (libPopup.js for example) added to the page:

Code: Select all

function closePopup(close)
{
  //hack to stop popup url being fired twice - seems to happen with Firefox and Chrome
  $("#iframepopup").attr("src", "");	
	
	var div =$('#popup');
	if (close)
	{	
		div.dialog("destroy");
	}
	div.css("display", "none");
	div.empty();
}

function displayEditorPopup(fString, title, tgt, width, height, closeFunction) {
  var iframe = "<iframe id='iframepopup' src='" + fString + "' width='100%' height='100%' align='center' frameborder='0'/>";
	var tgt = $&#40;tgt&#41;;
	tgt.empty&#40;&#41;;
	tgt.append&#40;iframe&#41;;
	tgt.dialog&#40; &#123; 
		width&#58; width, 
		height&#58; height, 
		modal&#58; true, 
		resizable&#58; true, 
		title&#58; title, 
		draggable&#58; true,
    zIndex&#58; 10000,
    dialogClass&#58; "popupClass",
		close&#58; function&#40;event, ui&#41; &#123;
			if&#40;closeFunction&#41; &#123;
				closeFunction.call&#40;&#41;;
			&#125;
			window.parent.closePopup&#40;true&#41;;
		&#125;
	&#125; &#41;; 
&#125;

Html Element Properties - jQuery click event:

Code: Select all

displayEditorPopup("yourFormName.eb", "yourWindowTitle", "#popup", 900, 750);
e.preventDefault();
e.stopPropagation();

Panel at the bottom of the form with Control Style - Advanced - display:none and Html Element Properties - ID - popup