Creating related items on a new item form via a non-grid related items control

In November we released a feature that allows you to create new items and link them to the current item on a new item form. Up until now, however, you could only do that with the related items control in grid mode. Starting from Forms Designer 3.0.8 you are able to do it with a non-grid mode related items control as well.

Let’s illustrate what we’re talking about. Here’s a form:

Let’s add a new related contact:

It appears in the related items control:

Then we can save the parent item, when we do so a link is created:

Implementation

Open the parent New form in Forms Designer.

Set the related items control to 'Show new items only':

Add the following line of code to the JS-editor:

fd.populateFieldsInGrid($('.related-items'), {
 RelatedIssue: '{CurrentItem}'
});

Where RelatedIssue is the internal name of a lookup field on the child list to the parent list and related-items is a CSS class name that you need to assign to the related items control in Forms Designer.

Save.

Open child New form in Forms Designer.

Add an HTML control to the form, set CDATA to false, insert the following code to it:

<div id="_fd_parent_temp">
<asp:HiddenField runat="server" ID="_fd_parent_tempField"
__designer:bind="{ddwrt:DataBind('i','_fd_parent_tempField','Value','Load','ID',ddwrt:EscapeDelims(string(@ID)),'@_fd_parent_temp')}" />
</div>

Add the following code to the JS editor:

$('#_fd_parent_temp > input').val(window.top.fd._tempParentId());

Save the child form.

Explanation

When we added a related items control and saved the form, Forms Designer added a hidden field called '_fd_parent_temp' to the target list. We then added a hidden '_fd_parent_tempField' control to the child form and bound it to the hidden field. When the child form loads, the JavaScript sets a temporary id of the parent item into _fd_parent_tempField. Finally, when the parent item is saved, Forms Designer checks '_fd_parent_temp' for the parent items’ id and sets the 'RelatedIssue' field to the parent item.

Feel free to ask your questions

CodeProject

Printing SharePoint forms and exporting to PDF

In this blog post I will describe two new features that Forms Designer has received in the 3.0.7 release. You now have the ability to save your forms to PDF files (without help of a virtual printer) and print them in a printer-friendly way.

You can add the print and export buttons via General Settings in Forms Designer:

This will give you two additional buttons in the ribbon:

Printing

Suppose you have a form like this one:

As you can see, the form utilizes an accordion control that hides part of the form.

Now, when I click 'Print', the following document is produced:

As you can see, the document contains just the form without all the extra bits present on the webpage, plus the accordion is expanded, so all of the information is shown in the document.

Note, you can arbitrarily hide UI elements in print mode if you add 'fd-no-print' CSS class to them.

Saving to PDF

You now also have the ability to save PDF versions of your forms via Export to PDF button. Here’s what happens if we use it with our form:

The resulting PDF document contains the form as it is shown on the webpage.

Doing the above programmatically

You don’t have to add the ribbon buttons to use this functionality. You can use the following functions instead:

• fd.saveAsPDF('invoice.pdf') – this will save the form as a PDF with the name 'invoice.pdf'
• fd.printForm() – this will print the form

You can use these functions with your own Print/Export buttons or in some other way.