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.

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.

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>

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:

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.

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

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

Enter the URL of redirect.htm into the box:

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:

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.

CodeProject

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:

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

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.

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.

CodeProject

Designing custom forms for smartphones, tablet devices, and regular PCs

Today we’d like to introduce you our new Forms Designer 3.0.1 feature for building custom forms for various types of devices, be it mobile phones, tablets or regular PCs. For all these types you can now create separate Display, New and Edit forms which enables you to customize the way different devices view your website. Let’s take a look at a use case.

Say we have a form that looks like this:

Navigating such form on a mobile device would be pretty cumbersome, as you can imagine. What we need to come up with is something that looks more like this:

How can we achieve this? The short answer would be to use features introduced in Forms Designer 3.0.1:

• fd.isMobileDevice() and fd.isTabletDevice() JavaScript functions
• IsMobileDevice and IsTabletDevice Group values (available only in On-Premises version of SharePoint).

Before we proceed, however, we need to turn off the SharePoint site feature called ‘Mobile Browser View’ as it’s not compatible with Forms Designer. To do this go to Site Settings → Manage site features (under Site Actions) → click ‘Deactivate’ against ‘Mobile Browser View’.

Let us look at a how we would utilize these features for our use case in both versions of SharePoint.

Designing for mobile devices in SharePoint Online

In Forms Designer for SharePoint Online we have form sets, meaning we can create any number of forms for each of the SharePoint form types (Display, New, Edit). Utilizing our fd.isMobileDevice() and fd.isTabletDevice() we can check if our user agent requires a mobile version of our form and redirect him to it.

Our initial form in Forms Designer:

Let us add a new form set for ‘New Form’ called ‘Mobile’. To do this, click the ‘+’ button in the top-right corner of the window and get the following dialog:

We’ll enter ‘Mobile’, click OK.

Here we can design a mobile device-friendly version of our form (don’t forget to click ‘Save’, navigating to another form will cause your changes to be lost):

What we’ve done here is created a miniature version of our logo, brought out required fields onto the main window to allow for a simpler fill-in process, replaced the tab control with an accordion and made the whole form is fit a regular sized smartphone (by placing everything inside a table and setting the table’s size – which is also a new feature of 3.0.1).

Before we go further, look at the bottom-left corner of the window where it says ‘File: xxxxxx.aspx’. Take a note of this filename, we’ll need it later when we write our JavaScript code.

Now that we have designed our mobile version of the form we need to implement the redirect logic. Let’s go back to our default ‘New Form’ and open up the JS editor. This is the code we will add:

if (fd.isMobileDevice() || fd.isTabletDevice())
{
    fd.openForm('fd_Item_e05e9ae8-7eaa-49da-9ad0-0b2fe258e719_NewForm.aspx');
}

What we’re doing here is:

1. Checking if the user is on a mobile device or tablet with fd.isMobileDevice() || fd.isTabletDevice().
2. If he is, we’re opening the appropriate form by specifying the filename we have copied above in fd.openForm(filename).

After we’ve pasted in our code with the appropriate filename and saved our form, we’re done. What will now happen is every time a user clicks ‘Add new item’ he will be redirected to a mobile version of the ‘New Form’ if he’s using a mobile phone or a tablet (and if he’s not using a mobile device, he will stay on the initial desktop-friendly form).

The very same procedure would be used if we were creating mobile versions of ‘Edit’ and ‘Display’ forms.

Let’s now have a look at how you could achieve the same thing in SharePoint On-Premises.

Designing for mobile devices in SharePoint On-Premises

The procedure for providing desktop and mobile device versions of a form is even simpler in SharePoint On-Premises: you don’t need to write custom JavaScript code to redirect the user, you can use IsMobileDevice and IsTabletDevice group tokens instead.

Let’s open up the ‘New Form’ form in Forms Designer. We will use exactly the same set-up shown in the previous section.

What we’ll do is add a new group by clicking the ‘+’ button in the top-right corner of the window.

We’ll call this group ‘Mobile’ and in ‘User-defined rule’ tab we’ll add the following code:

IsMobileDevice || IsTabletDevice

Click ‘Validate’ and ‘OK’.

A new form will be created as a copy of the desktop form. We’ll change it to make it look the way we want, as shown in the previous section.

Click ‘Save’, and we’re done. Now whenever user wants to add a new item he will be directed to the appropriate form, depending on the type of device he’s using.

CodeProject

Filter related items by almost any field of SharePoint form

In this article I'd like to introduce you to a new feature of SharePoint Forms Designer 2.9.1 allowing to filter the Related items control by almost any form field including lookup, single line of text, number, choice, date, user, and even calculated column. First, I want to demonstrate the most common case, filtering by a lookup column.

Filtering by Lookup column

I've created a list of projects and a related list of issues. The Issues list contains a lookup column to the Projects list. Now I will show how to create a form for the Projects list with the list of related issues in it. We need to put the Related items control onto the project form and configure its data source following way:

Project column of the source list is a lookup to the Projects list. Here is the result:

As you might noticed I've configured filtering by a display column of the lookup column. But if you say have multiple projects with the same title you will see issues of all such projects in the same form. To avoid this you should add ID of the parent list as an additional column in the lookup settings:

Now you can filter the related issues by ID of the parent item in the Data Source Editor:

Filtering by Date column

Ok, now let's configure filtering by a date column. I've created Daily Reports list to store forms with the list of solved issues filtered by a date specified in the report. As previously, we need to place the Related items control onto the form in Forms Designer and configure its data source following way:

DateCompleted is a field of the Issues list containing resolution date of an issue. Here is the result:

Filtering by User column

And finally, I'd like to demonstrate how to filter the Related items control by a people picker field. For this case I've created User Reports list containing a people picker field. Next, we need to design a form with the Related items control linked to the Issues list and filtered by the people picker column:

Almost done. But in contrast to the previous cases we have to do additional stuff here because SharePoint returns people picker value as a link. So we need to extract plain username from the link and pass it outside the form to filter the related items properly. Put HTML-control onto your form, switch CDATA property to False and insert the following code into Content property:

<xsl:variable name="UserName" select="substring-after(substring-before(substring-after(@User,'userdisp.aspx?ID='),'&lt;'),'&gt;')"/>
<xsl:comment>
<xsl:value-of select="ddwrt:GenFireConnection(concat('*', '@User=', ddwrt:ConnEncode(string($UserName))), '')" />
</xsl:comment>

Please, pay attention that to make this sample working you have to replace the highlighted attributes with the internal name of your people picker field (Form field). Here is the report:

Summary

In this article I demonstrated how to filter related items by almost any field of the parent form. Please, note that if you need to filter related items by multiple columns, you can concatenate them into a single calculated field and configure filtering by this column. Feel free to ask your questions in the comments.

CodeProject

Capture signature or hand-written notes in SharePoint form using tablets or mouse.

CodeProject

In this article I will describe the implementation of two business cases which require capturing hand-written marks and a signature in a form. I will use SharePoint Forms Designer 2.8.12 where Ink Sketch control appeared. With the help of this control you can save a hand-written note created with a tablet, a cell phone, or a mouse to a SharePoint 'Multiple lines of text' field with picked 'Plain text' option:

It supports all editions of SharePoint 2010/2013 and SharePoint Online in Office 365.

Review of end-of-course questionnaire

The first scenario relates to a training process that ends with questionnaires which have to be filled in by trainees and verified by a trainer. We will simplify the verification process by providing a trainer with the touch interface allowing them to leave marks and notes by using iPad, a cell phone or another touch screen device. The result form for trainers will have the following view:

First, we should create a form for questionnaire and design different views for students and trainers. I will split them into separate SharePoint groups and create different forms for these groups in Forms Designer. Forms Designer for Office 365 doesn't support groups functionality, so you should modify the result form with the help of JavaScript based on the current user. The first group, students, will be able to edit all fields except the score. The second group, trainers, will be able to score a student and leave marks and notes near each answer. We have to create a number of text fields to save trainer's notes in accordance with the number of Ink Sketch controls on a form. In our case we will use a separate Ink Sketch control for each student's answer, so we need to create the same number of text fields as the number of questions in the questionnaire.

Notice: fields for storing sketches must have 'Multiple lines of text' type with picked 'Plain text' option. You must select the field where you're going to store the sketch in the Ink Sketch properties in Forms Designer.

Here is the first form designed for trainees:

Here is the form designed for trainers:

As you can see I turned all fields into read-only mode and put Ink Sketch controls near each field to allow trainers to make a separate note for each answer. Also the form for trainers contains the score field in edit mode.

Invoice with signature

The second scenario covers creating an invoice form with signature. As previously, we should create a text field to store the signature. Here you can see my invoice form:

I used the Related items control to display product items and the Ink Sketch control to capture the signature. Quite easy isn't it? You can use Forms Designer in conjunction with Workflow Actions Pack to create an invoice in PDF format with the signature and send it to your customer or accounting department by e-mail.

SharePoint 2010 and HTML 5

By default, Internet Explorer opens SharePoint 2010 pages in IE 8 document mode but IE 8 doesn't support HTML 5. So the Ink Sketch control uses flash component to provide the capability of drawing on a form. This component is quite slow and requires Adobe Flash Player. But you can switch the Ink Sketch control to HTML 5 mode by modifying your master page. Open it in SharePoint Designer and replace the following line of code:

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

With this one:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

Save the master page and check in. Now all pages will work in the highest mode of Internet Explorer available.

Conclusion

The visual data is saved into SharePoint text fields as base64 string, so you can use it in Render Text Template workflow action of Plumsail Actions Pack to prepare an HTML-page and generate a PDF-file based on it with a signature and other notes created by a user directly on a form. To inject a note into HTML-template you should use the following syntax:

<img src="${{Signature}}" />

In the code above 'Signature' is the internal name of a 'Multiple lines of text' field containing the signature.

Forms in multilingual sites of SharePoint 2010/2013

CodeProject

Today, I would like to demonstrate how to create absolutely unique forms for different languages in multilingual sites of SharePoint 2010/2013 with help of SharePoint Forms Designer 2.8.4 and higher.

As an example, I installed German language pack on SharePoint 2010 English and enabled it as alternate language for a site in its settings. Please, note, that absolutely the same steps are working for SharePoint 2013 on-premise as well:

Now I create the list of issues and open Forms Designer to create English form first. As you can see titles of fields are displayed in English, because it is currently selected for me. Ok, here is my form:

In the settings menu I change current language to German and open Forms Designer again:

If you use SharePoint 2013 you will not find language menu in SharePoint UI, you have to change it in the browser settings: http://olafd.wordpress.com/2012/11/02/switch-language-in-sharepoint-2013/. In Internet Explorer open Internet Options and click Languages button. Here you can set the default language for your browser.

In the designed forms all texts and titles are left in English. I create a new group, let's name it 'German' and select User-defined rule tab. Since Forms Designer 2.8.4 version you can use CurrentLanguage token in rules. It contains the currently selected language code. You can find codes for different languages in the following page: http://msdn.microsoft.com/en-us/goglobal/bb964664.aspx. German code is 1031. Here is my rule:

CurrentLanguage = 1031

Ok, now I remove all fields and texts from my form for this group and as you can see, titles of all fields changed to German. Because of creating the separate group, I can design absolutely unique forms for German with additional notes and other set of fields. Here is an example of such form:

Ok, let's test it. When I set English language in my browser or in SharePoint 2010 menu, I see the following form:

Since I change language to German, the same form has the following view:

Such approach with absolutely different forms for multiple languages is much better than SharePoint provides you out of the box. Without Forms Designer you can just change titles for your columns for different languages but the form itself will be the same. But as you know, length of the same texts in different languages can be much differ. So, if your form has a nice look for one language does not mean that it will not break for others. Moreover, often you have to display different sets of fields for different languages and Forms Designer is very suitable for this case.

Office 365

Since Forms Designer doesn't support groups functionality for Office 365, the only way to modify forms based on the current language is JavaScript. SharePoint has global variable _spPageContextInfo.currentLanguage which contains the current language code. So, you can replace titles, texts and visibility of any fields via Forms Designer JavaScript Framework based on the current language. Example:

if (_spPageContextInfo.currentLanguage == 1031) {
  // Replace titles of fields to German
  fd.field('Title').titleText('Titel');
  fd.field('AssignedTo').titleText('Zugewiesen an');
  …
  // Change title of the first tab:
  $('#fd_tabcontrol-0 > .ui-tabs-nav > li:eq(0) > a').html('Allgemein');

  // Change title of the second tab:
  $('#fd_tabcontrol-0 > .ui-tabs-nav > li:eq(1) > a').html('Anlagen');
}

Please, leave your questions in comments. Thank you.

SharePoint print forms

CodeProject

In this article I will demonstrate how to create a print form with SharePoint Forms Designer. I will use version 2.7.3 in which link and button controls became available as well as additional JavaScript functions for switching between forms.

My display form is designed with accordion and has the following view:

But I would like to have another form for printing where all fields are visible and located one by one. To achieve this purpose I will create a completely different display form just for printing and put the link to navigate it from the default display form.

First, I opened Forms Designer and added a new group of forms:

I called it Print and defined the rule as 'false'. It means that the form will not be shown by default. Validate → Ok.

Next, I switched to the display form and designed it without accordion. I just put fields one by one and divided them with headers. I put link 'PRINT' at the top of this form and set its OnClick option in:

window.print(); return false;

You can define any JavaScript in OnClick option of button and hyperlink controls. This script is executed when the user clicks the link or button. In our case the current page will be printed when the user clicks 'PRINT' link. Now we have to place link in our default display form with accordion that will open our display form for printing.

I copied the filename of my print form into clipboard. You can find it in the left bottom corner of Forms Designer window:

Next, I switched to 'AllUsers' display form and put 'PRINT FORM' link at the top of it. In OnClick option I put the following script:

return fd.openFormInDialog('fd_Contact_ad98a766-7fd1-499d-a492-36a0826d285e_Display.aspx');

Function openFormInDialog() of Forms Designer's JS-Framework opens the specified form in a dialog. It was added in the version 2.7.3. There were added several other useful functions: openForm() that opens the specified form in the current window and backToPrevForm() that redirects to the previously opened form. For example, if you wish to open a print form in the current window, not a dialog, you can use openForm() function in the default form and put 'Back' link that calls backToPrevForm() function to the print form to allow users to return back to the default display form.

Ok, now when user clicks 'PRINT LINK' they will see a dialog with the print form. They can click 'PRINT' link to print it:

Office 365

The example above works perfectly for SharePoint 2010/2013 on-premises. But currently Forms Designer for SharePoint Online in Office 365 does not support groups functionality. Here I will show you a workaround.

First, we have to design the display form for printing as described above. When it is ready, save it and open the current list in SharePoint Designer. Here you can find forms designed with Forms Designer, they contains 'fd_' prefix:

Rename your display form to PrintForms.aspx. Now, open Forms Designer and create the default display form. Put 'PRINT LINK' into it and pass 'PrintForm.aspx' into fd.openFormInDialog() function. Now you have two completely different forms for viewing and printing in Office 365.

Cross-site Lookup column for SharePoint 2013 and SharePoint Online in Office 365

CodeProject

In this article I would like to present our new solution Cross-site Lookup for SharePoint 2013 and SharePoint Online in Office 365. With help of this feature you can create lookup columns with quick search and asynchronous loading of results for lists and libraries to link data from any sites within a site collection.

First, I would like to cover the technical aspects of this solution. Our lookup is not a custom field because custom fields can be deployed only as part of farm solutions which are not available for Office 365. So, we made it as a number of JavaScript templates (view, edit, new and display) for standard Lookup field. We used JSLink property of SPField class to inject these templates and Select2 control with some modifications as control for searching and navigating through the source list.

Now I will demonstrate our solution in action. In the root web of the root site collection I created a list of countries. Next I created a new site collection in the same web application and added a custom list to its root site and named it Target. Ok, let's create a new lookup column in Target list which links to Countries list in the root site collection.

Open the view of Target list and click 'Plumsail Lookup ' button in 'List' tab of the ribbon.

If you don't have the existing lookup column in your list you will see a dialog for creating a new lookup field. Enter the name of this field in text box and click Ok.

After the field has been successfully added you can configure it. First, let's change the source list. Click 'Change ' link near the web url to specify the web of your source link. I clear this field because my source list is located in the root site of the root site collection. Ok.

Now select the source list in the next dropdown and the field of the source list which will be shown in the target list. In my case the source list is Countries and the field is Title. Ok.

By checking appropriate options you can enable multiple values for your lookup and add 'New Item' link which allows users to add new items to the source list directly from the form.

If you check Add 'New Item' link you will see the following options:

In the first field you can specify the title of the new item link. The second one is for default content type ID. When the user clicks the new item link they will see a form for the specified content type. If you leave this field empty, users will see a form for the default content type of the source list.

Here is what this link looks like in the form:

I will cover Advanced section fields in the next article. Now, let's see what our lookup field looks like in forms and list views.

Lookup column with a single value:

Lookup column with multiple values:

List view:

Display form:

Looks perfect. In the next articles I will demonstrate how to change the template of the result set in the select box of Cross-site Lookup Column, how to use Lookup and Forms Designer together and create dependent columns and cascading dropdowns.