In the first post I would like to show a simple case of customization SharePoint 2010 forms with Forms Designer tool. I will create form with tabs and tables and add basic dynamic with JavaScript.

Last week I worked on Help Desk system. I started with template 'Help Desk' from CodePlex project and implement some modifications. Next I needed to design forms for requests to make it simpler and more usable. The default form has the following view:

So, I decided to distribute fields into tabs with Forms Designer tool, add autofilling to Customer field with current user and hide resolution fields if status of the request is not 'Resolved' or 'Closed'. For the last two tasks I used Forms Designer JavaScript framework that allows to manipulate fields in JQuery manner.

After 5 minutes of manipulation with Forms Designer's drag-n-drop interface I got the following form:

1. Resolution tab is useful only if status of the request is 'Resolved' or 'Closed'. So, I will hide it for other cases.
2. In most cases customer and author are the same person. So, I will prefill this field with current user info.

Resolution tab

// Enable or disable 'Resolution' tab 
function setResolutionTab() { 
    var v = fd.field('Status').control().value(); 
    if (v == 'Closed' || v == 'Resolved') { 
        $('#fd_tabcontrol-0').tabs('option', 'disabled', null); // Enable 
    } else { 
        $('#fd_tabcontrol-0').tabs('option', 'disabled', [1]); // Disable 
    } 
} 

// Subscribe on status change 
fd.field('Status').control().change(function () { 
    setResolutionTab(); 
}); 

// Initialize 
setResolutionTab(); 

.ui-tabs .ui-state-disabled {  
    display: none; /* disabled tabs don't show up */  
}

Autofilling

// Load current user login 
SP.SOD.executeOrDelayUntilScriptLoaded((function () { 
    var ctx = new SP.ClientContext.get_current(); 
    var web = ctx.get_web(); 
    ctx.load(web); 
    var user = web.get_currentUser(); 
    user.retrieve(); 
    ctx.executeQueryAsync( 
    function () { 
      // Set user login 
      fd.field('Customer').control().value(user.get_loginName()); 
      // Run validation by emulating validation image click
      fd.field('Customer').control()._el().find('a:eq(0)').click(); 
    }); 
}), "SP.js"); 

Method _el() of the FDControl class returns control's div-wrapper as JQuery-object. So, if you work with custom fields and the Forms Designer doesn't know where the field stores its value, you may use this method. And here it was also helpful to click on the validation link in the people picker field.

I can answer your questions in the comments. Thank you.

In my previous entry I demonstrated how to customize SharePoint forms with Forms Designer tool. Now I would like to show how to customize the views of forms by CSS-styles in the Forms Designer.

I changed my SharePoint web site theme into one of the standard named 'Grapello'. Now my HelpDesk has the following view:

Now I want to change the view of my forms customized with Forms Designer. Since these forms use JQuery UI library I went to http://jqueryui.com/themeroller/ to find an appropriate theme. 'Eggplant' fits a lot to my SharePoint theme. You can also define your own theme with easy-to-use ThemeRoller interface:

In the Download Builder dialog box I selected all items in 'UI Core' group and 'Button' and 'Tabs' items in 'Widgets' group. All other items were unchecked. After downloading was completed I copied all content from file css/[theme]/jquery-ui-[version].custom.min.css in the downloaded archive and pasted it into Forms Designer CSS-editor:

Now request form acquired the following view:

I found two problems:

1. The 'Select' elements in the field Date and Time became very small.
2. The borders of controls were not changed.

To fix the first issue I removed selector .ui-widget select from CSS. For the second, I added the following CSS-code:

.fd_control input[type="text"],  
.fd_control textarea,  
.fd_control select, 
#fd_form .ms-dtinput input[type="text"],  
#fd_form .ms-dttimeinput input[type="text"], 
#fd_form .ms-inputuserfield, 
#fd_form .ms-rtefield,  
#fd_form .ms-rtefield2,  
#fd_form .ms-longfileinput,  
#fd_form .ms-fileinput 
{ 
    border: 1px solid #903CD6; 
}

The result is here:

Summing up, I want to say that it is very easy to define your own style for Forms Designer view with JQuery UI Theme Roller utility. Alternatively you can choose one of the existing themes. But it is important to check your form after applying a new theme because there may occur some visual problems that will have to be fixed with quick modifications of CSS.

Forms Designer provides JavaScript-framework that allows to manipulate fields in a simple JQuery manner. You can find how to set or get current field values in the official website.

But what if the field is more complex than a simple input, what if it has multiple parts of values, like lookup or date and time? How do you get lookup id and lookup text? Below I placed the table that illustrates how you get or set different value types for the most SharePoint types of fields. To create this table I used the current last version of Forms Designer: 2.6.4840.

fd.field('Title').control().value();

fd.field('Title').control().value('Default title');

fd.field('Title').control().change(function(){});

fd.field('MultipleLinePlain').control().value();

fd.field('MultipleLinePlain').control()
  .value('MultipleLinePlain');

fd.field('MultilinePlain').control().change(
  function(){alert('Field has been changed!')}
);

// on load:
fd.field('MultilineRichText').control()._el()
  .find('textarea').val();
// after load:
fd.field('MultilineRichText').control()._el()
  .find('.ms-rtelong').contents().find('body').html();

// on load:
fd.field('MultilineRichText').control()._el()
  .find('textarea').val('new value');
// after load:
fd.field('MultilineRichText').control()._el()
  .find('.ms-rtelong').contents()
  .find('body').html('new value');

// on load:
fd.field('MultilineEnhanced').control()._el()
  .find('input').val();
// after load:
fd.field('MultilineEnhanced').control()._el()
  .find('div.ms-rtestate-write').html();

// on load:
fd.field('MultilineEnhanced').control()._el()
  .find('input').val('new value');
// after load:
fd.field('MultilineEnhanced').control()._el()
  .find('div.ms-rtestate-write').html('new value');

fd.field('ChoiceSingle').control().value();

fd.field('ChoiceSingle').control().value('B');

fd.field('Choice').control().change(function(){
  alert('Field changed!');
});

var checkboxIndex = 2;
fd.field('MultiChoice').control()._el()
  .find('input[type="checkbox"]').eq(checkboxIndex)
  .is(':checked');

var checkboxIndex = 2;
fd.field('MultiChoice').control()._el()
  .find('input[type="checkbox"]').eq(checkboxIndex)
  .prop('checked', true);

fd.field('MultiChoice').control().change(function(){
  alert('Field changed!');
});

fd.field('Number').control().value();

fd.field('Number').control().value('13');

fd.field('Number').control().change(function(){
  alert('Field changed!');
});

fd.field('Currency').control().value();

fd.field('Currency').control().value('23');

fd.field('Currency').control().change(function(){
  alert('Field changed!');
});

fd.field('Date').control().value();

fd.field('Date').control().value('4/21/2012');

fd.field('Date').control().change(function(){
  alert('Field changed!');
});

fd.field('DateTime').control().value()[0]; // date
fd.field('DateTime').control().value()[1]; // hours
fd.field('DateTime').control().value()[2]; // minutes

fd.field('DateTime').control()
  .value(['4/21/2012', '11 PM', '35']);

fd.field('DateTime').control().change(function(){
  alert('Field changed!');
});

fd.field('Hyperlink').control().value()[0]; // link
fd.field('Hyperlink').control().value()[1]; // descr

fd.field('Hyperlink').control()
  .value(['http://someurl', 'description']);

fd.field('Hyperlink').control().change(function() {
  alert('Changed!');
});

fd.field('Lookup').control()._el()
  .find('option:selected').text();

fd.field('Lookup').control().value();

fd.field('Lookup').control()._el()
  .find('select option').filter(function() 
{
  return $(this).text() == 'Text';
}).attr('selected', true);

var ID = 4;
fd.field('Lookup').control().value(ID);

fd.field('LookupSingle').control()
  .change(function(){});

var selectedItems = fd.field('LookupMultiple')
  .control()._el().find("select:eq(1) option");
var s = '';
for (var i = 0; i < selectedItems.length; i++) {
  s += selectedItems.eq(i).text() + ';';
}
alert(s);

fd.field('MultiLookup').control()._el()
  .find("select:eq(1) option").eq(0).text()

fd.field('MultiLookup').control()._el()
  .find("select:eq(1) option").eq(1).text()

// first selected:
fd.field('MultiLookup').control()._el()
  .find('select:eq(1) option').eq(0).val(); 

// second selected:
fd.field('MultiLookup').control()._el()
  .find('select:eq(1) option').eq(1).val(); 

var ID = 3;
// select element by ID:
fd.field('MultiLookup').control()._el()
  .find('select:eq(0)').val(ID); 

// add button click:
fd.field('MultiLookup').control()._el()
  .find('button:eq(0)').click(); 

fd.field('MultiLookup').control().change(function(){
  alert('Field changed!');
});

fd.field('Boolean').control().value();

fd.field('Boolean').control().value('1');

fd.field('Boolean').control().change(function(){
  alert('Field changed!');
});

var logins = '';
$.each(fd.field('People').control().value()
  .dictionaryEntries,
  function() {
    logins += this.AccountName + '; ';
  });

fd.field('People').control().value('DOMAIN\\login');

fd.field('People').control().change(function(){
  alert('Field changed!');
});

fd.field('PersonGroupSingle').control()
  .value().dictionaryEntries[0].AccountName

fd.field('Person').control().value('DOMAIN\\login');

fd.field('Person').control().change(function(){
  alert('Field changed!');
});

In this article I will demonstrate how to handle a form submission event with Forms Designer tool and particularly how to redirect the user to the specific page.

Many of our clients request an option to redirect the user to the 'Thank you' page after creating a new item. Just paste the following script into the Forms Designer JavaScript editor and your users will be redirected to '/SitePages/ThankYou.aspx' page on the submission and to '/SitePages/Cancel.aspx' on the cancellation:

fd.cancel().click(function(){ STSNavigate('/SitePages/Cancel.aspx');return false; });
fd.onsubmit(function (){
    $("#aspnetForm").attr('action',location.pathname+'?Source=/SitePages/ThankYou.aspx');
    return true;
});

Ok, another popular request is to allow users to add multiple items without closing a new form. We suggest to confirm with the user whether they want to add a new item after the submission of the current one. If they want so, the new form will be refreshed. Otherwise the user will be redirected to the 'Thank you' page. I have extended the previous script with the described functionality:

fd.cancel().click(function(){ STSNavigate('/SitePages/Cancel.aspx');return false; });
fd.onsubmit(function (){
  if (confirm('Would you like to add a next item?')) {
    $("#aspnetForm").attr('action',location.pathname+'?Source=' + location.pathname);
  } else {
    $("#aspnetForm").attr('action',location.pathname+'?Source=/SitePages/ThankYou.aspx');
  }
  return true;
});

As you can see it is very easy to extend functionality of your form with Forms Designer JavaScript framework. You can find the full description of fd-object on the official website.

One of the usual cases of our customers is to create a form with related items, e. g. an order form with the list of items of the order. I will demonstrate how to place related items in the separate tab of the parent form and add or edit them directly in the current tab. I divided this manual into 3 parts:

1. Display form
2. Edit form
3. New form

In this entry I will show how to create a display form with tabs and place related items into the separate tab. I created the list of orders and the list of order items with the following columns: Product Name (renamed Title), Weight, Width, Height, Depth, Quantity and Total price. I added lookup field OrderNum into the list of order items to link items with the order.

First, I designed forms of an order with Forms Designer, added tabs 'Customer', 'Billing Info', 'Shipping Info' and 'Items'. I will put related items in the 'Items' tab, which is now empty. Here is my form:

Next, I changed the order items list setting to open forms in a dialog window. So users will be able to edit order items directly from the order form without leaving it. The described option is located here: List Settings -> Advanced settings -> Launch forms in a dialog

Now, go to the orders list and select List tab in the ribbon. Choose Form Web Parts drop down and select (Item) Display Form:

Click 'Add a Web Part' and select Order Items list. In the web part menu select 'Edit Web Part' item.

We will not allow users to edit the list of items in the display form of an order. So, first of all we have to disable links 'new item' and 'edit' on the top of the list. Change Toolbar Type to 'No Toolbar' in the settings window.

Next, click 'Edit the current view' link:

Here remove 'Product Name (linked to item with edit menu)' column from the view and replace it with Product Name (linked to item). Now users will not see an order item's context menu.

In the 'Totals' section I added the sum of Total Price to display it for the selected order. Ok, save the view. Next, we have to move the list of order items into the 'Items' tab and filter them by the current order.

Open Forms Designer editor for Orders list and select Display Form. Open JavaScript editor. The following JavaScript takes the first web part and replaces it into the fourth tab:

var wp0 = $('div[id^="MSOZoneCell_WebPartWPQ"]:eq(0)');
wp0.detach().appendTo('#fd_tabcontrol-0-tab-4');

When user clicks anywhere on the table of items, new tabs appear in the ribbon: Items and List. We have to disable this functionality to forbid users to edit the list of order items from a display form of an order. Paste the following row into JavaScript editor to disable mouse and keyboard events:

wp0.attr("onmouseup", "").attr("onkeyup", "");

Ok, save the display form, close Forms Designer and open any order in the display mode. Now you can see that the order items list appears in the 'Items' tab. The last thing we have to do is to filter this list by the current order. Open our display form in SharePoint Designer. Files generated with Forms Designer start with fd_{Content Type Name}_{Form Type}. So, my display form is called fd_Item_Display.aspx.

Find XsltListViewWebPart that renders Order Items list. Add a new binding parameter into ParameterBindings section:

<ParameterBinding Name="OrderId" Location="QueryString(ID)" DefaultValue="0"/>

Here we bound OrderId to get-parameter ID that contains the current order id value. You can find more info about parameter bindings here:
http://blogs.msdn.com/b/joshuag/archive/2009/04/06/dataformwebpart-parameters-and-parameterbindings.aspx

Now we can use 'OrderId' parameter in CAML-query:

<Where>
<Eq>
<FieldRef Name="OrderNum" LookupId="TRUE"/>
<Value Type="Lookup">{OrderId}</Value>
</Eq>
</Where>

'OrderNum' is an internal name of my lookup field. Place the code above into Query section and save the page.

Now on the display form of an order we can see order items related to the current order only. Here is my final display form:

When users click on product name they see display form of an item in a dialog window:

I have started a series of posts about creating forms with related items. In the previous post I described how to do that in a display form. Now I will demonstrate how to place related items into an edit form and edit them directly in it.

Like in the case of a display form, we have to place additional web part with the list of related items into an edit form . Navigate to the parent list, select List tab in the ribbon and select (Item) Edit Form in the drop down menu of the Form Web Part:

Click 'Add a Web Part' link at the top of a page and select related items list in the web parts dialog. You can see the following text at the top of the inserted list:

We have to disable in-place editing because if the user adds a new item in this mode they have manually fill order number. Here is the illustration:

So, we will remove in-place editing from this list and I will show how to fill order number automatically in the new form of a related item. Generally, I recommend you to minimize the number of ways of editing related items, because you can get stuck with many issues related to the ribbon, automatic redirection from the parent form and etc.

Now, let's remove in-place editing link. Save the form, go to the list of related items, open its settings page. Click Advanced Settings and disable Quick edit:

Return to the parent list and open its editing form in edit mode as we did above. As you can see there is only one link at the top of the related items: 'new item'. Great, now open properties of this web part and click 'Edit the current view' link. Like in the case of the display form, lets remove 'Product Name (linked to item with edit menu)' column from the view and replace it with 'Product Name (linked to item)'. Next, uncheck 'Allow individual item checkboxes' in the Tabular View section.

This way we disable the context menu and ribbon and leave an only way for editing items: user has to open them in a dialog window and remove or edit them from its ribbon.

Also remove 'OrderNum' column from the view, because there will be items related to the current order only. Like in the case of display form I have added total price into my view.

Save view and the edit form and go to Forms Designer. Select Edit Form, open JavaScript editor and past the same script like in the case of Display form:

var wp0 = $('div[id^="MSOZoneCell_WebPartWPQ"]:eq(0)');
wp0.detach().appendTo('#fd_tabcontrol-0-tab-4');
wp0.attr("onmouseup", "").attr("onkeyup", "");

I will not comment on it, you can find the description in the first post. Apart from this, we have to add the current order number into the 'new item' link of the list of related items to prefill it automatically in the new form of an item. Add the following JavaScript into editor:

var newItem = wp0.find('.ms-list-addnew a');
// getting query string hash
var queryString = SP.ScriptHelpers.getDocumentQueryPairs();
// adding get-parameter 'order' into new item link
newItem.attr('onclick', 'NewItem2(event, "' + newItem.attr('href') + '&order=' + queryString['ID'] + '"); return false;')

Save the form and close Forms Designer. Now open SharePoint Designer and add filtration to the related items by the current order as described for the Display form.

Finally, we have to modify a new item form to automatically fill 'OrderNum' column based on the provided get-parameter. Open the new form in the Form Designer, distribute fields in the form and open JavaScript editor. Paste the following code there:

// getting query string hash
var queryString = SP.ScriptHelpers.getDocumentQueryPairs();
// fill order number
fd.field('OrderNum').control().value(queryString['order']);

Now, when I click a 'new item' link from the Edit form of the order, the 'OrderNum' field is prefilled automatically with the current order number:

SharePoint 2010

I suppose, many of you know about a great calendar feature in SharePoint 2010 called resource reservation. It enables organization of meetings in useful interface that allows to select multiple resources such as meeting rooms, projector and other facilities and required participants, and next the time frame that is free for all participants and facilities in the calendar view. You can switch between week and day views. Here is a screenshot of the calendar with resource reservation and member scheduling features:

You can change resources and participants in the form of your meeting, find free time frames in the diagram and check double booking:

There are two ways to add the resource reservation feature into SharePoint 2010 calendar:

1. Enable web feature 'Group Work Lists', add calendar and go to its settings. Click 'Title, description and navigation' link in 'General settings' section. Here check 'Use this calendar to share member's schedule?' and 'Use this calendar for Resource Reservation?'
2. Create a site based on 'Group Work Site' template.

Here is the detailed instructions: http://office.microsoft.com/en-us/sharepoint-server-help/enable-reservation-of-resources-in-a-calendar-HA101810595.aspx

SharePoint 2013 on-premise

After migration to SharePoint 2013 I discovered that these features were excluded from the new platform and saved only as backward compatibility. So, you can migrate your application with installed booking calendar from SharePoint 2010 to SharePoint 2013 and you will keep functionality of resource reservation but you cannot activate it on a new SharePoint 2013 application through default interface.

Microsoft officially explained these restrictions by unpopularity of the resource reservation feature: http://technet.microsoft.com/en-us/library/ff607742(v=office.15).aspx#section1

First, I found a solution for SharePoint 2013 on-premise. It is possible to display the missing site templates including 'Group Work Site'. Then you just need to create a site based on this template and you will get the calendar of resources.

Go to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\1033\XML, open WEBTEMP.XML file, find an element with 'Group Work Site' title attribute and change its Hidden attribute from FALSE to TRUE.

SharePoint 2013 Online in Office 365

Perfect, now we can use free SharePoint booking system based on the standard calendar. But what about SharePoint Online in Office 365? We do not have an access to WEBTEMP.XML in its file system.

After some research I developed a sandbox solution that enables hidden 'Group Work Lists' feature and adds calendar with resource reservation and member scheduling features. Please, download it and follow the instructions to install:

1. Go to the site collection settings.
2. Open 'Solutions' area from 'Web Designer Galleries' section.
3. Upload CalendarWithResources.wsp package and activate it.
4. Now, navigate into the site where you wish to add the calendar with the enabled resource reservation feature.
5. Open site settings -> site features.
6. Activate 'Calendar With Resources' feature.

Great, now you have Group Calendar with an ability to book resources and schedule meetings. This solution works for SharePoint 2013 on-premise as well, so you can use it instead of WEBTEMP.XML file modification.

The form of the meeting:

How it works

I have attached source project to this entry. CalendarWithResources feature is dependent on feature with GUID: 9c03e124-eef7-4dc6-b5eb-86ccd207cb87. This is 'Group Work Lists' web feature that exists for backward compatibility but is hidden from the list of features. So, it is the only way to enable it.

Also solution contains a calendar list with a custom schema. I added EnableResourceSelector="TRUE" and EnablePeopleSelector="TRUE" attributes into the definition. These properties turn on the resource reservation and member scheduling settings of the calendar.

Links:

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 and site collections within a web application.

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 Single line of text 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.

In the previous entry I demonstrated how to create Cross-site Lookup Columns. Now I will show how to use Advanced section fields of Cross-site Lookup column management dialog and how to modify the template of the result set in particular. With our Cross-site Lookup you can add extra fields to the result set to simplify search and navigation through the large lists. Here is illustration from the official website:

I will use the same environment that I created in the previous entry: Countries list in the root site of the root site collection and Target list in the nested site collection.

Here I will show how to place the flag near the country name in the lookup result set. First, I added Hyperlink or Picture column and called it Flag. Next, I set flags for all the countries in my list:

Now, go to Target list and open Cross-site lookup management window. Select Country field and expand Advanced settings at the bottom of the dialog.

Here you can find two templates. The first one 'Request items' is used to request items from the source list through SharePoint 2013 rest service. Here we can define sorting, additional filtering and searching criteria for result sets. We have to insert our Flag column into select statement to retrieve it from the server and build it into the item template which is used in the result set.

Here is my 'Request Items' template:

function (term, page) {
  if (!term || term.length == 0) {
    return "{WebUrl}/_api/web/lists('{ListId}')/items?$select=Id,{LookupField},Flag&$orderby=Created desc&$top=10";
  }
  return "{WebUrl}/_api/web/lists('{ListId}')/items?$select=Id,{LookupField},Flag&$orderby={LookupField}&$filter=startswith({LookupField}, '" + term + "')&$top=10";
}

The second template 'Item format' defines the view of an item in the result set. Here we will use our Flag field that will be returned from the server by the request defined in the first template. Here is my 'Item format' template:

function(item) {
  return '
' + item["{LookupField}"] + '
';
}

Now let's see what our Country field looks like in the forms:

Excellent! In the following article I will show how to use Cross-site Lookup with Forms Designer and create dependent columns including cascading dropdowns.

In the previous entries I showed how to configure Cross-site Lookup column and how to modify the template of the lookup result set. Now I'm going to demonstrate how to use Cross-site Lookup with Forms Designer and build dependent columns and cascading dropdown in particular with this complex solution. Please, note, Cross-site Lookup is supported by Forms Designer starting from version 2.6.4930.

Let's imagine that our company has offices in multiple countries and we have to create a ticket system. In the ticket form users have to specify their office. In order to simplify this task we can also add a country field to the ticket form. So, when the user chooses a country in the form the dropdown of offices is automatically filtered by the selected country. This behavior is called cascading dropdowns.

Ok, I will use lists from my previous articles: Countries and Target. I added a new list called Offices to the same site where Countries list is located. Then I created a simple lookup field in Offices and set Countries as its source list. So, now we can specify the country for each office. Here is a new Office form:

Let's imagine that our Target list is the list of tickets from my previous example. We have already created Cross-site Lookup column for country in Target list. Now we have to create Office lookup field that is linked to Offices list. The both lookups do not allow multiple values. Now we have to use Forms Designer to place both of these fields into the form. Forms Designer is required in this scenario because we will use its JavaScript framework.

Here is a new Target form:

Now let's open Cross-site Lookup management window and select Office field there. Expand Additional settings. Here we have to modify 'Request items' template to load only those offices which belong to the selected country. Here is my template:

function (term, page) {
  // Getting the selected country
  var countryId = 0;
  var country = fd.field('Country').control().value();
  if (country) {
    countryId = country.id;
  }

  // Filtering by the selected country
  if (!term || term.length == 0) {
    return "{WebUrl}/_api/web/lists('{ListId}')/items?$select=Id,{LookupField},Country/Id&$orderby=Created desc&$expand=Country/Id&$filter=Country/Id eq " + countryId + "&$top=10";
  }
  return "{WebUrl}/_api/web/lists('{ListId}')/items?$select=Id,{LookupField},Country/Id&$orderby={LookupField}&$expand=Country/Id&$filter=startswith({LookupField}, '" + term + "') and Country/Id eq " + countryId + "&$top=10";
}

First I get the selected country field with Forms Designer's JavaScript framework. Then I use it in requests as additional filter. Pay attention to the requests. Firstly, to use a field in the filter you have to add it into the select part of the query. Secondly, if you use lookup column in the filter you have to use required $expand operator. You can find detailed info on using lookup column in SharePoint 2013 REST API in the following article: http://www.andrewconnell.com/blog/Applying-Filters-to-Lookup-Fields-with-the-SP2013-REST-API

Now, when we choose a country in the form, the drop down list of offices is automatically filtered by the selected country:

The last thing we have to do is to clear Office field when Country is changed. Open Forms Designer and go to its JS-editor. Put the following code there and save the layout for edit and new forms:

fd.field('Country').control().change(function() {
  fd.field('Office').control().value(null);
});

As you can see Forms Designer's JavaScript framework supports Cross-site Lookup field like any standard field. So, you can dynamically get and set values, handle value changing events, make selection controls readonly and etc.

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.

In this article I am going to demonstrate a new control of SharePoint Forms Designer called Related Items which has become available in version 2.7.5.

In the previous entries (1, 2) I described how to create forms with related items but that method requires much configuration including modification via SharePoint Designer. So users have to possess base skills in SharePoint configuration to follow instructions from those articles.

We looked into our customers requests and added a new control that allows to add and configure a list of related items directly in Forms Designer without using SharePoint Designer or configuration of web parts.

First, I have created lists linked by a single lookup column. Here you can use the standard lookup or our Cross-site Lookup column. Related items control works with both of them. Here are my lists:

• Countries;
• Offices: contains Country lookup column linked with Countries list;
• Issues: contains Country and Office lookup columns linked with Countries and Offices lists accordingly;

In the Issues forms I configured cascading between Country and Office drop-downs. So, users can create issues and attach them to the specific office by selecting Country firstly and then Office.

Now I would like to place the list of Offices into Country form and filter it by the current Country. Also, it would be very useful to edit Offices list directly from the Country form.

Open Countries edit form in Forms Designer. You can find the new control 'Related Items' on the left side. I put it into the accordion section:

In the properties window you can find Data Source property. Expand it by clicking the dots button. Here you can specify the list that you wish to display in your form, its view and lookup column for filtering. To display offices related to the current country I setup the following configuration:

Next, I will describe other properties of Related Items control.

Editable
If value is True, the related list is displayed with Add new button and a context menu for the items. So you can modify the list directly from the current form. It is good practice to set this property False for display forms and True for edit forms.

Save optionIf value is Recreate, the web part with the related items is resaved each time the form is saved. So if you wish to modify Related items with SharePoint Designer, you can change the value of Save option property to IgnoreIfExists, and Forms Designer will not resave Related Items component in the case it already exists on the form page even if you modified its properties.

ViewThis is an extended property for advanced users. Here you can modify schema of related items view.

Ok, now let's see what we get:

Now, users can edit Offices directly in Country form. When the user clicks 'new item' they see Office form which contains Country lookup column:

Ok, now I wish to fill Country field in the new Office form automatically based on the parent form. Open this form in Forms Designer and configure its layout according to your requirements. Country field has to be in this form and we will prefill it with JavaScript. Here is my form.

Please, note that I defined Css Class for Country field. I will use it in JavaScript to hide the field if the form has been opened from the parent form.

Open JS-Editor and place the following js-code there:

var parentID = fd.getSourceID();
if (parentID) {
    fd.field('Country').control().value(parentID);
    $('.country-field').hide();
}

As you can see, to get ID of the parent form I used a new function fd.getSourceID(). If you open a new form from the parent form this function returns ID of the parent item and null otherwise.

Next, if parentID is not null, I assign it to Country and hide Country field by selecting it with Css Class defined above.

Now, when the user adds Offices from Country form they have to fill Title field only. Country field is filled automatically and is not displayed in the form.

Great. Now I would like to show related issues in Offices forms. So, users will see only those issues which are related to their office. I would also like to see two views: all active issues linked to the current office and issues linked to the current office and assigned to the current user. So, open Forms Designer and put two related items into separate tabs and configure them to get data from Issues list. Set filtering by Office field and select the appropriate view: Active Issues and Assigned To Me. Actually, you can create your own views with filtration, grouping and styling and choose them in Data Source Editor.

Also, I modified the new form of Issues the same way as Offices to prefill and hide Office field if the form is opened from the parent form. Here is the result:

As you can see, with the new version of Forms Designer it's very easy to add related items anywhere in the form, filter them by lookup field and modify directly from the form. Do not hesitate to leave your questions we will be very glad to answer all of them.

In this article I would like to demonstrate how to open an edit form of an item right after its creation. This feature is very useful if you have related items filtered by the currently selected item on the form. As you may have noticed, you cannot edit related items on a new form because the parent item has not been created and its ID is not defined yet, so, other list items or documents cannot be linked to it.

Due to this issue, to create an item with connected child items users have to create a parent item first, save it and find it in the list, open its edit form and start editing the related items. Quite difficult, isn't it?

In SharePoint Forms Designer 2.7.11 we have implemented functionality that helps you to redirect users to any URL including edit form of an item right after its creation and inject ID of the currently created item into the link address.

Please note: this functionality works only in forms opened in full page, not in dialogs. In SharePoint 2013 all forms are opened in full page by default but in SharePoint 2010 you have to change this option in the following way: List Settings → Advanced Settings → Launch forms in a dialog. Set this option in 'No'.

Now, navigate to the list where you wish to configure redirection, open Forms Designer and choose a new form. Add the following JavaScript into JS-editor:

fd.onsubmit(function() {
  var uri = fd.setUrlParam(decodeURIComponent(window.location.href), 'FDRedirectWithID', 'fd_Item_Edit.aspx?ID=');
  fd.sourceFormParam(uri);
  return true;
});

setUrlParam(url, key, value)
Adds or updates query parameter in provided URL with a specified value and returns a new URL.
Url - source URL-string
Key - name of query string parameter
Value - new value of query parameter

sourceFormParam(value)
Gets or sets 'Source' query parameter of the URL which is contained in action attribute of the form. Source parameter contains URL of the page where users will be redirected after the submission of the form. If value is not specified the function returns the current value of 'Source' parameter.

In my example, users will be redirected after submission to the same page but with additional query parameter 'FDRedirectWithID'. If this query parameter is not empty Forms Designer gets its value, appends ID of the last item created by the current user and redirects to the generated URL. In my case, users will be redirected to 'fd_Item_Edit.aspx' form. You have to replace the name of the form with your own value. You can find it at the left bottom corner of Forms Designer.

If you have any questions, please, leave them here. Thank you.

Today I would like to present the new release of SharePoint Forms Designer 2.8.1 and demonstrate its main features. You can find the complete list of improvements on our website. In this article I will focus on customization of the bottom panel of buttons and the selected item info.

For my small demo I chose the list of workflow tasks in SharePoint 2013. By default, forms of this list contain additional buttons at the bottom and have the following view:

When a user clicks Reject or Approve buttons, Task Outcome column is changed to the appropriate value and the task completes. Based on Task Outcome value workflow detects whether the approval is completed and continues or remains waiting for all the approvers’ decisions.

If we design an edit form with Forms Designer we will get two buttons only: 'Save' and 'Cancel'. To approve task a user will have to select Approved value in Task Outcome drop-down and save the current task. Now I will show, how to add new buttons 'Approve' and 'Reject' to the bottom of a form and define the same logic for them as they have in default forms.

Please, pay attention to the text:
Created at [Created] by [Author]
Last modified at [Modified] by [Editor]

Now you can use field values in Rich Text and Plain Text controls. For example, you can put the following text into your form: Hello, [Assigned To]. Please, complete this task by [Due Date]. The text in square brackets will be replaced with the appropriate field values of the current item.

Next, you see Save and Cancel buttons. Choose any of them and in the property grid you will find OnClick property. Here you can define JavaScript, which will be executed when user clicks the button. If you return false in your custom code the form will not be submitted, so, you can define additional validation (e.g. if field A is empty or has incorrect value), next, show an alert message and return false (stay on form).

We will now add Approve and Reject buttons. In the toolbox on the left side of Forms Designer window you can find additional controls Save and Close. They allow to put additional buttons with the same behavior as that of default Save and Cancel buttons. But you can define your custom code in OnClick property. So, I put two Save buttons next to the existing one and change their title to 'Approve' and 'Reject' via property grid:

Now, we have to define OnClick handler to set Task Outcome field and change Status to Completed. Please, pay attention that you can change fields via JavaScript only if they are on the form. So, you have to place them in your form but if you don't want to display them to your users you can hide them via CSS. I will demonstrate it below.

Here is the code for Approve button:

fd.field('TaskOutcome').value('Approved');
fd.field('Status').value('Completed');

And for Reject button:

fd.field('TaskOutcome').value('Rejected');
fd.field('Status').value('Completed');

Ok, now we can hide Task Outcome field. Users will change it via Approve and Reject buttons only. Select it in Forms Designer and set Style property on 'display: none'.

Here is my final form:

Please, leave your questions in the comments. Thank you.

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.

In this article I am glad to present a new feature which allows to publish the designed forms to wiki, publishing and web part pages within the current site. It was implemented in SharePoint Forms Designer 2.8.6 which has been available for downloading since January, 27. I will now demonstrate how to use it in a real scenario.

Let us say that we have a helpdesk system and wish to create a compact homepage with the most important information and actions for our requestors. This page will contain the list of issues created by the current user, and a form on the right side for creating a new issue with essential fields only. For this case we should create a new page '/SitePages/Requestor.aspx' based on 'One column with sidebar' layout and place the list of issues filtered by the current user and grouped by status in the main column. Now, let us design a form for creating new issues for the sidebar. Go to the list of issues and open Forms Designer from the ribbon.

I designed a compact form with two tabs, the first for the most valuable fields whereas the second for additional information, e.g. category of an issue and attachments. At the bottom of my page I left Save button only and renamed it to 'Create request'. You can enable customization of bottom panel containing Save/Cancel buttons via 'Buttons' command in the ribbon.

As you can see, my form is small enough to distribute it at the sidebar of our homepage for requestor:

In the ribbon of Forms Designer you can see a new button 'General' in Settings section. Click it.

Here you can find settings to change visibility of the contextual tab of the ribbon and the toolbar of actions which duplicate those in the ribbon, e.g. attach, delete, etc. Next, there are two inputs for URLs where the current user will be redirected after submission or cancellation. By default, users go to the default view of list. So, I hid the ribbon, made the toolbar visible to allow users to attach files and set URL for redirecting after submission to '/SitePages/Requestor.aspx':

Now, we have to export the designed form into a file:

Ok, let us go to the requestor homepage and open it in edit mode:

Put the cursor into the sidebar and select Insert tab in the ribbon:

Click New Form and choose the exported form in the dialog:

Click Publish. Your designed form will appear right under the cursor in the sidebar. Here is my requestor homepage:

In the example above I have demonstrated how to publish the designed forms to wiki pages, but you can also distribute your forms on publishing and web part pages in absolutely the same way. Also note that you do not have to save the designed form in Forms Designer, just export it into a file. So, you can have different forms for creating items from multiple pages and from the list itself. If you need to modify the published form, you can import it into Forms Designer, make changes, export into a file and publish into the page as described above. The existing form will be replaced.

Please, leave your questions.

In one of my previous posts I have described how to customize toolbar buttons in SharePoint forms and how to add Approve and Reject buttons to the bottom of Workflow tasks in particular. Geir Mathisen commented on this post that it would be nice if Approve and Reject buttons could be used for changing approval status in the lists and libraries with content approval enabled. In this article I would like to cover this case.

First, we have to enable content approval feature which allows to make items or documents visible only to submitters and users with special permission (Approve/reject items) unless they are approved by these users. Go to the list settings and choose Version Settings section. Here, we should set 'Require content approval for submitted items' option to 'Yes'.

Now that we enabled content approval feature in our list, new columns - Approver Comments and Approval Status were added automatically but they do not appear in the list of fields in settings and in Forms Designer. We will add them to forms with help of HTML-control. Open Forms Designer, choose Edit form and place HTML-control with the following content:

Comments: <br />
<SharePoint:FormField id="_ModerationCommentsField"
FieldName="_ModerationComments"
runat="server"
ControlMode="Edit"
__designer:bind="{ddwrt:DataBind('u','_ModerationCommentsField','Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_ModerationComments')}" />

FormField is SharePoint component which renders control for a specific field and form mode. In our case it will be Approver Comments field whose internal name is _ModerationComments in edit mode. So if you wish to place Approver Comments field in display or new form, you have to specify the appropriate mode in ControlMode property: Display or New. As you may have guessed, the most valuable part of this code is __designer:bind attribute with ddwrt:DataBind function. I will not get deeper into technical aspects of this SharePoint control, just say that this property is required to map control and field and define control event that will notify SharePoint that field is changed. You can omit __designer:bind attribute if ControlMode of your field is Display. If ControlMode is New you have to set the first parameter of ddwrt:DataBind function to 'i' which means 'Insert'. You can get more information on SharePoint data binding in the following article: http://www.bryancook.net/2009/09/understanding-sharepoints-ddwrtdatabind.html

Ok, next we have to set CDATA property of HTML-control to False. This property has become available since 2.8.6 version of Forms Designer. If it is 'True', __designer:bind attribute will be ignored by SharePoint and entered data will not be saved.

Great, now we can modify Approver Comments fields directly in edit form. Unfortunately, SharePoint does not support controls for Approval Status in edit or new modes so, we have to define them ourselves. Put a new HTML-control with the following content to your form:

<div class="moderation-status-field">
<asp:HiddenField id="_ModerationStatusField"
runat="server"
Value="{@_ModerationStatus}"
__designer:bind="{ddwrt:DataBind('u','_ModerationStatusField','Value','Load','ID',ddwrt:EscapeDelims(string(@ID)),'@_ModerationStatus')}" />
</div>

Here, I put a hidden field and bound its value to Approval Status field. It could be text box as well as drop down, but I am going to set value of this control via JavaScript when user clicks the appropriate button: Approve or Reject, so the hidden field is the most suitable for my needs. As you can see, I wrapped the hidden field into DIV container to get it in JavaScript by CSS class. Approval Status field accepts the following values:
0 — Approved
1 — Rejected
2 — Pending
3 — Draft
4 — Scheduled

Do not forget to set CDATA of HTML-control to False.

Now, we should enable buttons feature of Forms Designer and put two additional Save buttons at the bottom of our form: Approve and Reject. Here is my form in Forms Designer:

Next, we should implement OnClick handler of Approve and Reject buttons to set the appropriate value of Approval Status.

Code for Approve button:

$('.moderation-status-field > input').val(0)

Code for Reject button:

$('.moderation-status-field > input').val(1)

Here is my final form:

When user clicks Approve button the current item is saved and turned to Approve state, since Reject button turns item to Rejected state.

Should you have any difficulty following these instructions, feel free to leave your questions.

In this article, I would like to demonstrate how to design a form with related documents and how to link new documents easily by dragging and dropping them onto the form. To build this solution I will use Forms Designer 2.8.8 which contains a new JavaScript function for auto filling metadata of the uploaded documents.

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:

As you can see, I selected my documents library as the data source and filtered it by the lookup column. Well, after that I could drop documents onto this area but the lookup column did not fill automatically and new documents disappeared from the view after uploading. And here I used a new JavaScript function, which had been implemented in Forms Designer 2.8.8:

fd.updateDroppedDocuments(container, fieldValues)

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:

{
    Lookup: GetUrlKeyValue('ID'),
    Status: 'Closed'
}

First, I assigned a CSS-class called 'related-docs' to my related documents.

Next, I put the following code into JS-editor:

fd.updateDroppedDocuments('.related-docs', {
    Event: GetUrlKeyValue('ID')
});

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 fd.updateDroppedDocuments function you can pre-fill not only a lookup field but any other fields. As the default values you can use field values from the parent form, constants, query parameters and other values retrievable in JavaScript.

As usual, I will be glad to answer your questions in the comments.

Today I'm going to show how to put the client people picker that has become available in SharePoint 2013 onto a custom form with help of the latest version of Forms Designer 2.8.9. I'm going to pay the most attention to JavaScript framework that allows to assign and retrieve values of the field or handle its changes.

So first I add a Person or Group field to my list and entitle it 'User'. That is the internal name of my field and I will use it later to get the control via JavaScript.

Open Forms Design and put the user field onto a form. In the properties grid you can see a new option 'Render'. Set it into 'Client' and save the form.

Here it is. Quite easy, isn't it?

Ok, now let me show how to manage it via JavaScript. First, I have to say that the control is loaded asynchronously after the page is ready. So you can retrieve or modify the field value only when the control is completely loaded. Our framework provides the 'ready' method to make sure that the control is ready and your code will be executed successfully.

Here is an example that demonstrates the most common actions:

fd.field('User').control('ready', function() {
 // retrieve values
 var selectedUsers = fd.field('User').value();
 for (var i = 0; i < selectedUsers.length; i++) {
  alert('Login: ' + selectedUsers[i].Key);
 }

 // assign value by a display name
 fd.field('User').value('Tim Watts');
 // by a login
 fd.field('User').value('DEV\\ann');
 // or by an e-mail:
 fd.field('User').value('AGibson@contoso.com');

 // handle changing event  
 fd.field('User').change(function() {
  console.log('The User field has been changed.');
  var selectedUsers = fd.field('User').value();
  for (var i = 0; i < selectedUsers.length; i++) {
   // check whether the value has been resolved
   if (selectedUsers[i].IsResolved) {
    console.log(
'Login: ' + selectedUsers[i].Key + '\n' +
'Display name: ' + selectedUsers[i].DisplayText + '\n' +
'E-mail: ' + selectedUsers[i].EntityData.Email
    );
   }
  }
 });
});

SharePoint provides its own JavaScript wrapper for the client people picker which can be used in conjunction with Forms Designer's JS-framework. The following sample demonstrates this case:

fd.field('User').control('ready', function(picker) {
 // The 'picker' is a SharePoint wrapper around the people picker control.

 // Append a user to the selected ones
 picker.AddUserKeys('Ann Ghibson');
});

This new functionality works for SharePoint 2013 and SharePoint Online in Office 365. I will be glad to answer your questions in the comments.

In this article I will demonstrate how to design forms for public sites in Office 365 with help of Forms Designer and make them available for anonymous users. As an example, I will create a simple feedback form and place it onto the Contact Us page.

First, we need to create a list to store the requests from anonymous users. I've called it 'Requests' and configured with the following columns: Phone, Email and Message.

Ok, now I have to grant anonymous users a permission to add new items. Unfortunately, SharePoint Online doesn't provide an interface to achieve it but there is a third party tool that allows to manage anonymous access:
http://anonymous365.codeplex.com/

Upload the solution above to the catalog:
{your public site domain}/_catalogs/solutions/Forms/AllItems.aspx

Activate it. Next, make sure that the limit of server resources for your public site doesn't equal to zero in SharePoint admin center or expand the quota otherwise:

Now, you can find 'Anonymous Access' button on the ribbon of the list:

Open the Requests list, click 'Anonymous Access' and select 'Allow anonymous users to add items to this list' option. Now, when we've provided users with an access to add items, we can deactivate and remove Wsp365.Anonymous.wsp solution.

Next, lets create a 'Thank you' page where the user will be redirected after submission of the form. I've made a new publishing page with the following content: '​Thank you for your message. We will contact you soon.'

Almost done. Now, we need to design a form and publish it onto the Contact Us page. Start Forms Designer to design a new form: go to the Site Contents page, click Forms Designer app, choose Requests list in the drop-down and click Start:

Here is my form:

General settings:

Click Export button on the ribbon to save the form into a file. Open Contact Us page, turn it into Edit mode and insert the exported form:

Publish the page. If your form contains required fields, you should fill them in to pass the validation. Here is the result:

With help of our JS-framework you can add extra validation for e-mail and phone number fields if required. Get more information on how to publish forms onto SharePoint pages:
http://www.youtube.com/watch?v=-Lj0dMB-Cww&hd=1
http://formsdesigner.blogspot.com/2014/01/publish-designed-form-to-any-page.html

Please, do not hesitate to leave your questions in the comments.