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.

10 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
    Replies
    1. How do you pass the tab index in the URL?

      Delete
  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