Monday, May 23, 2016

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:

New SharePoint form with related items

Let’s add a new related contact:

Adding a related item from a new SharePoint form

It appears in the related items control:

New SharePoint form with an attached item

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

Linking related items to a SharePoint item after saving

Implementation

Open the parent New form in Forms Designer.

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

Show new related 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>
Setting temporary parent ID in a child new form

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

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:

Printing options

This will give you two additional buttons in the ribbon:

Print buttons in the ribbon

Printing

Suppose you have a form like this one:

SharePoint form with accordion

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:

Printed SharePoint form

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.

Wednesday, April 27, 2016

Providing different forms for different users in SharePoint Online

If you want to create different forms to different types of users in Forms Designer for SharePoint Online, you have two options: use permission settings or use SharePoint groups. We’ll look at both options in this article.

Suppose we have two types of users on our SharePoint website: managers and regular users. Managers have elevated privileges and we want to give them a particular set of functionality in a form. And regular users should receive a smaller or a different set of functionality and we want to give them a default form.

What we will do first is create an additional form set for managers using the plus button in the top right corner of Forms Designer.

Adding multiple form sets for a SharePoint list

Using permission settings

SharePoint has inbuilt permissions that we will utilize to distinguish managers from non-managers. Please check this list to see the available permissions:
https://msdn.microsoft.com/EN-US/library/ms412690.

We will pick CreateGroups to differentiate managers from non-managers, as only managers are allowed to create groups on our website.

We then will add an html control onto the default form in Forms Designer and paste the following html code inside it:

<Sharepoint:SPSecurityTrimmedControl runat="server" PermissionsString="CreateGroups" EmitDiv="true">
<script type="text/javascript">
    fd.openForm('fd_Item_52b1ac46-b55e-4d3c-9807-dec2a57b2e9f_EditForm.aspx');
</script>
</Sharepoint:SPSecurityTrimmedControl>
Using SPSecurityTrimmedControl in a SharePoint form

We have used CreateGroups permission string and the name of the form where we want our managers to be redirected to. The name of the form can be seen if you go to the appropriate form set in Forms Designer (in our case it’s Manager) and pick the appropriate form (in our case it’s Edit Form). That is the form that managers will be redirected onto:

SharePoint form filename

Now whenever a manager opens the default edit form he or she will be redirected to his manager-only form, while a non-manager will stay on the default form.

Using SharePoint groups

Another choice we have to set up user group specific forms is by utilizing SharePoint groups.

For this we’ll need to add a JavaScript script to document library. Create a file named redirect.htm and add the following code to it:

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(function () {
 fd.openForm('fd_Item_ee433778-833d-4154-a72f-f68dc876fdc5_EditForm.aspx');
}, 'plumsail.fd.core.js');
</script>

Again, you’ll need to replace the filename as before.

Upload redirect.htm to a document library on your website. Take note of its URL.

Now to go the list with your form sets. Click to edit one of the three forms, we’ll be editing the Edit Form.

Editing SharePoint form page

You’ll be redirected to the default edit form in edit mode, click “Add a Web Part” and add a Content Editor webpart:

Adding Content Editor Web Part to a SharePoint form

Click the Content Editor Webpart’s little arrow button and click Edit.

Enter the URL of redirect.htm into the box:

Setting Content Link property of the Content Editor Web Part

Expand Advanced and enter the SharePoint group members of which you want to be redirected to the additional edit form, in our case it’d be the site collection owners that will be redirected to the Manager edit form:

Settings Target Audiences property of the Content Editor Web Part

Click OK.

Now all members of the group will be redirected to the Manager edit form, while non-members will stay on the default form.

Tuesday, April 26, 2016

Using a Cross-site Lookup to a SharePoint list with an exceeded threshold limit

In SharePoint there is a default limit of 5000 items that you can add to a list until you are unable to filter that list. For more information on this see here.

What this means in practice is that you are unable to use a SharePoint Cross-site Lookup field that points to a list with an exceeded threshold. In this article we will describe a way of how you can go around the problem.

Note that in SharePoint On-Premises you can increase the threshold limit, for that you can check this article (it’s for SharePoint 2010, but 2013 is the same).

If you cannot or don’t want to change the limit, follow this procedure:

  1. Index the columns that your use to filter the list items by. Here you should include any fields you’re using in the filter=… part of the query (go to Manage Plumsail Lookups → Request items to see code that returns the two queries)
  2. Remove the orderby parameter from the first query (note the lack of the orderby parameter in the following example)
function (term, page) {
    if (!term || term.length == 0) {
        return "{WebUrl}/_api/web/lists('{ListId}')/items?$select=Id,{LookupField}&$top=10";
    }
    return "{WebUrl}/_api/web/lists('{ListId}')/items?$select=Id,{LookupField}&$orderby={LookupField}&$filter=startswith({LookupField}, '" + encodeURIComponent(term) + "')&$top=10";
}

Tuesday, April 5, 2016

Using ink sketch control in a SharePoint form to place markings on an image from Tablets, iPad, or PC

You can use the sketch control of SharePoint Forms Designer to put markings on an image (note, it won’t add markings to the actual image file but rather it will visually place your markings on top of it).

For example, you may wish to allow your users to draw the directions to somewhere on a map:

Draw on an image in a SharePoint form

Or an insurance company may wish to specify damaged parts of a vehicle on its photographs:

Draw on a picture in a SharePoint form

To set this up you need to be familiar with the ink sketch control, if you are not please read the article.

Once you have you ink sketch control set up, you will need to:

  1. Add a text field to the list, call it PictureURL, place it on the form. This field will contain a URL to the background picture for the ink sketch. Note, you can upload the picture to a document library on you SharePoint site and then just paste the link into this field.
  2. Add the following JavaScript to the form:
    var url = fd.field('PictureURL').value();
    $('.sketch').css('background-image', 'url("' + url + '")');
    
  3. Add CSS Class ‘sketch’ to the ink sketch control.
  4. Set the ink sketch’s height and width attributes to those of the image and save.

Ink Sketch control of SharePoint Forms Designer

Now the user will need to enter some URL that points to an image file into the PictureURL field, save, reload the form and he will get the ink sketch with the image as the background.

Friday, November 13, 2015

Dynamic filtering of the Related Items list on a SharePoint form

Quite frequently our customers ask us how they can dynamically filter their related items lists based on a value entered into a field on a form created in Forms Designer. In this post I will describe how you can do that with a lookup, a drop-down choice and a people picker field. Although I will use these three field types, just about any field type will do for the job.

The steps for implementing this functionality are pretty straight-forward:

  1. Set your related items controls render mode to Client (see screenshot below).
  2. Add a CSS class name to it (see screenshot below). In following samples I will use the “related-issues” class name, if you use something different then replace “related issues” in the code with your class name.
  3. Add the appropriate code to the JS-editor. See code samples below.
Related Items in the client rendering mode

Lookup field

Say we have an issue form with a lookup to a department list and a related items list of other issues. These related issues need to be dynamically filtered based on the value in the Department field. The form will look something like this:

Filtering the related items by a lookup field

When we change the department, the list is refreshed straight away:

Filtering the related items by a lookup field

So, how do we achieve this?

After you have followed through the steps described in the previous section paste the following code into the JavaScript editor of your form:

//first filter on page load
setHash();

//and attach an on-change handler that will call the filtering function wherever the value of the field changes
fd.field('Department').change(setHash);

//this is the actual function that filters the list
function setHash(){
 //get value
 var value =  fd.field('Department').control('getSelectedText');
 if (value == "(None)") {
  value = "";
 }

 value =  encodeURIComponent(escape(value)).replace(/\-/g, "%252D");

 //set the URL’s hash value. An explanation on this is at the end of the article.
 window.location.hash = "InplviewHash" + $(".related-issues [webpartid]").attr("webpartid") + '=FilterField=Department-FilterValue=' + value;
}

In this code you will need to replace “Department” with the Internal Name (or Internal Names) of the field you’d like to filter:

  • Where it says fd.field('Department'), Department is the Internal Name of the lookup field that we get our value from.
  • Where it says FilterField=Department Department is the Internal Name of the field in the target list that is being sorted.

In our case the two Internal Names are the same, but they don’t have to be.

And this is it, now our related issues are auto filtered based on the selected Department whenever user changes the value of the Department field.

Dropdown choice field

Here we will do exactly the same thing, but using the Issue Status field, which is a single-value drop-down choice field.

Filtering the related items by a drop-down field

This is the code:

setHash();

fd.field('Issue_x0020_Status').change(setHash);

function setHash(){
 var value =  encodeURIComponent(escape(fd.field('Issue_x0020_Status').value())).replace(/\-/g, "%252D");
 window.location.hash = "InplviewHash" + $(".related-issues [webpartid]").attr("webpartid") + '=FilterField=Issue_x0020_Status-FilterValue=' + value;
}

Here you will need to replace “Issue_x0020_Status” with the appropriate Internal Name(s), for details on this see the Lookup field section above.

Single-value Client-mode people picker field

In this case we want to filter our issues based on the Assigned To field:

Filtering the related items by a user field

This is our code:

setHash();

fd.field('Assigned_x0020_To').change(setHash);

function setHash(){
 var value = "";

 //if the people picker field really has a value, get it
   if (fd.field('Assigned_x0020_To').value() && fd.field('Assigned_x0020_To').value()[0] && fd.field('Assigned_x0020_To').value()[0].DisplayText){
  var value =  encodeURIComponent(escape(fd.field('Assigned_x0020_To').value()[0].DisplayText)).replace(/\-/g, "%252D");
 }

 window.location.hash = "InplviewHash" + $(".related-issues [webpartid]").attr("webpartid") + '=FilterField=Assigned_x0020_To-FilterValue=' + value;
}

As with the previous field types you’ll need to swap “Assigned_x0020_To” for the appropriate Internal Name value(s), see the Lookup section for more detail.

Other fields

You can utilize this feature with pretty much any type of field, but you need to know how to retrieve the value of the field. For a list of field types and corresponding ways to retrieve their values check this page: http://formsdesigner.blogspot.com/2013/04/getting-and-setting-sharepoint-form.html.

Explanation

To make this work we are utilizing the SharePoint URL hash feature that is used with SharePoint 2013 views in the client-side rendering mode.

Have a look at this sample URL:
https://mywebsite.com/Lists/Issue/fd_Item_EditForm.aspx?ID=20#InplviewHash3f6a312c-cd80-4e64-be27-075b976ced40=-FilterField1=Parent-FilterValue1=20-FilterField2=Issue_x0020_Status-FilterValue2=In Progress

What our code samples do is set the “InplViewHash” part of the URL together with its FilterField and FilterValue values, which is what tells the related items control to sort the list. Simple as that.

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.