Search This Blog

Thursday, March 3, 2011

How to filter values in a content query web part based on a query string parameter


Additional Filters in a content query web part: 

The below definitions can be viewed by clicking on the help icon beside the Additional Filters section of the Content query web part in edit mode. Most people would not have the patience to click the icon, Hence i have mentioned the details below:
  
You may also enter these tokens as filter values:

  • [PageFieldValue: field name] - uses the value of the specified field of the current page.
  • [PageQueryString: query string parameter name] - uses the value of the specified query string property of the current page URL.
  • If the page field value or query string parameter value is null, the filter will not be included in the query.
  • For date fields, enter an integer value in "Custom Value or Query" to set up a dynamic date range which will be equal to [Today] + [integer value] number of days. 

Tuesday, March 1, 2011

How to show the query string as a title of a list view/Data view web part in SharePoint 2010 using XSLT


Requirement

We needed the title of the xslt list view web part displayed as View "Query string value" documents or View "Query string value" announcements etc

Solution

We considered the following ways to display the title:

  • Using Javascript
  • customizing the XSLT of the list view web part


The second method was followed.

To display the title as the query string in the XSLT list view web part use the following steps:

Click here to learn basics of XSLT.
  1. Edit the page in advanced mode in SharePoint designer (Note: Detach the page from the page layout if you are using a publishing page layout).
  2. Insert the list view web part
    1. Move the cursor over the web part zone in markup or design view. 
    2. From the ribbon's insert tab insert the list using the data view button.
  3. Highlight/Select the list/data view web part in design view.Customize the XSLT of the list view web part from the design tab's Customize XSLT ->Customize entire view option.
  4. With the list/Data view web part highlighted, select the options tab and click on the parameters button.
  5. Create a new parameter with the parameter source as the query string and set the query string variable name to "your query string's variable" name.
  6. Insert the following lines of xslt code, just before the <table> tag to display the query string as a title to the list view web part.
  7. <h2><xsl:value-of select="$ParameterName"/> documents etc</h2>
  8.  Save (and publish) the page.

Sunday, February 27, 2011

Passing a url with a query string in a content query web part using itemstyle.xsl

Requirement:

I needed to display a list of items from a SharePoint list, On clicking the items in the list, the user is led to a page where the document or announcements pertaining to that individual is to be displayed.

For e.g.
If there is a list of students stored in a SharePoint contacts list, each having a document report related to him/her stored in a document library (A lookup field has been added to associate each item in the doc lib with the student name field of the student list). We need to display a list of the student names on one page, and on clicking any item (Student name) on the page we are led to another page which shows the documents or announcements related to that student.

Solution:

create 2 lists:
1.Student list- You may use an OOB SharePoint contacts list ( Make the name field as mandatory).
2.Document library - Create a doc lib and add a site column that looks up the students name (lookup column should be made mandatory).

Create 2 pages:
Page 1: For displaying the list of student names
Page 2: For displaying the doc lib or announcement regarding a particular student.

In Page 1:

Insert a content query web part and configure it to display the items from the Student list.
Create a new template in the itemstyle.xsl in SharePoint designer.
To learn more about how to modify the CQWP itemstyle.xsl refer the following links
Basics of XSLT
Customizing styles of CQWP
Content Query Webpart In SP
How to: Customize XSL for the Content Query Web Part

We have used a query string to achieve the desired results. The following portion of the XSLT CQWP itemstyle.xsl is the portion used to pass the url of Page 2 along with a query string:



<a>
  <xsl:attribute name="href">
    /Pages/Page2.aspx?StudentName=<xsl:value-of select="$DisplayTitle"/>
  </xsl:attribute>
  <xsl:value-of select="$DisplayTitle"/>
</a>



Save the itemstyle.xsl and publish it.

Apply the desired template to the CQWP inserted in Page 1.

In Page 2:


Open the page in SharePoint 2010 designer and edit the page in advanced mode (Note: Detach the page  from the page layout if you are using a publishing page)

Insert the document library or announcement list into the page. Save (and publish) the page.

Open the page in the browser and edit it.

Add a SharePoint filter web part called: query filter web part. Edit this web part and in the Query String Parameter Name field add StudentName (or as specified in the xslt). Apply and ok.

Click on the dropdown of the query filter web part and click on connection and select the doc lib or announcement list inserted into the page earlier. Here select the consumer field name as the Student Name while connecting the web part. Save and publish the page.

Add your custom CSS to style the web parts, and we are done :D.

Thursday, February 24, 2011

Styles to customize the search control in SharePoint 2010


/* Start:Custom search icon and search box styling */

td.ms-sbgo
{
background-color:transparent;
padding-bottom:0px;
padding-top:0px;
border:solid 0px #949494;
}

td.ms-sbgo a
{
padding: 0px 0px 0px 0px !important;
margin: 0px 0px 0px 4px !important;
}

td.ms-sbgo a
{
background-image: url("/Style Library/Images/search-bt.gif");
background-repeat: no-repeat;
background-position: top left;
float:left;
}
td.ms-sbgo a img
{
visibility: hidden;
height: 27px;
width: 77px;
}

.s4-search input.ms-sbplain 
{
            width:191px !important;
            background:transparent url("/Style Library/Images/textbox-bg.gif") 0 0 no-repeat;
            font-size:12px !important;
            height:25px;
            border:1px solid #d4d4d4;
}

.s4-search .srch-gosearchimg
 {
           height:27px !important;
}

/* End: Custom search icon and search box styling  */

Wednesday, February 23, 2011

Styles to customize the SharePoint 2010 ribbon

/* Start:custom ribbon styling */

/* 
Add the below css class to the master page as shown below


<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle ribbon-custom">
     <div id="s4-ribboncont">
<!-- ribbon starts here -->
      <SharePoint:SPRibbon
runat="server"
PlaceholderElementId="RibbonContainer" etc..........
*/

.ribbon-custom
{
            background-color:#fba828 !important;
}

.ms-siteactionsmenuinner
{
            background:none !important;
            border:none;
            color:#000 !important;
}

.ms-siteactionsmenuhover
{
            background-color:#fba828 !important;
            color:#000 !important;
}

/* Start: Styling for the welcome menu/login control */

.ms-welcomeMenu 
{
            padding-right:0 !important;
            padding-left:0 !important;
            margin:0 !important;
           
}

.ms-welcomeMenu A:link
{
            color:#000 !important;
            /*border-right:1px solid #c2b9b0;*/
            background:transparent url("/Style Library/Images/down-arrow.gif") right 4px no-repeat;          

}

.ms-SpLinkButtonActive
{
            background:none !important;
            color:#000 !important;
            border:#fff 1px solid !important;
}

.s4-trc-container-menu
{
            margin:-2px 0 6px 0 !important;
}

.s4-signInLink
{
            color:#000 !important;
}

/* End:Styling for the welcome menu/login control */

.ms-siteactionsmenu > span > a {
    color: #000;
}


/* End:custom ribbon styling */

Styles in SharePoint 2010

Styling the top navigation using CSS

The styles below have been specified in Randy's blog. Please read the blog before using the styles below.

.s4-tn a.selected {
background-color:#643228;
color:#FFFFFF !important;
}

.s4-tn li.static > a:hover {
background:#643228 !important;
color:#FFFFFF !important;
text-decoration:none !important;
}

.s4-tn li.static > .menu-item {
height:16px !important;
line-height:16px;
color:#643228;
font-size:11px !important;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif !important;
display:inherit;
padding:6px 9px 6px 9px;
text-transform:uppercase;
}
/*Start:The below style is used to keep the top level menu items highlighted when the flyout menu is hovered over (Note that there are certain issues one faces while using this style, use the below style only if it is necessary)*/
.menu :hover > a {
color:#FFFFFF !important;
background-color:#643228;
}
/*End:The below style is used to keep the top level menu items highlighted when the flyout menu is hovered over*/

/* flyout holder */
.s4-tn ul.dynamic {
border:0;
background-color:#643228;
}


/* flyout item */
.s4-tn li.dynamic > .menu-item {
background-color:#643228;
color:#fff;
border-bottom:1px #BD8947 solid;
text-transform:none;
height:18px !important;
line-height:18px !important;
font-size:11px !important;
font-weight:normal;
}


/* flyout item hover */
.s4-tn li.dynamic > a:hover {
background-color:#BD8947;
}

Monday, January 3, 2011

Getting started Branding SharePoint sites

Considering you are a complete novice to web development, where do you start and how do you go about learning to brand SharePoint sites. I will give you an account of how I went about branding SharePoint. When I started, I was a total fresher to web development and ASP.NET. Note that the post below assumes you already have a template or the HTML, CSS and image files created by a web developer. The post below only describes how to go about integrating the template into SharePoint to get the desired look and feel. This post does not cover concepts related to creating templates using Dreamweaver and Photoshop.


 Firstly you need to know the basics of HTML and CSS. For this you may use http://www.w3schools.com/ to get a jump start. I advise you to use the “TRY IT OUT’s” in the tutorials and experiment. Once you have a grasp of HTML and CSS concepts to an extent. You could try creating a master page in Microsoft Visual Studio. You may download the free express versions from here. You may skip the above step and start designing in SharePoint 2010 designer if you want, but creating a master page in SharePoint will be much easier once you are familiar with concepts related to master pages and layouts in ASP.NET.


Download the SharePoint designer 2010 (Its free of charge) and install it onto your target machine. You may download the 32 bit version (recommended for most users) of SharePoint designer from here or the 64 bit version of SharePoint designer from here. Start off by going through Randy Drisgill’s articles on SharePoint 2010 branding. Note that these articles are based on SharePoint 2007 site but they give you an understanding of the basic concepts involved branding SharePoint. 
Thats it, get started branding  your site. All the best :D. 

Tuesday, December 28, 2010

SharePoint 2010 Branding Tips and Fixes



Sl no.
Issue
Solution
SharePoint 2010-Master page
1
Starter master page by Randy Drisgill not displayed when uploaded into SP
designer 2010.
To solve this problem go into site
settings->Master pages and page layouts, here change the property of the starter master page file from page layout to Publishing master
page
in order to have the master page displayed in the Master pages gallery
rather than the page layouts gallery.
2
Hide ribbon from anonymous view
Use security trimmed control. Refer

http://www.topsharepoint.com/hide-the-ribbon-from-anonymous-users
for
further information.
3
Scroll bar missing on adding security
trimmed control in SharePoint 2010.
Make the following change in the embedded style in the master page:
body {
height:100%;
overflow:auto;
width:100%;
}
4
Displaying favicon
Use the control
<SharePoint:SPShortcutIcon runat="server" IconUrl="/Style Library/sitename/favicon.ico"/>
Use your custom path instead of the above bolded text.
5
Applying a Favicon /Favicon not getting applied
· Make sure the image is a .ico image
· Use the control
<!-- favicon -->
<SharePoint:SPShortcutIcon runat="server"
IconUrl="/Style%20Library/images/favicon.ico"/>
· Make sure to include %20 symbol instead of blank
spaces.
6
Hide ribbon from anonymous view
Use security trimmed control. Refer

http://www.topsharepoint.com/hide-the-ribbon-from-anonymous-users for
further information.
7
How to move controls, HTML links into the ribbon’s blue bar beside the
welcome/login control in SharePoint 2010 master page.
Move the contents into the
<div class="s4-trc-container-menu">
“Your Content”
“Welcome Controls etc”
</div>
8
Planning the navigation for the site
Global navigation (AKA top navigation):
Generally the top nav is to be included in the master page in a majority of the
cases.
Current navigation (AKA Left navigation)
The current navigation may be included in the master page or within the page
layout
9
Customizing items displayed in navigation area using browser site settings menu
Global navigation (AKA top navigation):
To change the items displayed in the global navigation. Go to site
settings->Navigation( Under Look and Feel section), here modify the items such
as options of whether subsite to be displayed, subsite limit, adding manual
links to global nav etc.
Current navigation (AKA Left navigation)
Same as above.
10
How to include quiclaunch/left navigation in page layout
Use the below control in the page layout to obtain the desired result:

<SharePointWebControls:AspMenu ID="currentNav"
StaticDisplayLevels="2" MaximumDynamicDisplayLevels="0" StaticSubMenuIndent="0"
SkipLinkText=""
ItemWrap="True" StaticEnableDefaultPopOutImage="false"
DynamicEnableDefaultPopOutImage="false"
DataSourceID="currentNavDS" CssClass="currentNav" runat="server">
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="currentNavHeader"/>
<asp:MenuItemStyle CssClass="currentNavItem"/>
</LevelMenuItemStyles>
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="currentNavHeaderMenu"/>
<asp:SubMenuStyle CssClass="currentNavItemMenu"/>
</LevelSubMenuStyles>
<LevelSelectedStyles>
<asp:MenuItemStyle CssClass="currentNavHeaderActive"/>
<asp:MenuItemStyle CssClass="currentNavItemActive"/>
</LevelSelectedStyles>
</SharePointWebControls:AspMenu> <PublishingNavigation:PortalSiteMapDataSource
ID="currentNavDS" SiteMapProvider="CurrentNavSiteMapProvider"
StartFromCurrentNode="true"
ShowStartingNode="false" TrimNonCurrentTypes="Heading" runat="server"/>
<!-- ================================= Left Nav Bar Ends
Here =========================== -->
11
How to remove the social links tags, I like it from the master page
Set the visibilty of the control shown below to false:
<SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm"
runat="server" Visible="false" /> in the master page.
12
To remove page title from master page ( The one in the master page not the one
that appears on the browser)
Set the visibilty of the control shown below to false:
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" Visible="false" />
In the master page.
13
Two scroll bar for anonymous user in custom master page
Remove the id=”s4-workspace” from the custom master page.
14
How to add the breadcrumb control in customized starter master page
Place the control below in a div with styling
<asp:SiteMapPath runat="server" SiteMapProviders=
"SPSiteMapProvider,SPXmlContentMapProvider" RenderCurrentNodeAsLink="false" NodeStyle-CssClass="breadcrumbNode"

CurrentNodeStyle-CssClass="breadcrumbCurrentNode" RootNodeStyle-CssClass="breadcrumbRootNode" HideInteriorRootNodes="true"
SkipLinkText=""/>
15
document.getElementById() is null or not an object error in SharePoint site
Do not comment out any of the important placeholders in the SharePoint master
page, especially the search placeholder.Use the css property display:none to
hide any of the divs and make the placeholder to visible:none.
Branding Search in SharePoint
2010
16
Customizing search site for intranet site
Use minimal.master as a starting point or use V4 master page. Note that the search results as displayed in the breadcrumb control. Therefore
place the breadcrumb control appropriately in the master page to obtain the
desired result.
(Important Note: The above method is
to be used only when the master page of the default search site collection needs
to be modified. You may alternately consider the method shown below as well)
17
Customizing search for internet sites (Public facing sites)
Create a custom search page and make the appropriate change in Central admin.
Note that you may use any page layout once the search site is made. Also, The
master page applied to the search site.
18
Changing the search icon with custom image
Use the link given below
Load the custom search image into any of sharepoint images library and refer it
in the styles prescribed in the blog post link above.
Branding the Content Query web
part in SharePoint 2010
19
Content/ Some fields, of a list in content query web part not visible to
anonymous users
Publish the ItemStyles.xsl file after
checking it in to make it available to other users (including anonymous users).
20
Getting junk values such as below
<div class="ExternalClass65A1E736"><p><span
class="Apple-style-span"
style="text-transform:none;text-indent:0px;border-collapse:separate;font:medium
&quot;times new
roman&quot;;white-space:normal;letter-spacing:normal;word-spacing:0px"><span
class="Apple-style-span"
style="text-align:left;border-collapse:collapse;font-family:verdana;font-size:11px">SharePoint
Foundation 2010 has changed the way themes work, making them easier to
customize. You can import Microsoft PowerPoint 2010 themes directly into
SharePoint Foundation 2010</span></span>
</p></div>
Use the bolded code line
<xsl:value-of select="@Description" disable-output-escaping="yes"/>
21
Need to display date created or modified of a document or list in CQWP.
Attach the following bolded lines to the itemstyle.xsl at the top
<xsl:stylesheet
version="1.0"
exclude-result-prefixes="x d xsl msxsl cmswrt"
xmlns:x="http://www.w3.org/2001/XMLSchema"
xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
xmlns:ddwrt=

"http://schemas.microsoft.com/
WebParts/v2/DataView/runtime"
xmlns:cmswrt=
"http://schemas.microsoft.com/
WebParts/v3/Publishing/runtime"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt">
Add the following code to display date created
<xsl:value-of select="ddwrt:FormatDate(@Modified, 1033, 1)" />
You may use @Created instead of @modified to display the date the item was
created.


22
To show the web part title typed under the appearance section of the CQWP in
edit web part mode using itemstyle.xsl
Use
<xsl:value-of select="$FeedTitle"></xsl:value-of>