Wednesday, October 2, 2013

How to open edit form right after creation of an item in SharePoint

In this article I would like to demonstrate how to open an edit form of an item right after its creation. This feature is very useful if you have related items filtered by the currently selected item on the form. As you may have noticed, you cannot edit related items on a new form because the parent item has not been created and its ID is not defined yet, so, other list items or documents cannot be linked to it.

Due to this issue, to create an item with connected child items users have to create a parent item first, save it and find it in the list, open its edit form and start editing the related items. Quite difficult, isn't it?

In SharePoint Forms Designer 2.7.11 we have implemented functionality that helps you to redirect users to any URL including edit form of an item right after its creation and inject ID of the currently created item into the link address.

Please note: this functionality works only in forms opened in full page, not in dialogs. In SharePoint 2013 all forms are opened in full page by default but in SharePoint 2010 you have to change this option in the following way: List Settings → Advanced Settings → Launch forms in a dialog. Set this option in 'No'.

Now, navigate to the list where you wish to configure redirection, open Forms Designer and choose a new form. Add the following JavaScript into JS-editor:

fd.onsubmit(function() {
  var uri = fd.setUrlParam(decodeURIComponent(window.location.href), 'FDRedirectWithID', 'fd_Item_Edit.aspx?ID=');
  fd.sourceFormParam(uri);
  return true;
});
As you can see, I used new JavaScript functions here:

setUrlParam(url, key, value)
Adds or updates query parameter in provided URL with a specified value and returns a new URL.
Url - source URL-string
Key - name of query string parameter
Value - new value of query parameter

sourceFormParam(value)
Gets or sets 'Source' query parameter of the URL which is contained in action attribute of the form. Source parameter contains URL of the page where users will be redirected after the submission of the form. If value is not specified the function returns the current value of 'Source' parameter.

In my example, users will be redirected after submission to the same page but with additional query parameter 'FDRedirectWithID'. If this query parameter is not empty Forms Designer gets its value, appends ID of the last item created by the current user and redirects to the generated URL. In my case, users will be redirected to 'fd_Item_Edit.aspx' form. You have to replace the name of the form with your own value. You can find it at the left bottom corner of Forms Designer.

SharePoint form name

If you have any questions, please, leave them here. Thank you.

22 comments:

  1. This is great Dmitry, however I am trying to add a redirect to the view form from the save of my edit form and the code above does not work for this. I have been able to return the item's ID using fd.getUrlParam(decodeURIComponent(window.location.href), 'ID') but inserting this into the redirect link does not work either. Is there an alternative to FDRedirectWithID I can use here?

    ReplyDelete
    Replies
    1. Hello,
      I have tried the following code to redirect user to Display form after submission and it seems it works properly:

      fd.onsubmit(function() {
      var uri = fd.setUrlParam(decodeURIComponent(window.location.href), 'FDRedirectWithID', 'fd_Item_Display.aspx?ID=');
      fd.sourceFormParam(uri);
      return true;
      });

      Please, make sure that you put correct name of your display form into the script.

      Delete
    2. Thanks, I will give this a try

      Delete
    3. Dmitry, Thanks for your quick response. I have tried this again and the problem is that it keeps redirecting to the same record (ID=24) no matter which record I was editing. The querystring contained the following parameter: FDRedirectWithId=fd_Item_Display.aspx%3FID%3D.

      I was expecting the code to be different as when creating a new item, the ID for the item is not assigned until it is created and is unknown at this point, however when editing an existing item, the ID would already be known?

      Delete
    4. Oh, now I see, you are trying to redirect users from Edit form. So, please, try the following code instead, it works for me:
      fd.onsubmit(function() {
      fd.sourceFormParam('fd_Item_Display.aspx?ID=' + GetUrlKeyValue('ID'));
      return true;
      });

      Delete
  2. Dmitry, is it possible to redirect to a specific tab control on the redirected page?

    ReplyDelete
    Replies
    1. Hi Rohit,
      Yes, it's possible with help of JavaScript. Please, put the following code into the new form to pass the index of a tab that has to be selected on the edit form:

      fd.onsubmit(function() {
      var uri = fd.setUrlParam(decodeURIComponent(window.location.href), 'FDRedirectWithID', 'fd_Item_Edit.aspx?tab=1&ID=');
      fd.sourceFormParam(uri);
      return true;
      });

      Next, use the following code in the edit form to open the specific tab based on the passed parameter:

      var tabIndex = GetUrlKeyValue('tab');
      if (tabIndex) {
      $('#fd_tabcontrol-0').tabs('option', 'active', tabIndex);
      }

      Delete
  3. I used this code in edit form to open the second tab but seems something is wrong. It anyway opens the first tab.
    I can see in url that the passed tab value = 2.

    ReplyDelete
  4. In New Form I added this code:

    fd.onsubmit(function() {
    var uri = fd.setUrlParam(decodeURIComponent(window.location.href), 'FDRedirectWithID', 'fd_Item_Edit.aspx?tab=2&ID=');
    fd.sourceFormParam(uri);
    return true;
    });

    It opens the Edit Form and url I can see ends with
    /fd_Item_Edit.aspx?tab=2&ID=30

    I added also this code to the Edit Form:

    var tabIndex = GetUrlKeyValue('tab');
    if (tabIndex) {
    $('#fd_tabcontrol-0').tabs('option', 'active', tabIndex);
    }

    ReplyDelete
  5. Hello Dmitry,

    Is there a way to do a refresh after running this code on an edit form?


    fd.onsubmit(function() {
    fd.sourceFormParam('fd_Item_Edit.aspx?ID=' + GetUrlKeyValue('ID'));
    return true;
    });

    The problem I am getting is that I get a "Save Conflict" error because there is a workflow that updates the same list that I just edited. And I think the form needs a refresh after the workflow updates those fields.

    Thank you for your help.

    Joe

    ReplyDelete
  6. Guys where exactly do I add that code? I am new to sharepoint designer and I would really like to learn how to use this feature. I can get to the code and designer mode of the new item form, but can someone direct me to the specific part of the code where this needs to be added.

    ReplyDelete
  7. В нашем проекте принят стандарт - все окна только в режиме Dialog. Есть ли какое-то решение чтобы открыть форму на редактирование именно в этом режиме?

    ReplyDelete
  8. Hi everyon,
    Is there a way so that when ever i open a page i need the edit form basing on the logged in user

    ReplyDelete
    Replies
    1. Sure, you can personalize forms with the help of groups functionality:
      http://spform.com/documentation/groups

      Delete
  9. hello Dmitry,

    after item creation i want to redirect to displayform but i create new item thanks to related items in another displayform in another list and this method doesn't work
    Maybe it takes displayform of this another list because its have same name.

    Can you help me?

    ReplyDelete
    Replies
    1. Hi,
      Do you need to redirect users to the display form of the just created item in the list of related items? First, you cannot redirect from a dialog, so if you open a new form in a dialog, you cannot use the solution described in the current post. Second, if you redirect users to the display form of a child item, they will lose changes made on the parent form. Please, send the detailed description of your case to support@spform.com.

      Delete
    2. I want to redirect users.
      I sent mail who i explain my problem.
      Thanks for the help

      Delete
  10. Hello Dmitry,

    i have since a few days (maybe weeks) a problem with this function.
    The redirect isn't working anymore ... previously ist was working flawless for over a year (maybe a sharepoint update that broke it?)

    I use following code in the javascript fd.onsubmit part:

    var uri =fd.setUrlParam(decodeURIComponent(window.location.href), 'FDRedirectWithID', 'fd_Element_Display.aspx?ID=');
    fd.sourceFormParam(uri);

    But now the browser adress bar only shows:
    https://xxx.xx/Lists/Reisekosten/fd_Element_New.aspx?Source=https://xxx.xx/Lists/Reisekosten/AllItems.aspx&RootFolder=&FDRedirectWithID=fd_Element_Display.aspx%3FID%3D

    And the browser window is showing the "working" rotating dots ... no redirect even after minutes of waiting.

    Thanks

    Thomas

    ReplyDelete
    Replies
    1. Please, open the browser console (F12) and check JS-errors or notifications. What's your SharePoint version? Send the info to support@spform.com.

      Delete
    2. sp.debug.js:8263 Uncaught TypeError: Cannot read property 'toString' of undefinedSP_ListCollection$getById @ sp.debug.js:8263(anonymous function) @ plumsail.fd.core.js:2fn2 @ init.debug.js:4342NotifyOnLoad @ init.debug.js:4351fn @ init.debug.js:4320
      init.debug.js:4303 GET http://sharepoint.echion.de/_layouts/15/plumsail/crosssitelookup/select2/select2_locale_de_de.js LoadSodInternal @ init.debug.js:4303LoadSod @ init.debug.js:4169LoadSodByKey @ init.debug.js:4115(anonymous function) @ fd_Element_New.aspx:536NotifyEventAndExecuteWaitingJobs @ init.debug.js:6852NotifyScriptLoadedAndExecuteWaitingJobs @ init.debug.js:6896(anonymous function) @ plumsail.csl.select2.js:30

      These are the JS-errors

      Version is Sharepoint Foundation 15.0.4841.1000

      Delete
    3. Sorry for the messed up formatting

      Delete

Note: Only a member of this blog may post a comment.