Sunday, 23 October 2011

Facility Group SharePoint Project Mercury Marine

SharePoint Document Library View Technical Approach

Prepared by: Sandip Kharde

Summary

This document is outlines the steps that were done as part of the solution development.

Facility Group Technical Document

1.

INTRODUCTION

1.1 Purpose
The purpose of this document is to describe about the technical approach taken to develop the SharePoint solution.

2. 2.1

BACKGROUND
Existing System
The existing system had the following, The Property Documents is a document library, which is used to store the documents and its associated metadata. The metadata columns in this document library includes Lookup column which get values from other SharePoint Lists. The document library had views to show the document sorted, grouped based on some metadata columns. The structure of the document library and lists was as follows, Document Library : Property Documents Column Name Title Brunswick Property Type Single line of text Lookup (Lookup List Properties) Document Type Choice name : Brunswick

List Name : Brunswick Properties Column Name 1st Floor Manf/Tech Area 1st Floor Office Area 2nd Floor Manf/Tech Area 2nd Floor Office Area Address Annual Rent Annual Rent (Local) Assessed Value Type Number Number Number Number Multiple lines of text Currency Number Currency

Version: 1.0

Date:

Page: 1

Facility Group Technical Document

Auto Renewal BC Parent Book Value Building Improvements Book Value of Building Book Value of Land Book Value of Land Improvements Building Depreciation Building Improvement Depreciation Building Improvement Life (Months) Remaining

Yes/No Single line of text Currency Currency Currency Currency Currency Currency Number Number Single line of text Single line of text Choice Single line of text Single line of text Choice Choice Choice Choice Yes/No Number Date and Time Choice

Building Life Remaining (Months) Building Number Business Phone Business Unit City Country Currency Division Document Checklist - Leased Documents Checklist Early Termination Option Facility Footprint Area Financial Data Last Updated On For Sale If auto Timeline renewal yes, Renewal

Number Currency Date and Time Date and Time Single line of text Single line of text Single line of text Choice

Land Improvement Depreciation Lease Ending Lease Start Lease Term Lessor Location Contact Nature of Business Notes\Additional Information Oracle Cost Center Contact

Multiple lines of text Single line of text

Version: 1.0

Date:

Page: 2

Facility Group Technical Document

P&L Depreciation Real Property Parcel Number Personal Property Tax Plant Number Property Name Property Status Real Property Tax Region Shared Facility State/Province Tax Accrual Information/Accounts Total Book Value Real Property Total Plant Area USForeign Warehouse Area Water Access ZIP/Postal Code

Currency Single line of text Currency Single line of text Single line of text Choice Currency Choice Yes/No Single line of text Single line of text Currency Number Choice Number Yes/No Single line of text

2.2

Requirements
When clicked in the lookup column value, The detailed lookup value must open up in new window, by default it opens up in the same window.

When clicked on this lookup column values, it should open in a new window

The lookup value which opens in new window should show all the documents that were related to the currently shown lookup value. By default only the details about the lookup value are shown.

Version: 1.0

Date:

Page: 3

Facility Group Technical Document

All the documents related to lookup value (E.g.:Admin HQ) should be shown here

The shown documents must able be grouped based on Document Type. While grouping all the possible document types must be shown, regardless of whether a document exists under a document type or not. By default only the document types which has got documents under it are shown, if there are no documents related to a particular document type then it will not be shown. While the documents are filtered, grouped and shown, options must be there to create new documents and upload existing documents. There must be options to edit and delete the documents that were shown.

3.

APPROACHED SOLUTION

To achieve the following requirements, JQuery, DataView webpart and Out Of The Box (OOTB) sharepoint scripts were used.

3.1

Change in metadata column type

The Document Type metadata column is deleted and recreated as a lookup value. All the values inside the choice column were copied and pasted into a custom list, which then was used as a lookup list. The structure of the document library and lists after the modification are as follows, Document Library : Property Documents

Version: 1.0

Date:

Page: 4

Facility Group Technical Document

Column Name Title Brunswick Property

Type Single line of text Lookup (Lookup List Properties) name : Brunswick

Document Type

Lookup (Lookup List name : Document Type)

List Name : Brunswick Properties This list structure has not changed. List Name : Document Type Column Name Title Type Single line of text

3.2

JQuery
The JQuery is implemented by writing the script into a content editor web parts Source Editor view. The chrome type of the content editor web part needs to be set to None so make it invisible on the page. For pages that could not be edited in browser to add new web parts, the page will need to be edited in SharePoint designer and the script needs to be included. Importing JQuery : JQuery library was stored inside a document library and imported where ever it is required. The JQuery was imported using the following syntax. Syntax : <script type="text/javascript" src="http://url_of_the_site_and_subsite/documentlibrary_and_folder/ jquerylibrary_name.js"></script> Example : <script type="text/javascript" src="http://collabtest.brunswick.com/facilities/test/JQueryLib/jque ry-1.4.2.min.js"></script> Making the link to open in a new window and pass the current lookup value as URL parameter : The following JQuery was used, to make all the lookup links to open up in new window and pass the value of the current lookup value that is clicked on. <script type="text/javascript"> $(document).ready(function() { $("a[href^='/facilities/test/Lists/Brunswick %20Properties/DispForm.aspx?ID=']").each(function() { this.href = this.href + "&v=" + $(this).text();

Version: 1.0

Date:

Page: 5

Facility Group Technical Document

this.target = "_blank"; }); }); </script> The above script finds all hyperlinks which has got the URL of lookup list in their target URL and performs two actions 1.Create a new parameter called v, stores the lookup value into it and then appends it into the URL as a parameter. 2.Sets the target of the hyperlinks to _blank, which makes the hyperlinks to open in a new window.

3.3 Data View web part

The data view web part is used to retrieve the data from Document Type and Property Document lists, filter them, group them and display it. The following steps were followed to make the data view web part work as needed. The DispForm.aspx of Brunswick Property list was opened in SharePoint Designer. (Note: Make a copy of the DispForm.aspx so that it can be used as a backup and reference) Select Manage Data Sources from the Data View menu.

From theData Source Library that is shown, click on Create a new Linked Source under the Linked Sources section.

On the dialog box that is shown go to the General Tab and give a meaning full name to the data source that we are creating. Then navigate to Source tab and click on Configure Linked Source button.

Version: 1.0

Date:

Page: 6

Facility Group Technical Document

Select and Add Document Type list under the SharePoint Lists section. Then Select and Add Property Documents library shown under the SharePoint Libraries section. When both these are added click on Next button.

At the next screen select Join option and click on Finish.

Version: 1.0

Date:

Page: 7

Facility Group Technical Document

From the Context Menu of the newly created linked data source, select Show Data.

On the EditForm.aspx, select the Table Data (TD) that holds the Brunswick Properties: New Item web part. Right click on the TD Insert Cells to the Right. Click inside the newly created TD to place the cursor inside the new TD.

From the Current Data Source toolbar on the right hand side, select the Title under dsQueryResponse Document Type Rows Rows, drag the Title column and drop into the new TD which was created in above step.

Version: 1.0

Date:

Page: 8

Facility Group Technical Document

Click on the Paging 10 item(s) per set of the inserted data view web part. On the dialog that is shown select Display all items option.

Version: 1.0

Date:

Page: 9

Facility Group Technical Document

Now rename the Title value to Document Type

Now right click on of the newly inserted value (e.g. Buying & Selling authorizations) , then right click Insert Columns to the Right

Click on the second cell in the newly created column. (Note: Dont select the first cell, as it is a Table Heading). Select the Name under dsQueryResponse Property Documents Rows Row and select Joined Subview submenu of Insert selected fields as. menu.

On the selection box that is shown select Title on the Left and Document Type from the Right. Click on OK.

Version: 1.0

Date:

Page: 10

Facility Group Technical Document

Click on a inserted value, click on the > button to see the Common Tasks and select Hyperlink.

Enter {@FileRef} for Address and then {@FileLeafRef} for Text to display.

Click on Name (for use in forms) and click on > button and select Parameters. From the shown dialog click on New parameter, enter the name as v, select Query String as Parameter Source and enter v for Query string variable. Click on OK to close the window.

Version: 1.0

Date:

Page: 11

Facility Group Technical Document

Now click on any values and click > button on top-right. Now from the context menu click on Filter. Select Brunswick Property for field name, then Equals and finally [v] for Value.

Click on the empty header cell and type Documents(s)

3.4

Handling Special Characters in XSLT

Click on any values and click > button on top-right. Now from the context menu click on Filter. Select the Document Type row, right click and select Delete. Click on OK.

Version: 1.0

Date:

Page: 12

Facility Group Technical Document

Switch to code view and locate dvt_2.body template. i.e.

<xsl:template name="dvt_2.body">

Inside that template add the following code just before <xsl:call-template name="dvt_2.rowview" />
<xsl:variable name="parentval"> <xsl:value-of disable-output-escaping="no" select="$dvt_ParentRow/@Title" /> </xsl:variable>

Change the <xsl:call-template name="dvt_2.rowview" /> into

<xsl:call-template name="dvt_2.rowview" > <xsl:with-param name="test1" select="$parentval " /> </xsl:call-template>

Locate the dvt_2.rowview template .i.e

<xsl:template name="dvt_2.rowview">

Add the following name="dvt_2.rowview">,

<xsl:param name="text" /> <xsl:param name="replace" /> <xsl:param name="by" /> <xsl:choose>

template

just

above

that

<xsl:template

<xsl:template name="string-replace-all">

<xsl:when test="contains($text, $replace)"> <xsl:value-of select="substring-before($text,$replace)" /> <xsl:value-of select="$by" /> <xsl:call-template name="string-replace-all"> <xsl:with-param name="text" select="substring-after($text,$replace)" /> <xsl:with-param name="replace" select="$replace" /> <xsl:with-param name="by" select="$by" />

Version: 1.0

Date:

Page: 13

Facility Group Technical Document

</xsl:call-template> </xsl:when> <xsl:otherwise> <xsl:value-of select="$text" /> </xsl:otherwise> </xsl:choose> </xsl:template> <xsl:template name="SpringReplaceApos"> <xsl:param name="text" /> <xsl:choose> <xsl:when test="contains($text, &quot;&apos;&quot;)"> <xsl:variable name="nextString"> <xsl:call-template name="SpringReplaceApos"> <xsl:with-param name="text" select="substring-after($text, &quot;&apos;&quot;)" /> </xsl:call-template> </xsl:variable> <xsl:value-of select="concat(substring-before($text, &quot;&apos;&quot;), '&amp;#39;' ,$nextString)" /> </xsl:when> <xsl:otherwise> <xsl:value-of select="$text" /> </xsl:otherwise> </xsl:choose> </xsl:template>

Now just after the <xsl:template name="dvt_2.rowview"> add the following line of code

<xsl:param name="parentval" />

Locate the following code under the <xsl:template name="dvt_2.rowview"> template.

<a href="{@FileRef}"><xsl:value-of select="@FileLeafRef" /></a>

<td class="ms-vb"> </td>

And add the following code, just before it

<xsl:variable name="curvalquotfix"> <xsl:call-template name="string-replace-all"> <xsl:with-param name="text" select="$parentval" /> <xsl:with-param name="replace" select="'&#34;'" /> <xsl:with-param name="by" select="'&amp;#34;'" />

Version: 1.0

Date:

Page: 14

Facility Group Technical Document

</xsl:call-template> </xsl:variable> <xsl:variable name="curvalaposfix"> <xsl:call-template name="string-replace-all"> <xsl:with-param name="text" select="$curvalquotfix"/> <xsl:with-param name="replace" select="'&#34;'"/> <xsl:with-param name="by" select="'&amp;#34;'"/> </xsl:call-template> </xsl:variable> <xsl:variable name="curvalampfix"> <xsl:call-template name="string-replace-all"> <xsl:with-param name="text" select="$curvalaposfix" /> <xsl:with-param name="replace" select="'&amp;'" /> <xsl:with-param name="by" select="'&amp;amp;'" /> </xsl:call-template> </xsl:variable> <xsl:variable name="curvalltfix"> <xsl:call-template name="string-replace-all"> <xsl:with-param name="text" select="$curvalampfix" /> <xsl:with-param name="replace" select="'&#60;'" /> <xsl:with-param name="by" select="'&amp;#60;'" /> </xsl:call-template> </xsl:variable> <xsl:variable name="curvalgtfix"> <xsl:call-template name="string-replace-all"> <xsl:with-param name="text" select="$curvalltfix" /> <xsl:with-param name="replace" select="'&#62;'" /> <xsl:with-param name="by" select="'&amp;#62;'" /> </xsl:call-template> </xsl:variable> <xsl:variable name="cur"> <xsl:value-of select="@DocType1" disable-output-escaping="yes" /> </xsl:variable>

Replace

<td class="ms-vb"> <a href="{@FileRef}"><xsl:value-of select="@FileLeafRef" /></a>

Version: 1.0

Date:

Page: 15

Facility Group Technical Document

</td>

With
<xsl:choose> <xsl:when test="normalize-space(string($cur)) = normalizespace(string($curvalgtfix))"> <td class="ms-vb"> <a href="{@FileRef}"><xsl:value-of select="@FileLeafRef" /></a> </td> </xsl:when> <xsl:otherwise/> </xsl:choose>

Save and close the DispForm.aspx and then exit SharePoint Designer.

3.5 Options to create New Document and Upload existing document

Open the DispForm.aspx in SharePoint Designer, Go to code view Copy the following into just before any existing <Style> section.
<STYLE> /* Rule 323 of /_layouts/1033/styles/core.css? rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-bodyareaframe {BORDER-RIGHT: #6f9dd9 1px solid; BORDER-TOP: #6f9dd9 1px solid; VERTICAL-ALIGN: top; BORDER-LEFT: #6f9dd9 1px solid; WIDTH: 100%; HEIGHT: 100%;BACKGROUND-COLOR: #ffffff} /* Rule 325 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-bodyareaframe { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px;PADDING-TOP: 10px} /* Rule 1 of embedded stylesheet */ .ms-bodyareaframe { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px} /* Rule 398 of /_layouts/1033/styles/core.css? rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-propertysheet {FONT-SIZE: 0.7em; COLOR: #4c4c4c; FONT-FAMILY: verdana; TEXT-ALIGN: left} /* Rule 318 of /_layouts/1033/styles/core.css? rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-bodyareacell {VERTICAL-ALIGN: top; WIDTH: 100%; HEIGHT: 100%} /* Rule 2 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ FORM { MARGIN: 0px} /* Rule 1 of /_layouts/1033/styles/core.css? rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ BODY { MARGIN: 0px} /* Rule 3 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ BODY { COLOR: #000000;FONT-FAMILY: verdana,arial,helvetica,sans-serif;BACKGROUND-COLOR: #ffffff} /* Rule 24 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .msmenutoolbar {BACKGROUND-IMAGE: url(/_layouts/images/listheadergrad.gif); BORDER-BOTTOM: #6f9dd9 1px solid;BACKGROUND-REPEAT: repeat-x; HEIGHT: 22px;BACKGROUND-COLOR: #afd2ff} /* Rule 7 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-toolbar { FONT-SIZE: 8pt; COLOR: #003399; FONT-FAMILY: verdana;TEXT-DECORATION: none} /* Rule 25 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-menutoolbar TD {BORDER-TOP: #f2f8ff 1px solid;BORDER-BOTTOM: #d6e8ff 1px solid} /* Rule 28 of /_layouts/1033/styles/core.css? rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-menutoolbar TD {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: middle; PADDING-TOP: 0px} /* Rule 41 of /_layouts/1033/styles/core.css? rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-viewselector { FONT-SIZE: 8pt; FONT-FAMILY: tahoma} /* Rule 44 of /_layouts/1033/styles/core.css?

Version: 1.0

Date:

Page: 16

Facility Group Technical Document

rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-menutoolbar TD TD.ms-viewselector { BORDER-RIGHT: #d2b47a 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #d2b47a 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold;BACKGROUND-IMAGE: url(/_layouts/images/selectednav.gif); PADDING-BOTTOM: 0px; BORDER-LEFT: #d2b47a 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #d2b47a 1px solid;BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #ffe6a0} /* Rule 50 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ TD.msviewselector { BORDER-RIGHT: #d2b47a 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #d2b47a 1px solid; PADDING-LEFT: 0px; FONT-WEIGHT: bold;BACKGROUND-IMAGE: url(/_layouts/images/selectednav.gif); PADDING-BOTTOM: 0px; BORDER-LEFT: #d2b47a 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #d2b47a 1px solid;BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #ffe6a0} /* Rule 51 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .msmenutoolbar TD TD { BORDER-RIGHT: medium none;BORDER-TOP: medium none; BORDER-LEFT: medium none;BORDER-BOTTOM: medium none} /* Rule 58 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D %3D */ TD.ms-viewselector {WIDTH: 125px} /* Rule 52 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ DIV.msviewselector { BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 12px; BACKGROUND-POSITION: right center;BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 4px;BACKGROUND-IMAGE: url(/_layouts/images/menudarkspaced.gif); PADDING-BOTTOM: 1px; BORDER-LEFT: #ffffff 1px solid; CURSOR: pointer; PADDING-TOP: 1px;BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-REPEAT: no-repeat} /* Rule 26 of /_layouts/1033/styles/core.css? rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-menutoolbar TD A {FONT-SIZE: 8pt; COLOR: #003399; FONT-FAMILY: tahoma; TEXT-DECORATION: none} /* Rule 54 of /_layouts/1033/styles/core.css? rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ DIV.ms-viewselector A {COLOR: #000000} /* Rule 400 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D %3D */ .ms-propertysheet A {COLOR: #3966bf;TEXT-DECORATION: none} /* Rule 39 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-listheaderlabel {COLOR: #204d89} /* Rule 40 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .mslistheaderlabel { FONT-SIZE: 8pt;FONT-FAMILY: tahoma} /* Rule 373 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .msseparator { FONT-SIZE: 10pt;COLOR: #83b0ec} /* Rule 30 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .msmenubuttoninactivehover {PADDING-RIGHT: 7px; PADDING-LEFT: 7px; PADDING-BOTTOM: 3px; MARGIN: 2px; LINE-HEIGHT: 16px; PADDING-TOP: 2px; BACKGROUND-COLOR: transparent} /* Rule 374 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .msseparator IMG { BORDER-RIGHT: #f2f8ff 1px solid; BACKGROUND: #9ac6ff; MARGIN: 0px 1px; WIDTH: 1px; BORDER-BOTTOM: #f2f8ff 1px solid;HEIGHT: 16px} /* Rule 68 of /_layouts/1033/styles/core.css?rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .mssplitbutton {MARGIN: 0px 1px} /* Rule 66 of /_layouts/1033/styles/core.css? rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-menutoolbar .ms-splitbuttondropdown { PADDING-RIGHT: 2px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 1px; PADDING-TOP: 0px} /* Rule 67 of /_layouts/1033/styles/core.css? rev=5msmprmeONfN6lJ3wtbAlA%3D%3D */ .ms-menutoolbar .ms-splitbuttontext { PADDING-RIGHT: 6px; PADDING-LEFT: 8px; PADDING-BOTTOM: 1px; PADDING-TOP: 0px} </STYLE>

Open the Property Documents document library in browser. Press F12 to open the developer toolbar. Using the Arrow selection tool available in the developer tool bar select the table which holds the New, Upload options. Right click and

Version: 1.0

Date:

Page: 17

Facility Group Technical Document

select Copy InnerHTML

So to the Split view of the page, select the second web part where the Property Documents are shown. Now in the code section paste the copied HTML. (Note: Remove the options like Actions, Settings using SharePoint Designer) Save the file and close the Designer.

4.

REFERENCE
http://www.endusersharepoint.com/2010/04/15/sharepoint-group-bya-column-with-multiple-values/

Version: 1.0

Date:

Page: 18