SharePoint 2010 Application Pages and Modal Dialogs the easy way
Development, JavaScript, Productivity, SharePoint 2010, Tips & Tricks, Usability
SharePoint 2010 ships with the new Modal Dialog framework that allows you to display dialog windows in an unobtrusive and user friendly way. This is extremely important when creating user friendly solutions as it allows users to preserve their context while providing some additional information. While the new modal dialog framework is definitely a great idea, there is one thing missing in the implementation: support for communicating with custom application pages.
Custom Application Pages the 2007-way
SharePoint 2007 lacked any kind of support for dynamic User Experience. Standard Application Pages used postback to process information and in order to provide a seamless experience we had to do exactly the same in our custom Application Pages. Every Application Page had some logic attached to it and after completing its work, it redirected the user either to where he came from or to the current Site.
SharePoint 2010 Modal Dialogs
In SharePoint 2010 the situation looks a bit different. SharePoint 2010 ships with the new Modal Dialog framework which allows you to interact with users in an unobtrusive way using just a few lines of JavaScript.
The following JavaScript snippet is sample code that you could use to open a SharePoint page in a modal dialog:
var options = {
url:'/_layouts/prjsetng.aspx',
title:'Title, Description, and Icon',
width:640,
height:400
}
SP.UI.ModalDialog.showModalDialog(options);
As you can see it’s really easy for us to benefit of the new capabilities in our custom solution. In the background SharePoint automagically removes the Ribbons, menus etc. from the page leaving only the content. This is a great behavior because it allows you to create interfaces that are both suitable for normal view and Modal Dialogs without a lot of extra effort! There is however one ‘however’…
This is exactly what happens when you click the OK button on the Title, Description, and Icon page. The page will use its default behavior and will redirect to the Site Settings page. In fact most of the standard SharePoint 2010 Application Pages use the ‘old’ behavior.
Custom Application Pages and Modal Dialogs: what’s in the box?
Developing custom Application Pages is a regular part of many SharePoint Solutions. Whether it’s for management purposes or for requesting user input, Application Pages are a great way to interact with users. The Modal Dialog framework in SharePoint 2010 makes it extra interesting since it allows you to use Application Pages in an unobtrusive way. Unfortunately out of the box there is very little standard support for leveraging Modal Dialogs with Application Pages. And although it seems like a really generic functionality, it is something you would have to do yourself for the biggest part. Sounds like a call to action.
Side note on the sample case
To help you better understand the examples in this article I chose to create a custom Application Page similar to the standard ‘Title, Description, and Icon’ page provided with SharePoint. I chose that particular page because it requires you to differently handle closing the Modal Dialog depending on the taken action, which is great for discussing the capabilities available in SharePoint 2010. To make it easier for you to distinguish that I’m talking about the custom page I called it the ‘Edit web info’ page.
Step 1: The Dialog Application Page base class
Support for Modal Dialogs in Application Pages is something generic. As it’s something you will be reusing in all your custom Application Pages it’s a good idea to create a base class that contains all the plumbing that you need to get the job done. You can then create your custom Application Pages and by inheriting from that class you can ensure that you have consistent baseline within the whole solution or even across solutions.
Defining the base class
/// <summary>
/// Modal Dialog-aware Application Page base class.
/// </summary>
public abstract class DialogLayoutsPageBage : LayoutsPageBase
{
/// <summary>
/// URL of the page to redirect to when not in Dialog mode.
/// </summary>
protected string PageToRedirectOnOK { get; set; }
/// <summary>
/// Returns true if the Application Page is displayed in Modal Dialog.
/// </summary>
protected bool IsPopUI
{
get
{
return !String.IsNullOrEmpty(base.Request.QueryString["IsDlg"]);
}
}
/// <summary>
/// Call after completing custom logic in the Application Page.
/// Returns the OK response.
/// </summary>
protected void EndOperation()
{
EndOperation(1);
}
/// <summary>
/// Call after completing custom logic in the Application Page.
/// </summary>
/// <param name="result">Result code to pass to the output. Available results: -1 = invalid; 0 = cancel; 1 = OK</param>
protected void EndOperation(int result)
{
EndOperation(result, PageToRedirectOnOK);
}
/// <summary>
/// Call after completing custom logic in the Application Page.
/// </summary>
/// <param name="result">Result code to pass to the output. Available results: -1 = invalid; 0 = cancel; 1 = OK</param>
/// <param name="returnValue">Value to pass to the callback method defined when opening the Modal Dialog.</param>
protected void EndOperation(int result, string returnValue)
{
if (IsPopUI)
{
Page.Response.Clear();
Page.Response.Write(String.Format(CultureInfo.InvariantCulture, "<script type=\"text/javascript\">window.frameElement.commonModalDialogClose({0}, {1});</script>", new object[] { result, String.IsNullOrEmpty(returnValue) ? "null" : String.Format("\"{0}\"", returnValue) }));
Page.Response.End();
}
else
{
RedirectOnOK();
}
}
/// <summary>
/// Redirects to the URL specified in the PageToRedirectOnOK property.
/// </summary>
private void RedirectOnOK()
{
SPUtility.Redirect(PageToRedirectOnOK ?? SPContext.Current.Web.Url, SPRedirectFlags.UseSource, Context);
}
}
The above snippet presents a base class for a Modal Dialog-aware Application Page. All the different pieces are explained in XML comments, but probably the best way to understand how things work is to see it in action.
Behind the scenes of a Modal Dialog-aware Application Page
The following code is the code behind of our custom ‘Edit web info’ page.
public partial class EditWebInfo : DialogLayoutsPageBage
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
WebTitle.Text = Web.Title;
WebDescription.Text = Web.Description;
WebName.Text = Web.Name;
}
}
protected void BtnUpdateWeb_Click(object sender, EventArgs e)
{
if (IsValid)
{
Web.Title = WebTitle.Text;
Web.Description = WebDescription.Text;
bool urlChanged = !String.IsNullOrEmpty(WebName.Text) && !Web.Name.Equals(WebName.Text);
if (urlChanged)
{
string source = Request.QueryString["Source"];
if (!String.IsNullOrEmpty(source))
{
PageToRedirectOnOK = source.Replace(Web.Name, WebName.Text);
}
Web.Name = WebName.Text;
}
Web.Update();
EndOperation(1);
}
}
}
As you can see the code is fairly simple. In the Page_Load method we retrieve some values from the current Site and fill the controls on the page with them. In the BtnUpdateWeb_Click event handler we do the opposite: we take the new values and update the current Site with them.
Following the User Experience
Because we want the User Experience to be as good as possible we have a few different cases to handle.
First of all there is the scenario when user either closes the Modal Dialog using the Close button or clicks the Cancel button. In this scenario nothing has changed and we don’t have to do anything. The good news is that is already being handled by SharePoint out of the box and we don’t have to worry about it.
The next scenario is when the user changes the Title and/or the Description of the Site. What we need to do is to save the new values and refresh the Site so that the user can see the values being updated.
The last scenario is when the user changes the URL of the Site. In this case we have to get the URL of the current page, replace the URL part of the Site with the new value and redirect the user to the new URL.
From the Application Page point of view the only difference between the last two cases is the redirection. In the second scenario the value of the PageToRedirectOnOK property is being set to the new URL what allows the base class to redirect the user to the current page but then at changed URL. Finally, we call the simple variant of the EndOperation method with the OK result. If the Application Page has been opened in a Modal Dialog a JavaScript snippet will be sent to the output. This snippet will contain the OK result and depending on the action the new URL of the site.
Step 2: Handling the response on the client-side
Good User Experience around Application Pages consists of two pieces: not only we need to cover correct actions on the server, but also we have to take care that there is as little disruption for the users as possible. In other words: if there is no need to reload the whole page – don’t do it.
Earlier in this article I showed you a simple JavaScript snippet that can be used to open a SharePoint 2010 Modal Dialog. That sample was pretty straight forward and didn’t contain any logic for handling the response from the Application Page. Let’s extend it a little and add some handling routines to it:
var options = {
url: SP.Utilities.Utility.getLayoutsPageUrl('DialogApplicationPages/EditWebInfo.aspx?Source=' + location.href),
title: 'Edit web info',
allowMaximize: false,
showClose: true,
width: 800,
height: 330,
dialogReturnValueCallback: Function.createDelegate(null, function (result, returnValue) {
if (result == SP.UI.DialogResult.OK) {
if (returnValue == null) {
SP.UI.Notify.addNotification('Operation successful');
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
else {
location.href = returnValue;
}
}
})
};
SP.UI.ModalDialog.showModalDialog(options);
The general idea is the same: we create a new object with all the options for our dialog and pass it to the SP.UI.ModalDialog.showModalDialog function. The difference is in the dialogReturnValueCallback property that now contains a delegate to the function that will be executed after the Modal Dialog window has been closed.
The delegate function executed after closing a Modal Dialog takes two parameters: result, which is an integer and can have one of the three values: invalid (-1), cancel (0) or OK (1), and returnValue which is an optional value that can contain some data from the Application Page. Getting back to our three scenarios…
In the first scenario, where user clicks the Cancel button, the result parameter will be equal to SP.UI.DialogResult.cancel or 0. So by checking for the value of the result parameter we can ensure that we will execute code only if the Modal Dialog has been closed by clicking the OK button.
In the second scenario, where only the title and/or description of the Site have been changed, the returnValue parameter is empty. In this case we don’t need to reload the whole page. The Modal Dialog framework allows us to quickly refresh the page by calling the SP.UI.ModalDialog.RefreshPage function, which has definitely a better experience than reloading the whole page.
Finally, in the last scenario, where the URL of the Site has been changed, the new URL is passed in the returnValue parameter and we use it to redirect the user to the new URL.
And that’s really it. The above framework provides you with the basic functionality for communicating with Application Pages and passing the results to the JavaScript in the originating page. From here you can easily extend the implementation to fit the specific needs of your application.
November 22nd, 2010 at 3:34 pm
In your custom application page code behind, you reference an event handler, BtnUpdateWeb_Click, when is this called -how is it called by te dialog? and is this an event handler to a button on your custom application page – if so, why doesn't the button appear in the modal dialog?
November 22nd, 2010 at 4:12 pm
@Abdul: The Event Handler you mentioned is being called after clicking the OK button which is a part of the custom Application Page. If you look carefully at the screenshot of my custom Application Page in a Modal Dialog you'll see that the button is there.
November 23rd, 2010 at 7:55 am
OK – Thanks, Yes, I can see that OK button, but I didnt know it was part of the custom application page, I thought it was there by default on the dialog.
Thanks for the answer.
Excellent Post.
November 23rd, 2010 at 10:30 am
Hey buddy, tbanks! Will be using this in my current project ;)
November 23rd, 2010 at 11:01 am
@Robin: Awesome, looking forward to the lessons learned/feedback from the field :)
November 23rd, 2010 at 3:54 pm
Thanks Waldek for sharing information.
i am working on Dialog in one of Public facing site i am working on but i am not using application page.will it work on only with application pages ?
what i am doing is i have created webpart then i created based on page layout and insert webpart in this page and then open this page as Dialog.it works fine but carry branding like header and footer that i don't want
November 23rd, 2010 at 4:50 pm
@Ronak: it should work with any kind of pages. You can use the s4-notdlg CSS class to hide all unwanted elements on your page when in dialog mode.
November 23rd, 2010 at 4:55 pm
Thanks for reply you are right and i have used that class but its doesn't work and i also know why its not working but can't find solution.
Somehow HTML code for Dialog doesn't insert class ms-dialog within iframe of HTML class.
If you have any suggestion then i will appreciate it.
November 24th, 2010 at 6:26 am
@Ronak: do I understand it correctly that you have a page with an iframe on it, and that the page inside that iframe doesn't get the dialog classes?
November 24th, 2010 at 2:29 pm
Kind of.When you use dialog in Sharepoint 2010 it creates iframe with popup HTML and this html has class called ms-dialog something like this
Code for Popup dialog within iframe and in my case i dont see ms-dialog class and thats why s4-notdlg is not hiding elements.Here is how s4-notdlg is define .ms-dialog .s4-notdlg {display:none;}.I tired to use other custom class but no luck so far.
November 24th, 2010 at 4:21 pm
@Ronak: ok, so it's not your page that contains the iframe, but you mean actually the modal dialog iframe that hosts your page. Do you have in your master page? Without it SharePoint wouldn't be able to add the ms-dialog class.
November 24th, 2010 at 5:09 pm
Yes.I don't know Understand your question Do you have in your master page?
but here brief idea what i am doing i have created webpart first and then create a page based on blankwebpartpagelayout and then add webpart in one of zone and then in other page layout i have JS to open this page as model dialog.hope this make it clear….
Thanks for your time and really appriciate
November 24th, 2010 at 6:20 pm
@Ronak: I thought you mentioned that you created a custom Master Page or are you using an out-of-the-box one?
November 24th, 2010 at 6:52 pm
Waldek i have custom master page
November 24th, 2010 at 7:00 pm
@Ronak: then the question remains: does the tag on the top of your Master Page has the runat="server" attribute?
November 24th, 2010 at 7:03 pm
yes it does have attribute runat="server"
November 29th, 2010 at 3:05 pm
Hi Waldek i can't believe this problem was with Telerik Control that means i can not use telerik control for within dialog.
November 29th, 2010 at 5:11 pm
@Ronak: Have you checked with Telerik if they have an updated version of their control that would work with SP2010?
November 29th, 2010 at 5:17 pm
Hi Waldek i have opened support ticket with them also i am using latest version of Telerik anyway i am trying to get it working with Radwindow Telerik control and i got functionality working now will try to hide elements with custom css class.once i hear from telerik i will update you for future ref.
Thanks for your time and suggestion
November 30th, 2010 at 8:02 pm
Waldek,
Thanks for the example. One problem I'm having with the Dialog framework is that there seems to be a default set of OK and Cancel buttons that are autotmatically loaded. This is a problem in that I can only maniupulate them via client-side code, and I can't hide them and use my own buttons on the custom Application Page. I notice in your example you only have one set of OK/Cancel buttons and they appear to be the ones from your custom App Page – how do you do this? I can't get rid of the defualt dialog framework buttons.
Thanks.
December 8th, 2010 at 7:00 pm
Hi Waldek,
Excellent post! Congrats!!!
Would it be possible to download aspx code of "edit web page"? In this way, It would be much easier to understand the code you have provided.
All the best,
Hakan.
December 8th, 2010 at 9:53 pm
@Hakan: I don't think I still have the full solution. However all of the code is included in this post. Do you have any specific questions?
December 13th, 2010 at 8:37 pm
Hi Waldek,
I was mentioning ASPX file (the only missing item as far as I can see) to test it immediately. However, I was able to create ASPX file with the same web control IDS and tested it.
Thanks again for this great post.
Hakan.
December 21st, 2010 at 9:23 pm
Hi Waldek i can't believe this problem was with Telerik Control that means i can not use telerik control for within dialog.
March 1st, 2011 at 9:47 am
Hi,
I am new to sharepoint and developing. I am trying to create a hyperlink as a modal dialog but I am having problems.
Can you help?
This hyperlinks work great in opening up the modal dialog
HyperLink link = new HyperLink();
link.Text = "Read More"; link.NavigateUrl = string.Concat("javascript: ShowDialog('", SPContext.Current.Site.RootWeb.Url,
"/Lists/", this.Text, "/DispForm.aspx?ID=", item.ID, "\"')"); this.Controls.Add(link);
I am trying to replace the href below with the hyperlink above but I am having trouble.
str2 = string.Concat(new object[] { obj2, "", this.FirstWords(this.StripTagsCharArray(item[this.BodyField].ToString()), Convert.ToInt32(this.NumWords)), "… read more" });
March 3rd, 2011 at 3:50 pm
@rene: what is exactly the problem that you are experiencing?
March 11th, 2011 at 9:05 pm
Great article, I am wondering if this could be adapted to pass values to a form that is loaded into the dialog box. I have a web part page with a links list, a discussion board, and a custom page viewer web part. The links list provides a filter value to the discussion board and the page viewer loads a new page when a link is selected. Everything I have on my page works great, however, when a user clicks on the add new discussion I have no way of pre-populating the column in the discussion board that associates the links list item, my users would have to do that, and I would like automate that tidbit by passing the selectedID. Any tips would be much appreciated!
March 12th, 2011 at 1:51 pm
@Jason: As far as I know, the only way to pass parameters into the dialog would be (client-side) by using a query string parameter or setting a cookie or (server-side) using a session variable.
April 29th, 2011 at 5:52 pm
Thanks Waldek, Keep up the good work
April 30th, 2011 at 7:58 am
@pakdanan: thank you, I appreciate it :)
May 2nd, 2011 at 6:01 pm
Wow, after reading everything at MSDN about it and still being stuck, your blog saved my day! Works great. Thanks.
May 3rd, 2011 at 5:07 am
@feisal: great I could help :)
May 11th, 2011 at 2:19 pm
Thank you very much for sharing this. Really usefull stuff – good work!
June 14th, 2011 at 11:28 am
Excellent.. learned something new today!!
June 22nd, 2011 at 1:11 am
Just wondering where the link is to download the code.
June 22nd, 2011 at 5:27 am
@Bryce: there is no separate download. The snippet I included in the article is the code.
July 8th, 2011 at 8:35 pm
@Waldec
A download of the code would be nice, I am spending a ton of time trying to find all the using references that you don't list. The post is great, but I don't have memorized all the references and you didn't include them with your code on the page.
Thanks for the good post!
August 17th, 2011 at 8:23 pm
Hi waldeK,
very good post….you had mentioned that the solution was not fully built yet. Was wondering if you have something to share as I was trying this and running into errors.
Thanks
Venkat
August 17th, 2011 at 9:44 pm
@Venkat: Which part are your referring to? The code I included is meant as a base for your own solution rather than being a turn-key solution of its own.
August 24th, 2011 at 11:02 am
can u give source code or give step by step methods. I had confusion how to write code.
August 24th, 2011 at 6:31 pm
@Sreekanth: which part don't you understand exactly?
September 2nd, 2011 at 3:55 pm
Hello, I am trying to call some javascript code using showModalDialog directly from our code behind (a user control) to launch the out of box EditForm.aspx. This code is very much like your javascript example. One of the options to the showModalDialog is the url to the EditForm.aspx with dynamic parameters for the appropriate doc library for which to check in the file (the file was uploaded previously in the code behind logic). My method to call the javascript is the Page.ClientScript.RegisterClientScriptBlock. I am getting an error that the DocumentEventHandler assembly could not be loaded. Do you know what I need to do to resolve this?
September 3rd, 2011 at 9:17 am
@KaLynn: not really, but I guess it would have to do something with your code behind rather than modal dialogs.
September 5th, 2011 at 3:40 pm
Hi Waldek,
I'm following your logic. Your logic works fine – appreciated. But, I'm facing a small problem.
In the js file:
if (result == SP.UI.DialogResult.OK)
{
if (returnValue == null)
{ SP.UI.Notify.addNotification('Operation successful'); SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
else
{
location.href = returnValue;
}
}
If returnValue == null then after completing the operation, it disables the buttons on the contextual tab whereas if returnValue !=null then it doesn't disable the buttons.
Please let me know where i'm going wrong.
Thanks.
Sohaib Khan
September 6th, 2011 at 3:29 pm
@Sohaib: Did you copy wrong code sample by any chance?
September 7th, 2011 at 7:34 am
@Waldek: Nops.
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
The above line disables the contextual tab buttons.
September 7th, 2011 at 7:41 am
@Sohaib: This could be correct since the page is refreshed. After this line: is your Web Part still selected/active or not anymore?
September 7th, 2011 at 7:51 am
After the line, my web part still focused and it shows disabled buttons on contextual tab
September 7th, 2011 at 8:00 am
@Sohaib: Perhaps refreshing the page causes the Web Part to lose focus internally. Do you need to refresh the page after closing the dialog? If not you could simply remove the line which should solve your issue.
September 7th, 2011 at 8:17 am
@Waldek: In my scenario, i select multiple rows from the SPGridView through check boxes which is present in my webpart. Once user selects rows, it automatically enables the contextual tab from where user can press any button for desired operation. When user presses the button, it opens the modal dialog box which contains several operations. User selects the desired one and press OK. Now, it should apply those selected values on the selected rows in the SPGridView. Currently, It is doing the operation which is required but also disables the buttons which can only be enable after page reloads.
If i remove the PageRefresh command then it will not refresh the page and the user can't see the changes in the SPGridView. If i reloads the page rather refresh then it will remove the SPGridView selection.
Thanks for your prompt replies.
October 9th, 2011 at 4:33 am
Nice articles,
Closing the dialog from code:
http://praveenbattula.blogspot.com/2011/10/close-sharepoint-2010-dialog-through.html
October 14th, 2011 at 8:37 am
Hi Waldek Mastykarz,
i am having problem during the calling page in dialogue box.
i have webpart in which i have define some hyper links and hyper links based on jsp pages. the problem is when i click on hyper link it shows error Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3)
Timestamp: Fri, 14 Oct 2011 07:33:01 UTC
Message: Unterminated string constant
Line: 1
Char: 116
Code: 0
URI: http://sharepoint14:44469/SitePages/viewer.aspx
and here is my code:
function ShowDialog(url) {
var options = SP.UI.$create_DialogOptions();
options.url = url;
options.height = 300;
options.width = 600;
SP.UI.ModalDialog.showModalDialog(options);
}
const string jsScriptURL = "/_catalogs/masterpage/FunctionCustom.js";
protected override void CreateChildControls()
{
SPUser currentuser = SPContext.Current.Web.CurrentUser;
HtmlGenericControl scriptInclude = new HtmlGenericControl("script");
scriptInclude.Attributes.Add("src",
SPContext.Current.Site.RootWeb.Url + jsScriptURL);
Controls.Add(scriptInclude);
//HyperLink link = new HyperLink();
//link.Text = "View Calendar";
//link.NavigateUrl = string.Concat("javascript: ShowDialog('",SPContext.Current.Site.RootWeb.Url,"/Lists/Calendar/calendar.aspx')");
//this.Controls.Add(link);
HyperLink link = new HyperLink();
link.Text = "View Calendar";
link.NavigateUrl = string.Concat("javascript: ShowDialog('", SPContext.Current.Site.RootWeb.Url, @"http://orapps.tapal:8080/tapal/lvapp/frameset2.jsp?U_id=" + currentuser.LoginName.Replace(@"TAPALWORLD\", "").TrimStart());
this.Controls.Add(link);
}
Please help me out
Thank you
October 14th, 2011 at 3:55 pm
@wasi: I suggest you take a look at the generated JavaScript code. Additionally using tools such as Firebug for Firefox might make it easier for you to track the bug in JavaScript.
November 5th, 2011 at 7:20 pm
Hi Waldek, hey I am trying to call an application page from the javascript and in turn that app-page will execute some serverside code and return data (keep it in session variable). Is there anyways to not show a pop-up for this app-page and simply create the session variable or return the data to the calling javascript? I am doing this for asynchronosuly populating a dropdown box in a webpart which is populated on selecting a value in another webpart. I cant use web-service here due to some constraints of claims and end user claim. So was thinking of using app page to execute server side code and get the data back to the calling webpart's javascript. any thoughts?
thanks
November 5th, 2011 at 7:20 pm
Hi Waldek, hey I am trying to call an application page from the javascript and in turn that app-page will execute some serverside code and return data (keep it in session variable). Is there anyways to not show a pop-up for this app-page and simply create the session variable or return the data to the calling javascript? I am doing this for asynchronosuly populating a dropdown box in a webpart which is populated on selecting a value in another webpart. I cant use web-service here due to some constraints of claims and end user claim. So was thinking of using app page to execute server side code and get the data back to the calling webpart\'s javascript. any thoughts?
thanks
November 5th, 2011 at 7:48 pm
@MossBuddy: It sounds a lot like an HTTP Handler. Have you considered that?
November 5th, 2011 at 8:01 pm
No I have not considered HTTP handler, but my confusion is when I trigger an application page from the javascript (I dnt want to show an popups) nt sure how to do it…are we saying here that lets do HTTP handler instead of application page? or is it something obvious that I am missing…the problem with nt using asmx or wcf here is that the end user identity is not making over to the wcf service in this case and wcf is showing app-pool identity and code executes under app-pool identity which is what I am trying to avoid.
November 6th, 2011 at 2:59 am
aah..ok now I get it you meant use a ashx…(httpHandler) and eleminate the application page completely that way we can use ashx handler and get Json or HTML data from the handler…do u think this wld be a performance issue (i.e. using handler)? or it wld just be used for specific url like (getMyData.ashx) and not every http request?…thanx..
November 6th, 2011 at 9:28 am
@MossBuddy: Pages are also HTTP Handlers but then with a lot more of functionality added. So an HTTP Handler is probably as lightweight as you can get. You can either deploy an ASHX file to Layouts or add a mapping to your web.config. Deploying ASHX is easier from the deployment point of view but at the end of the day it shouldn't really matter which one you use.
November 6th, 2011 at 3:23 pm
Thanks buddy :-)..appreciate your detailed response as always..
November 25th, 2011 at 12:29 am
Thanks dude… Really nice article for beginners like me.. :)
December 19th, 2011 at 3:53 pm
Check this helpful link too its also having a wonderful explanation of application page in sharepoint…
http://mindstick.com/Articles/6345ba2f-1a8b-4ccf-9c81-d656ea0b4bf2/?Custom%20Application%20Page%20in%20SharePoint
March 21st, 2012 at 2:45 pm
Hi,
I have visual web parts with some image buttons on it. When the user clicks on it, I would like to popup a dialog box custom pages (stored in _layouts) based on what the user clicks. On Image Button click I am calling the javascript which calls for SP.Utilities.Utility.getLayoutsPageUrl(…).
I am getting sp.Utilities.Utility is null or not an object. Where i am making a mistake? I have included client object dlls already.
Please help.
Thanks,
Ramesh
March 23rd, 2012 at 2:17 pm
@Ramesh: JavaScript is case-sensitive. Are you sure you have typed SP uppercase?
September 2nd, 2012 at 11:28 pm
Thanks Waldek. You saved a lot of my time.
September 21st, 2012 at 5:29 am
Can you explain to me how to handle Cancel button and BACK TO Previous page?
September 21st, 2012 at 2:33 pm
One thing that you could do is to read the result and if its value is Cancel call history.back() in your script.
November 30th, 2012 at 5:25 pm
Awesome code. By far the best. Generic and re-usable.
March 8th, 2013 at 10:32 am
Hi Waldek
It's Awesome code. Can you please share the code..
Thanks in advance
March 8th, 2013 at 5:02 pm
All of the code is included in the article.
March 15th, 2013 at 7:18 am
i used u r code for opening popup but it is opening and suddenly closing
plz let me know wat i am doing wrong
here i followed following code
var options = { url:'/_layouts/prjsetng.aspx', title:'Title, Description, and Icon', width:640, height:400 } SP.UI.ModalDialog.showModalDialog(options);
March 18th, 2013 at 7:49 am
Have you tried using the same code snippet with another page? Could it be that the page automatically closes the dialog?
March 19th, 2013 at 8:08 am
yes i tried in another page also.even in that also i get same issue.I googled and i get one solution,the problem with asp.net button control.I replace asp.net button control with html button control then it's work fine.But i don't know why it is not working for asp.net button control.I placed return false in populate method in javascript but still problem is not solved..Plz suggest me to work with asp.net control
March 20th, 2013 at 2:48 pm
Could it be that it's caused by the postback which is the result of the default behavior of an ASP.NET button? Have you tried using the OnClientClick property instead OnClick?
March 22nd, 2013 at 8:28 am
i want to if i can open search results pages in model dialog box on click on search button(javascript:S3031AEBB_Submit())
March 22nd, 2013 at 10:46 am
You should be able to do that.
April 22nd, 2013 at 11:43 am
Great Info! Very Very helpful!
May 22nd, 2013 at 9:38 am
I try modal dialog and jquery. I would like to write a condition. It should be hidden the edit button in a list item from the dialog when you are on a specific page. What is missing here, or how do you do that?
I tried this:
if ($("td.title h1:contains('1. Ideen')").length) {
var elem = document.getElementById("Ribbon\.ListForm\.Display\.Manage\.EditItem-Large"); elem.style.display = "none !important"; };
or this:
if…. {
$("html.ms-dialog .ms-cui-tabContainer ul.ms-cui-tabBody li span span span span span:first-child a.ms-cui-ctl-large").css("display", "none !important"); };
r dont work.. I know that can work with the right for a list, but only on the page with a list webpart should not be editable for everyone.
What should I do now? Thanks in advance
May 24th, 2013 at 6:34 am
Hiding Ribbon buttons using jQuery is not really the way to go. I'd suggest you use the SharePoint Ribbon API with Page Components to do this correctly rather than applying CSS directly to the Ribbon buttons.