How to launch a dialog in a modal popup from a tabbed UI button

[DaveF]

I am using a tabbed UI component with a tree control and branches as my navigation interface. I have dialogs, grids and reports that are launched from tabbed UI buttons inside the tree control. Each report is launched via a unique report interface dialog which is needed to obtain the report options from the user. After entering the options in the report dialog, the user clicks the �Print� button and the report is launched. Currently, when you click on the report dialog inside the tree control, the dialog appears in a new pane and when you click the �Print� button, the report appears in another pane.

I don�t want the report dialog to stick around after clicking the �Print� button. I would prefer the report dialog to appear in a modal popup as opposed to a new pane and then disappear after clicking the �Print� button. Does anyone know if this is possible? I know how to make a modal popup dialog go away after clicking a button, but I do not know how to make a dialog appear in a modal popup by clicking on the component from a tabbed UI button.

The is an example of a report interface dialog: Capture.JPG

[lvasic]

Re: How to launch a dialog in a modal popup from a tabbed UI button

Try putting this after you call the report.
{dialog.Object}.closeContainerWindow(this);

[DaveF]

Re: How to launch a dialog in a modal popup from a tabbed UI button

I use "{dialog.Object}.closeContainerWindow(this)" to close a modal popup after clicking the Cancel or Submit button. What I'm trying to do is bring the dialog up in a modal popup after clicking on a tabbed UI button instead of having the it appear in a new tabbed UI pane.

[Davidk]

Re: How to launch a dialog in a modal popup from a tabbed UI button

It doesn't look like you can persuade the tab ui to open a popup dialog, instead of a tab... nicely. However... remember that the wonderful thing about Alpha is that they produce lovely Javascript and HTML code. You can dig into the rendered code and get the button click call and get the javascript function that opens the popup... and it's not too horrible, but it's sure not standard stuff and it most likely breaks most of the rules. Attached is an image of my tab ui, running a tree control, and with a button opening a popup dialog. I haven't gone farther to see if running a report from the dialog will open a tab, but I'm guessing it's possible as well.

If you want to go this route I'll detail the steps to get it.

[allenj]

Re: How to launch a dialog in a modal popup from a tabbed UI button

I'd sure like to see that Dave.

[DaveF]

Re: How to launch a dialog in a modal popup from a tabbed UI button

Thanks David. I'm already customizing some action javascript routines in other areas and was hoping to somehow avoid having doing this once again. I don't want to dig myself in too deep. I will give that a try. Not sure though how easy it will be to get the report to appear back in the tabbed UI pane. I haven't thought about that until now. Thanks!

[Davidk]

Re: How to launch a dialog in a modal popup from a tabbed UI button

I first had a look at what was generated in the Alpha UI when you open a popup dialog from a button on a grid. There a line of code that refers to the grid object (in Text Mode) and in the Global Declarations Tab under Text Mode there's a whack of Javascript code. But it all refers to the grid objects, which kinda makes sense. Then I looked at the same process calling a popup dialog from a dialog... pretty much the same thing. Copying this code simply doesn't work because, in the end, you're trying to call a popup dialog from a tab and, therefore, the dialog object and grid object references are not there and so can't be understood. Then I thought I'd have a look at the rendered code since it's all interpreted when the browser gets it... and that looked promising to work with. The drawback is that, in a sense, it's all hard coded. But, if it's really needed then that's ok... kinda. Here's how you do it...

Create a new dialog and just put anything on it, a textbox... you don't really need to do this, but what the heck. Now add a button and in the on click event of that button add some Action Javascript to open your Print Dialog as a popup. Save it and do a Live Preview, and then click on the Chrome link to run it. Right click on the Button, Inspect Element, and find the onClick event. The call should look something like...

DLG1_O_EA643BFA42494BE389A7D6342683A7DA(1,'1',this);

Copy this.

Next, keep Chrome running, but get back into Alpha. Close the dialog you're working with and then open up your Tab component. On the Tree Branch, or Button, whatever you're using to open your Print Dialog... get into the property for the Javascript onClick Event. In here will already be some code to open up your dialog in a tab... we're going to replace this code with what you copied from the step above - the browser onClick call. Save and close this event.

Next, get back over into Chrome - into your dialog page that you still have up and running and that is still in Inspect Element mode. Click on the Sources Tab and in the left pane you should see a list of Sources, one of them being LivePreview and, within that, your dialog. Click on your dialog source name and the code for that dialog should display in the right panel.

Scroll down to around line 110. You should see

<script type="text/javascript" language="javascript">

Under this line, you should see an "if" statement - mine is around line 117.

if(typeof DLG1_DlgObj == 'object') DLG1_DlgObj._destroy();

So... now you're looking at a Javascript script. You want to copy the entire script... from the if statement all the way down to, but not including, the </script> statement. The last line of the script we want to include is...

setTimeout(function() {DLG1_DlgObj._executeEvent('onRenderComplete')},1);

Now, get back into your Tab component, and get into the Tabbed UI Properties. Scroll down until you get to Javascript, Javascript function declarations. Open this up, and paste in your copied script... which should start with the if statement and end with the setTimeout statement. Save it.

That should be it. Even though you set up your Print dialog to run from the Tabbed UI button, the code you're calling no longer runs code that opens that new tab. Instead we're calling a script that pops up your Print dialog.

EDIT: For your Report, the Button on your Print Dialog is opening the report in a Tabbed UI Pane... right? Still ok... that's what will happen. Just put the...

{dialog.Object}.closeContainerWindow(this);

as an in-line Action Javascript, after your Action Javascript that opens your report... this will close the Print Dialog. I hope the timing will be ok.

The Alpha team are now rolling their eyes and muttering, but it's all in good fun... I hope.

[DaveF]

Re: How to launch a dialog in a modal popup from a tabbed UI button

That worked! But only the first time I ran the report. When I closed the report and ran it again, some strange things happened. I think it has to do with the dialog being cached in memory. The second time the dialog came up, it did not execute the onDialogInitialize event and initialize some of the dialog settings. The dialog goes away and the report displays in a pane again, but I cannot click on anything. It's like it thinks a modal popup is displayed even though there isn't one. I have to go back to the Design mode tab and start over to regain control.

[DaveF]

Re: How to launch a dialog in a modal popup from a tabbed UI button

Thanks for all your help David. I will work with this some more and see if I can get it to working correctly. I know there is a caching option checkbox in the Action Javascript builder for opening a new dialog. I will try turning that off and start from the beginning or look for the setting in the Javascript code. I have a feeling there might be a little more to it though.

[Davidk]

Re: How to launch a dialog in a modal popup from a tabbed UI button

Yeah... the onDialogInitialize event doesn't get called when caching is on...

Mine is running ok... no odd issues. The popup dialog I'm calling is fairly complex, but the report is really simple.

The other thing I would try is going through the process to get the code, but as published and running pages... not from LivePreview. Not that LivePreview is bad, but I noticed that the code has a section where an ajaxURL is set... and going through LivePreview it reads "LivePreview" - not that I understand any of the code. Publishing and examining the running code might be cleaner. Either way it works well here. This might be a good option for Alpha to consider... from a tabbed ui... allow opening something other than a new tab.

[Jeff Benson]

Re: How to launch a dialog in a modal popup from a tabbed UI button

"You want to copy the entire script... from the if statement all the way down to, but not including, the </script> statement."

Doesn't this code have to be a defined function?

[Davidk]

Re: How to launch a dialog in a modal popup from a tabbed UI button

If code is not inside a function, it just runs, I believe.

[agillbb]

Re: How to launch a dialog in a modal popup from a tabbed UI button

Not sure if I should interject at this stage, but it sounds like Alpha should consider allowing the target to be set to tab, popup or other.
It should be minimal work for them. I think you should request this.

[DaveF]

Re: How to launch a dialog in a modal popup from a tabbed UI button

I can do that. What I’m requesting is not just an option to bring up a modal popup and then return back to where you came. It would only return if you close or click Cancel, but if you click Print, OK or whatever, it would invoke a new component/report/A5W Page to appear in a new pane. The more options Alpha is willing to provide, the better of course. Is there anyone else out there who wants this?

[agillbb]

Re: How to launch a dialog in a modal popup from a tabbed UI button

Why not let the dialog open in the tab, and if you click PRINT, then (1) get the paneIdx, (2) open the report as usual in a new tab, and (3) close the dialog tab using a setTimeout.

Get Idx:

if(tbiObj) {
 var myIdx = tbiObj._tbObj._curTabIndx; //get the current tab index
}

To close, try something like (untested):

if(tbiObj && typeof myIdx!='undefined') {
 setTimeout(function() {
  var myID = tbiObj._tbObj._panes[myIdx]._id;
  tbiObj._tbObj.remove(myID); //I think this removes the tab
 }, 300);
}

Might just work....the settimeout is probably optional, but it may be best to delay the close a bit.