Search This Blog

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>