1,804 articles and 14,767 comments as of Tuesday, April 19th, 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
Tuesday, June 1, 2010

SharePoint: Extending the DVWP – Part 6: Examining the Form Action Links

Author: Jim Bob Howard

As 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 we can extend that to the DVWP by adding to the JavaScript call within the HREF parameter of our form action links. But, there’s more we can do…

We can build and call workflows, too.

Examining the Links

Before we dig too deep, let’s focus on what is going on so we know what we’re changing.

Let’s take a quick look at what each of these links is doing, OOTB (out-of-the-box). For each of these, the code is fired from a JavaScript call using the HREF (hypertext reference) attribute of the A (anchor) tag.

Note: The line numbers below are relative to my document, so they won’t necessarily show up at the same point in yours. To find them in your page, in the Design pane, click on the link in question. This will bring the HTML block into view in the Code pane. For the Edit and Insert Templates, you’ll need to switch to those views in SPD to see the links. For more details, see the previous article in this series: Extending the DVWP – Rearranging Columns – Default and Edit Templates.

Edit

<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}">edit</a>

The edit link is used to redraw the form with the Edit Template in place. It performs two functions:

  1. cancel (which causes the form to be redrawn);  but also
  2. dvt_1_form_editkey is passed the ID of the current list item so that the Edit Template will be drawn for that record

Edit Template

As we’ve already seen, the edit link causes the page to be redrawn with an Edit Template (or form) for the current record, with two more links: save and cancel.

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

    This call is very simple. It takes the content on the form that we have updated and commits it to the database. No questions, no other steps, just save my changes.

  3. cancel
  4. <a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">cancel</a>
    

    Likewise, this is a simple call: cancel without saving. No confirmation, just quit it and redisplay the page as it was.

Insert

<a href="javascript: {ddwrt:GenFireServerEvent('__cancel;dvt_1_form_insertmode={1}')}">insert</a>

The insert link is used to redraw the form with the Insert Template in place. It, too, performs two functions:

  1. cancel (which causes the form to be redrawn);  but also
  2. dvt_1_form_insertmode is passed a 1 (for ‘true’) so that the Insert Template will be drawn to create a new record

Insert Template

Again, like edit, insert causes a redraw of the screen with a "new" form laid out like the DVWP, with similar links:

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

    This one is exactly like the save on the Edit Template, above. It commits the changes made.

  3. cancel
  4. <a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">cancel</a>
    

    And this one cancels the insert and redraws the page as it was.

Delete

<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;__delete={',$KeyField,'=',$KeyValue,'};__commit'))}">delete</a>

The delete link redraws the DVWP with the Default Template, but without the deleted list item. It actually performs three functions:

  1. cancel (which keeps the form from doing its normal submit function);
  2. delete (which passes this item’s ID to the delete function); and
  3. commit (which commits the deletion to take place).

Notice that there is no verification that it should be deleted; it’s just gone (of course, we could easily recover it from the Recycle Bin). In a future article, we’ll change the way that works.

Next time: Changing the functionality of these links (with workflows, jQuery, the PreSaveAction() function, creating new Edit, and a combination of those) will be the focus of the next few Extending the DVWP articles.

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

6 Responses to “SharePoint: Extending the DVWP – Part 6: Examining the Form Action Links”
  1. Iain Munro says:

    Hi Jim Bob

    Using the DVWP, is it possible to create links between two web parts that are on different sites?

    Iain

  2. RogueVeggie says:

    Aloha Jim Bob,
    I’m wondering, how would I add an anchor (#my_anchor) to the end of the link for Edit, Save, and Cancel? In a long list of items if I hit Edit the page refreshes and I have to scroll down to find what line I want to edit. This can be annoying even if it’s just a short scroll down.

    • Dear Rogue,

      Great question. Answer: I don’t know.

      There aren’t any answers to this question online—though it’s been asked numerous times—as far as I can find. GenFireServerEvent is a bit of a black boxto me, from which I must extrapolate theories by trial and error. ;)

      But, this is SharePoint (a.k.a. “many ways to skin a cat”), and I DO know how you can get a similar result without the anchor…

      In a CEWP, add jQuery to the page and have the last call inside $().document.ready() be:

      $(”input[title='Your top-left-most column']“).focus();

      Putting the focus there will scroll the page up for you.

      That doesn’t help to bring that record back into view on Cancel, though. But, hopefully it will help the bulk of the frustration on this account.

      Blessings,
      Jim Bob

Trackbacks

Check out what others are saying about this post...
  1. [...] Last time, we examined what the link looks like for DVWP form action links. This time, let’s see how we can edit them from the Design pane using the Form Actions wizard. [...]

  2. [...] 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 [...]




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!