1,804 articles and 15,128 comments as of Sunday, April 17th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint (Joel Oleson) content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

NothingButSharePoint.com
Thursday, May 27, 2010

SharePoint: Extending the DVWP – Part 5: Doing Stuff Before Save on Submit – PreSaveAction()

Author: Jim Bob Howard

Sometimes a user clicks OK before we want them to. Whether we want to validate data before saving it, or grab some other information, or create an alert to let the user know something, SharePoint has a built-in feature that allows you to intercept a click of the OK button before the save is committed.

In fact, you can use it even on a standard default form (NewItem.aspx, et.al.) where you don’t otherwise edit the page at all.

PreSaveAction()

The default save (or OK) button in SharePoint calls PreSaveAction() before it does anything else. Out of the box, it doesn’t do anything: it’s an empty function. So, we can use it to do things before the item is saved, and can even keep it from saving if we so desire.

Simply add the PreSaveAction() Javascript function to a Content Editor Web Part (CEWP) on the page, like this:

<script language="javascript" type="text/javascript">
function PreSaveAction() {
    // do some stuff - See future articles for some "stuff" suggestions
    return true; // if things go well…
    // or
    return false; // if they don't…
}
</script>

Using PreSaveAction() in the DVWP

If you’ve been following the Extending the DVWP series, you may wonder what this function has to do with the DVWP. Form actions in a DVWP don’t call PreSaveAction(), but we can make them call it, which comes in very handy here as well.

To call PreSaveAction()  from a form action link, we simply have to add a call to it before the GenFireServerEvent call:

So, this…

<a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">save</a>

Becomes this …

<a href="javascript: if(PreSaveAction()) {ddwrt:GenFireServerEvent('__commit')}">save</a>

By placing the call inside an if condition, we can make sure the rest doesn’t fire if we determine in our function that it shouldn’t. And it means we get the same functionality as the out-of-the-box OK button.

Next time:  We’ll take a look at using Workflows with DVWP form actions.

Author: Jim Bob Howard

Jim Bob Howard is a web designer / webmaster in the healthcare industry. He has been working with SharePoint since March 2009 and enjoys sharing what he has learned. He is a moderator and frequent contributor to Stump the Panel, and answers SharePoint questions on Twitter (@jbhoward) and via email ([email protected]).

View all entries in this series: Extending the DVWP»
Entries in this series:
  1. SharePoint: Extending the DVWP - Part 1: Layout Enhancement - Rearranging Columns - Default and Edit Templates
  2. SharePoint: Extending the DVWP - Part 2: Layout Enhancement - Rearranging Columns - Insert Template
  3. SharePoint: Extending the DVWP – Part 3: Getting it All on One Line - DVWP Function Action Links
  4. SharePoint: Extending the DVWP – Part 4: Turning DVWP Action Links into Buttons
  5. SharePoint: Extending the DVWP – Part 5: Doing Stuff Before Save on Submit - PreSaveAction()
  6. SharePoint: Extending the DVWP – Part 6: Examining the Form Action Links
  7. SharePoint: Extending the DVWP – Part 7: Creating a Form Action Workflow
  8. SharePoint: Extending the DVWP – Part 8: Creating a Form Action Workflow - The After Math
  9. SharePoint: Extending the DVWP – Part 9: Oops! Failed Setting Processor Stylesheet
  10. SharePoint: Extending the DVWP – Part 10: Passing Workflow Variables to a Form Action Workflow
  11. SharePoint: Extending the DVWP – Part 11: Getting More Form Fields to the Workflow
  12. SharePoint: Extending the DVWP – Part 12: Adding More Form Fields from the Data
  13. SharePoint: Extending the DVWP – Part 13: Putting PreSaveAction() to Work – Creating Variables
  14. SharePoint: Extending the DVWP – Part 14: Putting PreSaveAction() to Work with jQuery
  15. SharePoint: Extending the DVWP – Part 15: User-Managed Dropdowns with Site Columns
  16. SharePoint: Extending the DVWP – Part 16: User-Managed Dropdowns - Loading Data
  17. SharePoint: Extending the DVWP – Part 17: User-Managed Dropdowns – Creating a Relationship list
  18. SharePoint: Extending the DVWP – Part 18: User-Managed Dropdowns – Loading the Relationship list – Part 1
  19. SharePoint: Extending the DVWP – Part 19: User-Managed Dropdowns – Loading the Relationship list – Part 2
  20. SharePoint: Extending the DVWP – Part 20: Cascading Dropdowns - Applying the jQuery
  21. SharePoint: Extending the DVWP – Part 21: Cascading Dropdowns - Three-tier Cascade
  22. SharePoint: Extending the DVWP – Part 22: Creating Title Based on Other Fields with jQuery
  23. SharePoint: Extending the DVWP – Part 23: Creating Title Based on Other Fields with a Workflow
  24. SharePoint: Extending the DVWP – Part 24: A Note to Readers
  25. SharePoint: Extending the DVWP – Part 25: Using an Audit Trail by Creating List Items with SPServices
  26. SharePoint: Extending the DVWP – Part 26: Modifying the Edit Template
  27. SharePoint: Extending the DVWP – Part 27: Adding an Alternate Edit Template to a DVWP
  28. SharePoint: Extending the DVWP – Part 28: Massage the Remove Template
  29. SharePoint: Extending the DVWP – Part 29: Modifying Form Action Workflows on the remove Template
  30. SharePoint: Extending the DVWP – Part 30: Using EasyTabs with Filtered DVWPs to Make Data Manageable
  31. SharePoint: Extending the DVWP – Part 31: Filling in Default Data on the insert Template with jQuery
  32. SharePoint: Extending the DVWP – Part 32: Filling in Default Data on the insert Template with Multiple DVWPs
  33. SharePoint: Extending the DVWP – Part 33: Modifying Total and Subtotal Row Layouts in DVWP
  34. SharePoint: Extending the DVWP – Part 34: Using Icons for Form Action Links
  35. SharePoint: Extending the DVWP – Part 35: Putting it All Together
  36. SharePoint: Extending the DVWP – Bonus: Fixing the Insert Form Action When "No Matching Items"
  37. SharePoint: Extending the DVWP – Bonus: Creating a Title Based on Dropdowns with jQuery
 

Please Join the Discussion

16 Responses to “SharePoint: Extending the DVWP – Part 5: Doing Stuff Before Save on Submit – PreSaveAction()”
  1. tyler says:

    Could this be used to generate the ID before the item is created?

    • Probably, but be careful.

      See Marc’s SPRedirectWithID in SPServices for guidance: http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPRedirectWithID&referringTitle=Documentation

      Blessings,
      Jim Bob

      • tyler says:

        Can you be specific on what you’re implying with careful?

        Could it crash the SQL Database?

      • If you’re insert mode, and you use PreSaveAction() to create the item so you have the ID before you actually save everything that’s just been entered…

        You just have to be careful to consider what you’re doing:
        * If you have an “on create” Workflow that fires on this list, it will fire when you create the ID, even if the rest of the data isn’t there yet.
        * If you have an “on change” Workflow and you create an empty item so you can have the ID, THEN you save the data: You’re actually doing a change so that workflow will fire
        * If you have required fields, you may get an error trying to create the ID without the data.

        That all leads to the question: Why do you want to create the ID before you save the data?

        As I said… be careful. ;)

        Blessings,
        Jim Bob

  2. tyler says:

    Thanks for the tips Jim.

    I need to achieve all of this OOTB without SharePoint Designer. CWEP/Javascript is my only mechanism.

    I’m looking a way to customize the inherent SharePoint ID column. I’m thinking presave will help with this. Additionally, I have a lookup column on another list and want to make it easy for the user to find the correct entry. I’d like to have something [ID]-[Description]. Searching by text is rather cumbersome.
    1 Test entry 1
    2 Test entry 2
    ….. etc etc.

    My last requirement is that I need to make ID SharePoint search-able. I imagine I’ll just need to stick with a filter web part rather then SharePoint search to achieve this.

    Thanks again for the tip

  3. Robin Witcher says:

    Jim Bob,

    Just now getting a chance to read this section and fired some thoughts. Advise if I’m way off base here.

    Could the Edit Forms in a Task list (generated from an existing workflow) use the PreSaveAction??

    Here’s the scenario. We’ve deployed several InfoPath forms which have SPD workflows (Sharepoint 2007). Three of these workflows move forms to an “approved” or “rejected” library (different document library in the same site route). I’ve recently written secondary workflows to manually move these forms, because the managers often forget to close the InfoPath forms before approving. When this happens, the workflow with either record Stopped or Error Occurred and show that the form is checked out/locked for editing by the manager. I have a wait for Checked Out to To Be Empty step in the workflow in one of them, in others I’ve got a pause for 15 minutes (waiting for form to be closed)… neither one seems to prevent all of these errors.

    So I was wondering after reading your post here if it would be possible to pop up a message to the managers to close the InfoPath form before they hit “Complete Task”. If there’s an easier way to do this, please advise. As a one-woman Sharepoint team of an organization with 500 users, it’s difficult to keep all of these forms where they need to go.

    The other possible solution I’ve thought of (but don’t know how to implement) is to have the task email (customized) actual display the content of the form instead of a link to the form. The InfoPath forms can contain attachments (word, excel, pdf, jpg, etc) that would need to be viewable as well for this work. But I haven’t figured out a way to do that.

    I need a solution that does not require Visual Studio (I am NOT a programmer, nor do I have one at my disposal).

    Thanks in advance for any advice you can give me on this. If I need to post this in Stump the Panel, just let me know where, and I’ll gladly do so.

    • On the surface, it sure sounds like something that would be doable with the PreSaveAction() on a Task list’s EditForm.aspx.

      But, yeah, let’s flip it over to STP to work out the details. (You may find yourself posting an article from the results. :) )

      Blessings,
      Jim Bob

  4. Greg says:

    Hi Jim,
    So, the PreSaveAction() function:
    * is there by default in an ‘OK’ button in a SharePoint form
    * can be added to the nifty ’save’ (and other links in a DVWP when inserting items as multiple items and using the ‘edit’ options like Laura demonstrated in her article)

    That trick in itself is worth is weight in gold since it gives you the option to hijack the SP default functions until PreSaveFunction() evaluates to TRUE.
    If I recall, Marc A even used it to create folders with unique names making great use of SPServices requireunique utility functionand UpdateLIstItems
    http://sympmarc.com/2009/12/08/a-jquery-library-for-sharepoint-web-services-wss-3-0-and-moss-real-world-example-part-1/

    Can you use the same tricks when:
    #1 using the DVWP and inserting items as multiple items forms (ref. Laura’s article 1st part)
    #2 the user decides to bulk create items using the DataSheet view?

    Many thanks for sharing!

    Greg

  5. tyler says:

    Excuse my ignorance here, as I’m still in WSS.. but can this be done in a CEWP?

  6. ahmed says:

    In order to fire PreSaveAction upon user click “Complete Task” button, I had modified as shown below: The “task” is created by “collect data from user” activity in SPD.

    value=”Complete Task” onclick=”javascript: if(PreSaveAction())

    Function has been fired with my user name (moss admin). However, function has not got fired with other user’s login!!!

    Any ldea?

Trackbacks

Check out what others are saying about this post...
  1. [...] we saw in the last Extending the DVWP article, it’s possible to intercept the built-in process of the OK button on a SharePoint form. And [...]

  2. [...] in this series, we talked about the basics of Doing Stuff Before Save on Submit by using the PreSaveAction() function, which is called by default from the OK button on the NewForm [...]

  3. [...] the Form Action buttons have been modified to call PreSaveAction(), this script will cause the changes to be saved to the audit list. Here’s a breakdown of how [...]

  4. [...] we have them looking the way we want them, we’ll open them up, see how they work, add a PreSaveAction(), add a  workflow, rearrange some things, and then fix what we [...]




Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!