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.

Wednesday, October 2, 2013

How to open edit form right after creation of an item in SharePoint

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;
});
As you can see, I used new JavaScript functions here:

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.

SharePoint form name

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

Thursday, August 29, 2013

How to create forms with related items in SharePoint 2010/2013 including 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:

Related Items Control in SharePoint Forms Designer

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:

Data Source Editor of Related Items control

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 option If 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.

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

Ok, now let's see what we get:

SharePoint form with related items

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

SharePoint new form

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.

Set css class for parent column

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.

Set view of related items

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:

SharePoint form with list of related items

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.