Author: Jim Bob Howard

Earlier 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 and EditForm. We’ll have to call it explicitly from the DVWP, but we’ll derive the same benefit of being able to act on the information supplied by the user before the data is committed to the database.

Edit to the Content Editor Web Part (CEWP)

You could add the PreSaveAction() JavaScript section directly to the page in SharePoint Designer (SPD). You could even add it to the master page, if that made sense for your project. But, I usually add it to a Content Editor Web Part (CEWP).

Several articles on EUSP (including my How to Add a Title to a Web Part Page that Doesn’t Have One) provide an easy step-by-step guide to adding a CEWP to a page, so I won’t repeat the steps here. We’ll start with adding our function to the CEWP.

In your browser, with your DVWP page open:

1. Click Site Actions -> Edit Page

Site Actions -> Edit Page

2. On your webpart, click edit -> Modify Shared Web Part

Edit -> Modified Shared Web Part

3. In the right pane, click Source Editor…

Click Source Editor… to open code window

4. If you plan to use the jQuery and/or SPServices JavaScript libraries (which I will, below), add them first

Be sure to get latest version of both jQuery and SPServices

5. If you are using jQuery when the page loads, make sure PreSaveAction() is outside the ready() function

<script language="javascript" type="text/javascript">
          $(document).ready(function() { // stuff that happens when the page loads
               ...
               ...
          }); // This is the END of the ready() function

          function PreSaveAction() { // stuff that happens before commit on "OK" or "Save"
               ...
               ...
               return true; // or false, if things go wrong
          };
</script>

For the rest of this article, we’ll be working from line 9 down

Audit Trail with jQuery

It’s not always enough to know how the data looks right now; we often need to know how it got that way. So we want to take a snapshot of the data right before it changes and explain what is changing.

jQuery and Marc Anderson’s jQuery Library for SharePoint Services (SPServices) provide a remarkably easy solution for writing to an audit list.

The Form Control = Current User Data

Finding the content of our form fields is pretty straightforward: it’s simply the value of the input control whose name contains the ff# of our control, starting with a ‘$’ and ending with a ‘_’.

In other words, if our control looks like this in SPD:

<SharePoint:FormField runat="server" id="ff3{$Pos}" … />

Click on the control in the Design pane to highlight this XSLT block in the Code pane

It will look like this when we view source from the browser:

<input name="ctl00$m$g_ae046c3b_1d8e_4427_95e7_41f5d9c0e374$ff3_1$ctl00$ctl01" type="text" value="Administrative Assistant" id="ctl00_m_g_ae046c3b_1d8e_4427_95e7_41f5d9c0e374_ff3_1_ctl00_ctl01" … />

Click the edit form action link before viewing the source. Find $ff3_ in the source. This will be the only input with a name that includes $ff3_

So, we can access it with jQuery like this:

$("input[name*=$ff3_]").val();

Literally, find all input controls with a name that contains ‘$ff3_’ (there will only be one) and return the value of the value attribute

The Label = Current List Data

Label content is easy to find, too: it’s the text value of a span tag with an id that contains the ff# wrapped with ‘_’.

In other words, if our control looks like this in SPD:

<asp:Label runat="server" id="ff11{$Pos}" … />

Click on the visible control in the Design pane to get close to this XSLT block in the Code pane

It will look like this when we view source from the browser:

<span id="ctl00_m_g_ae046c3b_1d8e_4427_95e7_41f5d9c0e374_ff11_1">Medical Records Clerk</span>

Click the edit form action link before viewing the source. Find _ff11_ in the source. This will be the only controlwith an id that includes _ff11_

So, we can access it with jQuery like this:

$("span[id*=_ff11_]").text();

Literally, find all span blocks with an id that contains ‘_ff11_’ (there will only be one) and return the text that is inside tag

Creating Variables

With these two pieces of information, we can create ‘old’ and ‘new’ variables, so we can write them out to our audit trail.

function PreSaveAction() {

    var txtNewPos = $("input[name*=$ff3_]").val();
    var txtOldPos = $("span[id*=_ff11_]").text();

    …

    return true;
};

Repeat for each column you want to record in your audit list.

Now that we have our data into variables, next time we’ll finally do something with them.

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]).