Archive
Monthly
Go
|
|
DNN Blog
Jul
14
Posted by:
Vincent Nguyen
7/14/2011 10:38 AM
Disclaimer: Geeky jargon ahead... With our current implementation of modal popups we tried to introduce this functionality into the core without a complete overhaul of the navigation logic. As a result, there are some specifics on how to get the popups to show. I will quickly describe 3 ways to make your module Popup friendly. Here’s how to take advantage of this for your modules. 
Action Controls One of the things I noticed while incorporating popups into the core, was the use of the Globals.NavigateUrl(...) method. Sure Globals.NavigateUrl() has its usages, but in the context of modules, we should really be using EditUrl(...). Seeing that EditUrl() did not support the functionality of Globals.NavigateUrl() which was sometimes necessary, I created a new NavigateUrl(...) method in the ModuleInstanceContext class, which should handle this; the new NavigateUrl() in ModuleInstanceContext ends up calling the Globals.NavigateUrl() method anyways. The reason why we couldn’t incorporate the popup logic into the Globals.NavigateUrl, is because it is used all over the core, outside of the context of a module, thus being in the Globals class. It’s used in places where we wouldn’t want to see popups. If the logic for popups was put here, everything would start popping up unnecessarily. In a nutshell: Use EditUrl(...) and newly introduced NavigateUrl(...) of the ModuleInstanceContext instead of Globals.NavigateUrl(...)
Hyperlinks Sometimes you would want to add a simple hyperlink to your module without having it be an Action Control; moreover sometimes you may want your hyperlink to show in a popup window. The way we’ve implemented our popups, we are using some javascript to initiate the popups. The javascript calls do not play very nicely when embedded directly into the hyperlink url attribute, this was handled differently depending on the browser used. Overall it did not work very nicely. In order to get hyperlinks to show up in a popup, we had to add an “onclick” attribute to the hyperlink. The onclick event handled the javascript calls much nicer than when embedded in the URL attribute. In a nutshell:
To get hyperlinks to show in a popup use the following example as a guideline: [C#] myHyperLink.Attributes.Add("onclick", "return " + UrlUtils.PopUpUrl(myHyperLink.NavigateUrl, this, PortalSettings, true, false)); Direct Redirects Another common practice is using direct redirects in your modules. I don’t really need to go into much detail here, this one is pretty simple. We just need to provide the specific popup URL in order for the core to render the page in a PopUp. In a nutshell:
To generate the specific popup URL for the core to render a popup use the following example as a guideline: [C#] redirectUrl = UrlUtils.PopUpUrl(redirectUrl, this, PortalSettings, false, true); Summary As mentioned above, these are 3 ways to make your module popup friendly. There are a few new methods in the core you can familiarize yourself with in order to get the most out of this new feature. As previously mentioned there’s the new NavigateUrl(...) of the ModuleInstanceContext class, and another is the new PopUpUrl(...) of the UrlUtils class. So get familiar with this new feature, the new methods and... happy coding!
27 comment(s) so far...
Re: Tips on how to make your Module Popup-Friendly
In a nutshell: It couldn't be more easier :)
By Leigh Pointer on
7/14/2011 11:15 AM
|
Re: Tips on how to make your Module Popup-Friendly
Another good tip would be how to "manually" close the popup window in javascript.
(Using DNN 6 Beta 1) I did it using parent.dnnModal.load(); which will close the modal and refresh the parent page. However I doubt that is the best way.
By Jonathan Sheely on
7/15/2011 9:33 AM
|
Re: Tips on how to make your Module Popup-Friendly
Actually using "parent.dnnModal.load()" is a pretty good AND safe way to close the modal.
One of the things you may consider is closing the modal without doing a refresh of the parent page... which was our original implementation. What we found was, the controls shown in a popup usually change/update something you would see on the parent page, so not knowing what the controls in a popup would do, always refreshing the parent page was the safest way to go.
By Vincent Nguyen on
7/15/2011 9:40 AM
|
Re: Tips on how to make your Module Popup-Friendly
Does this means, if I install my old 4.x.x Modules into DNN6 and switch ON supportPopUps in Module settings page, the DNN6 would do rest needful to show popups ?
By Jaydeep Bhatt on
8/9/2011 7:53 AM
|
Re: Tips on how to make your Module Popup-Friendly
Hi Jaydeep.
In short, your module should show some popups for the things that are generally found in all other modules by default, such as module settings. To completely answer if your module would be supported with popups, you would best install it in DNN6 and give it a test drive.
Give it a test drive! :)
By Vincent Nguyen on
8/9/2011 7:56 AM
|
Re: Tips on how to make your Module Popup-Friendly
Regarding direct redirects.
I have a module with a number of custom controls that load dynamically based on data found. Can I use this direct-redirect to display the modle in a popup along with said dynamically loaded controls? AND can this be printed?
Thanks
By Lindsay Miles on
8/11/2011 8:22 AM
|
Re: Tips on how to make your Module Popup-Friendly
Hi Lindsay,
With regard to your module having dynamically loading controls, if it loads okay when popups are not enabled, it should work no differently when the popups are enabled. Should be no issues with dynamically loading controls in a popup window.
Not too sure on what you mean by "can this be printed". Can you please clarify.
Thanks.
By Vincent Nguyen on
8/11/2011 8:30 AM
|
Re: Tips on how to make your Module Popup-Friendly
Vincent, I would like to allow the user to print a module without the rest of the page, JUST that module with its data in the constituent controls.
I've done this before by launching a new window etc BUT, upon reading this blog, thought it might be possible right from a module-popup...
I could add another .ascx to the module (say PrintableModule.ascx), set that to be able to display as a popup and voila! :-) Print from the popup....
No?
By Lindsay Miles on
8/12/2011 7:51 AM
|
Re: Tips on how to make your Module Popup-Friendly
Lindsay,
I think what you proposed should work with no problem at all. The popup window uses an iFrame, so anything loaded in that window will be almost completely independent from your parent window. So if you had a print button on your ascx that appears in the popup, it should only capture what is in your popup.
Sounds like you have your desired functionality!
By Vincent Nguyen on
8/12/2011 8:06 AM
|
Re: Tips on how to make your Module Popup-Friendly
I have a button in my Control (which is loaded in the DNN 6.0 popup) and after it saves the form, it redirects to "/". However, before this happens, the Control's Page Load event is getting hit after the save.
This normally wouldn't be a problem, except the page load scenario does some very slow API calls when there isn't a postback.
How can I close the popup without causing a page load event in the control after a postback? (Impossible?)
By Lucas Jans on
8/12/2011 2:22 PM
|
Re: Tips on how to make your Module Popup-Friendly
Hi Lucas,
Closing the popup will always refresh the parent page in the current release. This was decided to be such, to avoid changes to the parent page not being shown if the page was not refreshed.
As an extension developer, there will be a new method in the API in 6.0.1 that will allow you to determine what the page does once it's closed, ie) refresh/redirect/nothing.
By Vincent Nguyen on
8/12/2011 2:25 PM
|
Re: Tips on how to make your Module Popup-Friendly
Can you please post some code with using any of the 3 methods?
By ashwin.chandran on
10/3/2011 8:29 AM
|
Re: Tips on how to make your Module Popup-Friendly
Should dnnModal be aware of the the portal setting that enables/disables popups. I find that when I use the above examples with popUps enabled everyting thing works great, but when they are disabled it dosn't fall back to the older behavior of just loading a new page. I get, "Microsoft JScript runtime error: 'dnnModal' is undefined. Should this be the case?
Thanks.
By Tony Campbell on
10/3/2011 8:29 AM
|
Re: Tips on how to make your Module Popup-Friendly
Hi Tony,
Within the framework itself, I ran through several test to check that the js file handling the popups, is NOT loaded when popups are disabled on the portal level -- didn't see any issues here.
Using the above scenarios, if you make a call to PopUpUrl, you will need to put a check in your code to verify if popups are enabled on the Portal level, otherwise your code will go looking for the JS file that is not loaded -- and thus the error you found. PopUpUrl has no smarts to check if popups are enabled, since it shouldn't even be called unless popups are enabled. So to fix that, simply put a check in right before your call to verify if popups are enabled at the portal level, otherwise generate a regular url.
Hope that helps.
By Vincent Nguyen on
10/3/2011 9:29 AM
|
Re: Tips on how to make your Module Popup-Friendly
I create a custom module and use the popup window
my url to open the popup
hlCreateAppointment.NavigateUrl = EditUrl("CreateAppointment");
but i want to close the popup also by code.
i doesn't have parent.dnnModal.load(). Do i need an extra reference?
By Stephany on
2/3/2012 9:14 AM
|
Re: Tips on how to make your Module Popup-Friendly
I am having trouble getting the direct redirect method for popups to work as you described.
I have a module with a view control and an edit control. I have a button on the view control that posts back to an onclick routine that uses response.redirect to load the edit control. If I enable popups and disable partial rendering on both controls, then the method you described (redirectUrl = UrlUtils.PopUpUrl(redirectUrl, this, PortalSettings, false, true);) does not work. The edit control is loaded but not in a popup. If I enable partial rendering on the view control and changed the last parameter of the PopUpUrl call to false (redirectUrl = UrlUtils.PopUpUrl(redirectUrl, this, PortalSettings, false, false);) then the edit control appears in a popup.
There are other ways do cause the edit control to popup. However, I would like to know how to get the redirect method you described to work.
Thanks,
By Todd Gutschow on
2/3/2012 9:14 AM
|
Re: Tips on how to make your Module Popup-Friendly
Hi there!
Just a question. Is there any way I can "tell" the popup window wich title it should have?
For instance, I've noticed that when we press "Login", the popup displayed with the login module has a title: "User Log In", and after searching the solution for this term, I came to realize the title was in the module .resx file!
In my particular case, I'm doing the following in the .ascx file:
Mapa do Site
It works ok, but I just can't figure out a way to set the modal popup title.
Thanks in advance
By José Pedro Figueira on
2/3/2012 9:14 AM
|
Re: Tips on how to make your Module Popup-Friendly
Hi Jose,
I'm not exactly sure what you mean but "Mapa do Site" in the .ascx file. What the modal popup shows in the title is in some cases the breadcrumb to your page, or the title of the control you call to show in a pop up.
If you want "Mapa do Site" to be in your modal popup title bar, try using that as the title for your .ascx control.
Goodluck.
By Vincent Nguyen on
2/3/2012 1:03 PM
|
Re: Tips on how to make your Module Popup-Friendly
Hi Todd,
It's a difficult to know exactly why your popups aren't behaving as expected. What I can guess is perhaps the "redirectUrl" being passed into the method isn't exactly in the form it needs to be. To dig in deeper check what the value of that is when originally passed to that method.
In one scenario due to a particular implementation, I had to use the following syntax to get the redirect to work.
redirectUrl = UrlUtils.PopUpUrl(Globals.NavigateURL(******), null, null, false, true);
Where ****** is the list of corresponding parameters you need to pass to NavigateURL to get the URL back.
Hope this helps.
By Vincent Nguyen on
2/3/2012 1:20 PM
|
Re: Tips on how to make your Module Popup-Friendly
Hi Stephany,
Currently the dnnModals do not support custom closing actions, other than letting you define which page to redirect to once the popup closes.
Hope this answers your question.
By Vincent Nguyen on
2/3/2012 1:24 PM
|
Re: Tips on how to make your Module Popup-Friendly
I have been searching for this information so thank you very much for putting it out there. I have one final thing I am tripping on and it is probably pretty simple.
I have my asp link opening up correctly, at least it seems so. The one issue is that the popup page shows no data, not even the text or HTML I put on the page. I have a page setup as VIEW with the Key of "AddClient" with my Module. And it has the option selected of "supports popups". Just the one AddClient module definition has that selected.
I am stumbling over why the module call does not give an error, however after the "loading icon" stops spinning the page shows no data. And the "page load" event on that module ASCX also does not fire as I am debugging to trap that.
Any help is appreciated. I have been doing DNN module dev for a couple years and wanted to incorporate the popups in as they look great.
*********************************************************************
MY_URL = Globals.NavigateURL(this.TabId, "AddClient");
cmdAdd.Attributes.Add("onclick", "return " + UrlUtils.PopUpUrl(MY_URL, this, PortalSettings, true, false));
*********************************************************************
By Dale Bingham on
2/27/2012 10:24 AM
|
Re: Tips on how to make your Module Popup-Friendly
I apologize, I fixed my error. :( I had forgotten the mid=xxx line.
To figure it out basically I captured the debug HTTP link, opened a new tab in the same browser, and the Page Load event still did not fire. when I added that /mid/xxx/ to the URL it worked. :)
var myURL = Globals.NavigateURL(this.TabId, "AddClient", "mid=" + this.ModuleId.ToString());
By Dale Bingham on
2/27/2012 10:24 AM
|
Re: Tips on how to make your Module Popup-Friendly
I am no good at client side scripting, so wondering if there is a way to do any of this from the client side via javascript? Or all of it has to be done from the client side?
By Chad Richardson on
2/29/2012 9:22 AM
|
Re: Tips on how to make your Module Popup-Friendly
In the Direct Redirect can someone point out the format of redirectURL? Should it be a relative page url like MyAcccount.aspx or a module path url?
Any example of actual implementation will be appreciated
By H S on
5/9/2012 2:14 PM
|
Re: Tips on how to make your Module Popup-Friendly
I second Chad's request. Is there a way to do this simply using JavaScript?
For example, suppose I'm in the HTML Pro module and I create a link. Can I add JavaScript client-side to the HTML link tags to make the link go to a "Popup-Friendly" page.
By Monica Barback on
5/9/2012 2:14 PM
|
Re: Tips on how to make your Module Popup-Friendly
Thanks to another forum poster, the following code works in the HTML control.
Click here
This will display the page with TablID 101 in a modal dialog when you click the "click here" linke. The TabID is the ID that DNN assigns to every page (outside of the skin). You can find the TabID for you page in the Tabs table in the database. The "TabName" is the name of your page. In my case, the tabid for my page is 101.
By Monica Barback on
5/10/2012 9:36 AM
|
Re: Tips on how to make your Module Popup-Friendly
a simple image pop up is here imagepopuphtmlmodule.codeplex.com/
By mautabar on
5/14/2012 11:34 AM
|
|