dcsimg
November 18, 2017
Hot Topics:

Take Control of Your OK and Cancel Buttons

  • February 18, 2010
  • By Paul Galvin
  • Send Email »
  • More Articles »

SharePoint is famous for providing an 80 percent or 90 percent solution with pure out-of-the-box components. SharePoint's method for handling the OK and Submit buttons on standard forms invites the same conundrum. SharePoint enables us to override OK and Cancel button behavior for both buttons, not just one. However, with a small piece of jQuery, we can get the best of both worlds.

Business Scenario

To illustrate the technique consider this scenario: You have create a "Contact Us" form on your web site. When a user fills out the form and clicks "OK" you want the system to respond with a "Thank you!" screen that lets the user know the request has been received and that someone at your company will respond to them within 24 hours. On the other hand, if the user clicks Cancel, you want to go back one page (act as if the user had clicked the back button on the browser). We can solve ½ of this using the Source parameter on the URL and the other half using jQuery.

Source URL Parameter

Out of the box, SharePoint allows us to control OK and Cancel button behavior with the Source parameter. To use this, create a custom list and an associated "Thank you" page.

The objective is to create a URL that follows this pattern:

http://[server]/[list]/NewForm.aspx?Source=[ThankYouPage.aspx]

Replace [server], [list] and [ThankYouPage.aspx] with values appropriate to your environment.

Now, when you click the OK button, SharePoint redirects the user to [ThankYouPage.asxp]. Sadly, it also redirects the user to [ThankYouPage.asxp] when she clicks the Cancel button.

jQuery to the Rescue

Since SharePoint only gives us a single re-direction page, we need to get in its face, so to speak, and take control. We do this with some jQuery code that overrides the Cancel button's logic and redirects the user to the page of your choosing.

You have several options for adding jQuery to a page. One common approach is described here: (http://paulgalvin.spaces.live.com/blog/cns!1CC1^17aspx18^9B8AA!3991.entry) and boils down to:

      1. Add a content editor web part to your newform.aspx page.

      2. View the HTML of newform.aspx so that we can figure out how to properly identify the cancel button.

    3. Add the jQuery to the content editor.

Before we write any jQuery code, we need to understand the details of the HTML that SharePoint emits for the Cancel button. Here is an example:

<input type="button" name="ctl00$m$g_f1ec3550_719b_469b_aec4_fb2b9ae1cf2a$ctl00$toolBarTbltop$RightRptControls$ctl02$ctl00$diidIOGoBack" value="Cancel" onclick="STSNavigate('u002fPagesu002fWewillgetbacktoyou.aspx');return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$m$g_f1ec3550_719b_469b_aec4_fb2b9ae1cf2a$ctl00$toolBarTbltop$RightRptControls$ctl02$ctl00$diidIOGoBack&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" id="ctl00_m_g_f1ec3550_719b_469b_aec4_fb2b9ae1cf2a_ctl00_toolBarTbltop_RightRptControls_ctl02_ctl00_diidIOGoBack" accesskey="C" class="ms-ButtonHeightWidth" target="_self" />

That's a more than a small mouthful of markup, but there are really two key pieces of information that but we can reduce all of that down to:

<input type="button" name="ctl00$m$g_f1ec3550_719b_469b_aec4_fb2b9ae1cf2a$ctl00$toolBarTbltop$RightRptControls$ctl02$ctl00$diidIOGoBack" value="Cancel" onclick="STSNavigate('u002fPagesu002fWewillgetbacktoyou.aspx');return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$m$g_f1ec3550_719b_469b_aec4_fb2b9ae1cf2a$ctl00$toolBarTbltop$RightRptControls$ctl02$ctl00$diidIOGoBack&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" id="ctl00_m_g_f1ec3550_719b_469b_aec4_fb2b9ae1cf2a_ctl00_toolBarTbltop_RightRptControls_ctl02_ctl00_diidIOGoBack" accesskey="C" class="ms-ButtonHeightWidth" target="_self" />

And we are left with:


<input type="button" value="Cancel"/>

This tells us that:

      1. The button is an <input> tag.

      2. It has a value attribute whose value is the word "Cancel".

Armed with this information, we can now proceed. Use the following jQuery code to override the behavior of the cancel button:



    $(function() {
      $('input[value=Cancel]').click(function() {history.go(-1);});
    });

The above bits break down as follows:

      * "($(function() {": Wait until the page finishes loading before doing anything.  This prevents the JavaScript from out-racing the web browser and potentially updating only partially.

      * "$('input[value=Cancel]')": Locate every HTML element on the page of type input where the value attribute equals the word "Cancel".  We know this is the correct way to locate our cancel button from our previous analysis above.  Note that this will locate every html element that matches the criteria.  There are two cancel buttons on the form and this ensures that we catch both of them.

      * ".click(function()":  For each of the button elements we found from above,  invoke a new JavaScript function when the user clicks on it.

    * "{history.go(-1);});": Simply go back one page.

In summary, for each cancel button, add a click event that goes back to the previous page.

Summary

SharePoint gives us a large part of the solution via the Source URL parameter. jQuery helps us cross the finish line with a solution that provides appropriate responses to the user for both OK and Cancel options.






Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date