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.