Thursday, November 5, 2015

Add related items on a new SharePoint form

We are glad to introduce you our new feature that has become available in SharePoint Forms Designer 3.0.5: the ability to create related items inline and link them to the current item automatically, including when you are on the new item form. You may want to read our post about related items auto-fill here before you proceed.

You may have a related items control on your new item form:

Add related items on a new SharePoint form

And you may want to add an item that is related to the current item. In that case you fill out a field, say Title, and click away or press Enter. The entity is created and with default fields filled out automatically.

New SharePoint form with related items.

Then you click Save and a link between the two items is created. Below is the same item opened in display view after saving. As you can see, the related issue is present:

Edit SharePoint form with related items in the quick edit mode

So, how to set this up? First of all, this feature will only work if:

  • You run SharePoint 2013 On-Premises or SharePoint Online.
  • You run Forms Designer version 3.0.5. In order to update Forms Designer in SharePoint Online simply remove the currently installed version and install the new version from the store.
  • The primary list and the related list are located on the same site.

If everything of the above is true, then let’s go through the setup process.

  1. In Forms Designer drop the related items control and set it’s Quick Edit option to “Only”:
    Related Items in quick edit mode on a SharePoint form
  2. Set up the Data Source as you would do normally
  3. Open up the JavaScript editor and paste something like the following:
    fd.populateFieldsInGrid($('.related-items'), {
     Parent: '{CurrentItem}',
     Assigned_x0020_To: _spPageContextInfo.userId,
     Due_x0020_Date: '12/12/2020',
     Description: 'Related Issue',
     Issue_x0020_Status: 'In Progress',
     Additional_x0020_information: 'This is a supervised issue.',
    });
    
    

    Draw attention to Parent: '{CurrentItem}'. Parent is a lookup field to the current list, which is being used as the filter by value in the related items control. It can be displayed in the control, but it doesn’t have to. {CurrentItem} is the new token that specifies the current item, using this token allows you to link related items to the current item even when it has not yet been created.

    I won’t discuss the function fd.populateFieldsInGrid and its syntax further here, please see the aforementioned blog post about it if required.

  4. Add ‘related-items’ CSS Class to the related items control. This class is used in fd.populateFieldsInGrid function to identify the related items control.

    That’s it, now the Parent field of inline-created related items will be set to the current item when the item is saved.

11 comments:

  1. Hi Dmitry,
    I can't seem to get this to work on a new item form. However, once I create and save a parent item, I can go back with the edit form and it works perfectly. Is there something I'm doing wrong?

    ReplyDelete
    Replies
    1. Hi,
      Please, ensure that you're using Forms Designer 3.0.5. You can find the current version in the lower-right corner of the designer.

      Delete
    2. I am using the current version (3.0.5)

      Delete
    3. May we start a screen sharing session to investigate the issue? Please, drop the connection settings to support@spform.com?

      Delete
    4. After discovering (my) user error - it works great!

      Thanks again for your help, Dmitry!

      Delete
    5. Hi There, I have the exact same problem, could you advise what your user error was?

      Delete
  2. Hi Dmitry.

    I have list with 8000+ items that I added to my form as "related items". I got an error regarding the threshold limit.
    The filter should only return 1-10 items from this 8000+ list.

    Is there any workaround so I can use my list as a "related items"?

    ReplyDelete
    Replies
    1. Hello,

      The solution would be to create a view with < 5k elements.

      1. Go to the list with >5k elements, click "create view"
      2. Under the "Filter" section select a condition that would limit the result set to be less than 5k, e.g.:
      ID
      is less than
      5000
      3. Click OK
      4. In Forms Designer click the related items control, Data Source -> select the view under "View"
      5. Click OK, Save.

      Delete
  3. Hi Dmitry,

    If a user doesn't click away or press Enter, related item is not created. Unfortunately it is not intuitive that user must do that. Is there a way to click Enter instead of user?

    ReplyDelete
  4. Hello,

    I have same design with grid with dropdown into rows, also have filter dropdow above to grid , now i want to add value of specific cell of grid if user select any value on dropdown on that specific row, but i didn't get change event of dropdown which is select by user on grid.

    ReplyDelete
  5. Hi Dmitry,

    This works great, I have one problem though, that you might be able to help me with. I have a custom Field on my parent form (Picture Column by Sparqube) that when selecting an image causes postback. When this happens the grid switches out of edit mode and only comes back when you click on a heading to sort by that column. Do you know of any way that I'd be able to stop that from happening?

    ReplyDelete