Open SharePoint 2013 List Items Directly into Edit View

I had written another post on this blog about opening list items directly into Edit View, which was based on SharePoint 2010.  Since then I have received several requests on how to do this in SharePoint 2013.  So here we go.

The original post is here: Open SharePoint 2010 List Items Directly into Edit View

In the original post I had given two options to perform a direct edit on list items:

  • The Brute Force – Using jQuery to modify the HTML on the page
  • Elegant (Custom List View) – This used a custom list view where we edited the link for the item

Now, the issue with SharePoint 2013 and SharePoint Designer 2013 is that the Design View is now gone when working with lists!  So, based on my earlier post, the Elegant method no longer applies.  As you can see in the screen shot below, there is no Design option anymore.

Luckily the first option, Brute Force, will still work!  And even better, there is the new Script Editor Web Part in SharePoint 2013, which makes this a more elegant solution that in SharePoint 2010.

First here is the script:


This script is pretty straight forward, it looks for all links within a class of .ms-vb that have listform.aspx in their value.  If you inspect the links on your form you’ll see they are wrapped in a DIV with this class applied.  After it finds all of the links it pulls the href value out and performs a replace changing the PageType to 6 (which is the type for Edit).  It then sets the link back to this new updated value.

To apply this to your list, simply navigate to your list and add a Script Editor Web Part.  In this example I have a simple list called List 1:

If we inspect the link of the individual list items, we’ll see the link goes to …/listform.aspx&PageType=4….

Next, place the page into Edit mode and click the “Add a Web Part” link.  From the menu, choose the “Media and Content” category, and under “Parts” choose “Script Editor”:

Click the “Edit Snippet” link on the Script Editor Web Part:

Paste the script from above into the editor and click the “Insert” button.  One thing to note here, if you already have jQuery on your page like in the MasterPage, then don’t include the first line.  This simply loads jQuery from a CDN, so if you already have it, you don’t need that line.

Once the snippet is inserted, click “Stop Editing” on the page to save the changes.  Now if you inspect the links of the page, you should see that the “PageType” query string parameter has been updated to ’6′ in the listform.aspx link:

Now clicking the list item will open the form in Edit mode:

If you have your list setup to launch forms in dialogs, it still works:

And there you go!  Again, not as elegant as being able to work directly with the list as you could in SharePoint 2010.  However, having a dedicated web part for scripts makes it an easy solution to implement.

Enjoy!

11 thoughts on “Open SharePoint 2013 List Items Directly into Edit View”

  1. The link to the original post does not go to the original post.
    I wish to share the link because it worked like a charm. Thanks!

    1. Doh! I updated the link, thanks for the comment.

      I had ported this blog over from another system. Not all the links were updated ;)

  2. Hi Brandon, I cannot see the script on your post?! I have tried opening this page in IE and Chrome but no script? Please can you paste it in the comments, maybe when you moved Blog provider it was lost?
    Thanks!

    1. The script is here:

      $(function() {
      // Change all display form links to edit form links
      $(‘.ms-vb a[href*="listform.aspx"]‘).each(function(){
      var link = $(this).attr(‘href’);
      link = link.replace(“PageType=4″, “PageType=6″);
      $(this).attr(‘href’, link);
      });
      });

    2. Here is the script:

      $(function() {
      // Change all display form links to edit form links
      $(‘.ms-vb a[href*="listform.aspx"]‘).each(function(){
      var link = $(this).attr(‘href’);
      link = link.replace(“PageType=4″, “PageType=6″);
      $(this).attr(‘href’, link);
      });
      });

  3. This is great! Thanks a lot.
    Would it be also possible to directly default to a custom Edit View for Infopath designed list?

    Script is not displayed above but found it from your MSDN Link
    http://social.msdn.microsoft.com/Forums/sharepoint/en-US/c9c54d3c-c9ab-4460-95c6-54a649d8a28d/open-edit-form-directly-when-list-item-is-clicked-in-sharepoint-2013-list?forum=sharepointgeneral

    $(function() {
    // Change all display form links to edit form links
    $(‘.ms-vb a[href*="listform.aspx"]‘).each(function(){
    var link = $(this).attr(‘href’);
    link = link.replace(“PageType=4″, “PageType=6″);
    $(this).attr(‘href’, link);
    });
    });

  4. I have other question: in case of this JavaScript solution, when paging is used (display item in batches setting), when switching pages the new links are not modified. What is easiest way to solve this? Thanks.

    1. Hmmm, I haven’t tried this before, but you may be able to attach a click event to the paging links using jQuery. Then fire a function to modify the links. You may need to use a setTimeout since the page would take a second to load.

  5. Hi Brandon, This is a very very helpful post and I have used many times in the past for various projects (using SharePoint 2013 Enterprise).
    However, when I am using the same for a list where the style of display is changed to ‘boxed’ style and used groupby function, this doesn’t work…. Can you look into and help please?

    1. My recommendation would be to open Developer Tools (IE) or Firebug (Firefox) and inspect the HTML for the link. Similarly to the way we grab all the links using $(‘.ms-vb a[href*="listform.aspx"]‘), you just need to look at the HTML to see which CSS class to target with jQuery. Once you have that, you should be able to easily modify the script to get those.

      Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>