Related documents with support of quick upload

CodeProject

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

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.

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.

How to create forms with related items in SharePoint 2010/2013 including Office 365

CodeProject

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

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.

SharePoint print forms

CodeProject

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

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

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

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

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

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

window.print(); return false;

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

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

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

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

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

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

Office 365

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

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

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

Reservation of resources in SharePoint 2013 and SharePoint 2013 Online in Office 365

CodeProject

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:

CalendarWithResources.wsp
Sources of CalendarWithResources