Tuesday, June 10, 2014

Publish a form for anonymous users on a public site in Office 365

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.

SharePoint List Columns

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:

SharePoint Online Admin Center
SharePoint Site Resource Quota

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

SharePoint Online Anonymous Access

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:

Start Forms Designer

Here is my form:

SharePoint New Custom Forms

General settings:

SharePoint 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:

SharePoint Public Form

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

SharePoint Online Contact Us Form

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.

Saturday, June 7, 2014

Client people picker on a custom SharePoint form

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?

SharePoint Client People Picker

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.

Tuesday, April 1, 2014

Related documents with support of quick upload

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:

SharePoint event form with related documents

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:

Data source 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'
}
Note: the field names of the object have to match the internal names of the related library.

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

Assign CSS-class to the related items control

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:

Drop documents onto the parent form

Here is the result:

Default value of the uploaded document

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.

Thursday, January 30, 2014

Change of approval status in SharePoint edit form

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:

SharePoint form field data binding

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:

SharePoint Content Approval Status on Edit 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.

Tuesday, January 28, 2014

Publish the designed form to any page within the current site

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:

SharePoint Forms Designer

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

SharePoint Forms Designer General Settings button

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':

SharePoint Forms Designer General Settings

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

Export SharePoint Form

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

SharePoint edit page

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

Add SharePoint form

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

Import SharePoint form

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

Publish SharePoint form to page

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.

Sunday, December 22, 2013

Forms in multilingual sites of SharePoint 2010/2013

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:

SharePoint set alternate language

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:

SharePoint custom form for English

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

SharePoint language selection menu

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:

SharePoint custom form for German

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

SharePoint English form

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

SharePoint German form

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.

Tuesday, December 3, 2013

Customization of toolbar buttons and item summary in SharePoint forms

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 with 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:

SharePoint Forms toolbar with additional buttons

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.

Open Forms Designer, choose Workflow Task (SharePoint 2013) content type and Edit form type. You can find a new toggle button 'Buttons' in the ribbon. When it is checked you can redefine the standard toolbar: add or remove Save and Cancel buttons, append additional info into the summary section of the current item, etc. Check it and you will see the default toolbar at the bottom of your form:

Toolbar button in the ribbon

Default SharePoint form toolbar

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:

Customize toolbar with SharePoint Forms Designer

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:

SharePoint form with custom toolbar

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