For my "proof of concept" I will use SharePoint calendar and a simple document library, but the instructions below work for any types of list and related library, e.g. issues and wiki pages, employees and job descriptions etc.
First, I created a Calendar and a Document library, added a lookup field into the document library and connected it with the calendar. Next, I ran Forms Designer from the calendar and designed the Edit form:
I distributed the standard event fields on the first tab and put a Related items control onto the second one. I set Render property into 'Client' to make list refresh automatically when the user drops a document on it. Here is the Data source configuration of the Related items control:
container is a jQuery selector of Related items container which may contains one or more Related items controls.
fieldValues is an object containing the default values of fields. Example:
Note: the field names of the object have to match the internal names of the related library.
First, I assigned a CSS-class called 'related-docs' to my related documents.
Next, I put the following code into JS-editor:
As you can see, I built the jQuery selector based on the assigned CSS-class and set the current event ID as the default value of the lookup field whose internal name is Event.
Ok, now, when the user drops a document onto the second tab, the lookup field is automatically filled with the currently opened event and uploaded documents appear immediately in the related documents section:
Here is the result:
Please, note that with help of
As usual, I will be glad to answer your questions in the comments.