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:

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.

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:

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”:
   
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.