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