I recently wanted to display data from a Web Service on a page in SharePoint using XSL. The Web Service was external to SharePoint, which resulted in the Data View web Part being unable to obtain a valid result required to allow the XSL template to be built using features of SharePoint Designer. A separate issue was that the method used to query the web service hosted on my external server consumed resources on the external application and took around 5 seconds to receive a response from the query. Using a Data View web part connected directly to the Web Service to display the result would require that the data is obtained every time the page loads, impacting on server performance.
Showing posts with label XSL. Show all posts
Showing posts with label XSL. Show all posts
Saturday, July 7, 2012
Saturday, March 19, 2011
Dynamic List Filter Menu Using Data View Grouping
This article explains how to create a dynamic filter menu for content in SharePoint. Methods from the article SharePoint: List Distinct (unique) values from a specific column in a list are used to obtain unique values from a specific column in a SharePoint list to be displayed as each menu item. When an filter option from the menu is selected, content on the page will be filtered based on the selection.
For a single menu displaying filter options dynamically, you only need to associate the menu with one column from the main list. When an option is selected, the browser is redirected to the same page with a query string parameter set to the selected filter parameter using JavaScript. The main list on the page is then configured to filter contents based on the parameter.
Components:
Usage:
JavaScript Reference:
The “How To” instructions below refer to JavaScript functions used for Query String Manipulation. To view details about the functions referred to below, as well as other functions for hyperlink/query string manipulation, see:
Query String Manipulation using JavaScript
- Add Query String Parameter using JavaScript - addParameter()
How To:
If there are no existing parameters on the current page url, the easiest method to configure a hyperlink to add a Query String Parameter to the current page is to set the href attribute to the following:
<a href="?main={$fieldvalue}"><xsl:value-of select="$fieldvalue" /></a>
Using the above (simple) method will replace any existing parameters in the current url with the new parameter and value. For a single dimensional menu, using this method to add Query String parameter and value to use as filter criteria on other Web Part s on the page would be fine. For multi dimensional menus (main and sub menu), you may need to retain the parameter in the Query String that determines which main/primary heading when adding the sub-heading filter parameter. In this case, JavaScript can be used to add the new parameter to the existing Query String. Using JavaScript to manipulate the query string is a better method to use in either case as existing parameters will always be retain, but would obviously require that JavaScript be enabled on client browsers.
More Resources for SharePoint Development & Customisation:
For a single menu displaying filter options dynamically, you only need to associate the menu with one column from the main list. When an option is selected, the browser is redirected to the same page with a query string parameter set to the selected filter parameter using JavaScript. The main list on the page is then configured to filter contents based on the parameter.
Components:
- Document Library with custom column "Heading"
- One Web Part page with the following components:
- Data View Web Part displaying the actual documents in the library
- Data View web Part displaying the possible filter options (from the Heading column)
Usage:
- When a filter option is selected from the menu Data View, the browser will be sent to the current page with the selected option included as a Query String Parameter (using link or JS).
- The main Data View web part would be configured with a custom parameter obtained from the Query String. The custom parameter would be used as filter criteria for the Data View. The result is that when an option from the dynamic menu is selected, the documents listed in the main Data View will be dynamically filtered based on the selected option.
JavaScript Reference:
The “How To” instructions below refer to JavaScript functions used for Query String Manipulation. To view details about the functions referred to below, as well as other functions for hyperlink/query string manipulation, see:
Query String Manipulation using JavaScript
- Add Query String Parameter using JavaScript - addParameter()
How To:
- Create a new Document Library, or use and existing one if required.
- Add a custom column to the library (or content type if using custom content types). In this example the column will have the title “Heading”, and will be used to list menu options, but it can have any title as required.
- From the view menu of the document library or the setting page, select the “Create view” option to add a new view.
- When viewing the newly created View page, select the “Edit in SharePoint Designer” from the file menu, or manually open the site and page for editing in SharePoint Designer.
- Add a second instance of the same Document Library Web Part to the page above the existing. Set the crome state to None in the Appearance section if required.
- Right click on the new Web Part and select Convert to Data View option.
- Once a Data View Web Part, open the Sort and Group dialog, and add criteria to group the list by the “Heading” column.
- In the design pane of the page, right click on one of the listed items (documents) and remove the row from the table. This will remove all list items resulting in only the groups remaining. Remove additional functionality from the groups, such as the expand, contract button/link or css styles.
- Format the group value as a hyperlink, with “#” as the value for the href attribute.
- Add an “onclick” attribute, with a call to the addParameter() JavaScript function. The value of the selected filter option and the parameter name is passed to the JavaScript function which adds the parameter to the current url using a redirect.
If there are no existing parameters on the current page url, the easiest method to configure a hyperlink to add a Query String Parameter to the current page is to set the href attribute to the following:
<a href="?main={$fieldvalue}"><xsl:value-of select="$fieldvalue" /></a>
Using the above (simple) method will replace any existing parameters in the current url with the new parameter and value. For a single dimensional menu, using this method to add Query String parameter and value to use as filter criteria on other Web Part s on the page would be fine. For multi dimensional menus (main and sub menu), you may need to retain the parameter in the Query String that determines which main/primary heading when adding the sub-heading filter parameter. In this case, JavaScript can be used to add the new parameter to the existing Query String. Using JavaScript to manipulate the query string is a better method to use in either case as existing parameters will always be retain, but would obviously require that JavaScript be enabled on client browsers.
More Resources for SharePoint Development & Customisation:
Monday, March 14, 2011
SharePoint: List Distinct (unique) values from a specific column in a list
The following describes two methods to list distinct/unique values from a specific column in a SharePoint list. An example where this may be useful is a menu system providing filter options for items in a list, using only values that are being used at the time.
Display Unique Values using Data View Grouping (No Code):
Obtaining a distinct/unique list of values from a specific column in a SharePoint list can be achieved easily using a Data View Web Part, and by applying sort and group criteria to group items. When grouping (group by) criteria of a Data View web part has been provided, the result is a distinct (unique) list of values from the particular column in the list that will be displayed as group headings. Once the Data View is listing items grouped by the specified column, you can manually modify (remove cells/rows) the XSL template used to display the table to remove the actual list items from under each group (use Design mode in SPD to easily manipulate the default table layout).
The resulting Data View will list the group names (no items listed), which will be each unique value found in the specified column across all list items in the list. Using the grouping functionality will ensure that only unique values are returned, as long as you sort by the same field to ensure that items are grouped correctly. Once you have the list of group headings you can then modify the values displayed to be formatted as hyperlink or another control. I typically use hyperlinks or buttons with calls to JavaScript functions that add Query String parameters to the current url.
Display Unique Values using XSL:
Selecting a list of unique values in a column that contains multiple instances of the same value can also be achieved using an XSL template and the “following” operator. The following was achieved with the help of this article: http://www.bernzilla.com/item.php?id=333 , and displays a unique list of values from the Title column of items in the list.
<xsl:template match="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:asp="http://schemas.microsoft.com/ASPNET/20">
Implementation Examples:
There are numerous circumstances where you need a distinct list of values from a specific column in a list, across all items. A common scenario may be a dynamic menu system, that provides filter options for content on a page based on existing values in a particular column.
Implementing a dynamic menu system using this technique would involve selecting one or more columns from the main list in SharePoint to be used when listing filter options dynamically. The menu should list all unique values from a specific field in the list, and be formatted in a way that allows the page to respond to a selection by filtering content.
The simplest form of this would be a dynamic filter menu displaying options from one field in a list. When an option is selected, the content on the page (from the associated list) is filtered based on the selected option. Creating a multi-dimension menu to filter using multiple columns is also achievable using this technique, where a sub-menu would also exist on the page. In this case, when an option is selected from the main menu, the sub-menu options are changed (filtered) to show options relevant to the main menu selection. Once an option is then selected from the sub-menu, the list or library on the page is then filtered using both fields.
More SharePoint Designer Training & Tutorials at SPDTraining.com
Display Unique Values using Data View Grouping (No Code):
Obtaining a distinct/unique list of values from a specific column in a SharePoint list can be achieved easily using a Data View Web Part, and by applying sort and group criteria to group items. When grouping (group by) criteria of a Data View web part has been provided, the result is a distinct (unique) list of values from the particular column in the list that will be displayed as group headings. Once the Data View is listing items grouped by the specified column, you can manually modify (remove cells/rows) the XSL template used to display the table to remove the actual list items from under each group (use Design mode in SPD to easily manipulate the default table layout).
The resulting Data View will list the group names (no items listed), which will be each unique value found in the specified column across all list items in the list. Using the grouping functionality will ensure that only unique values are returned, as long as you sort by the same field to ensure that items are grouped correctly. Once you have the list of group headings you can then modify the values displayed to be formatted as hyperlink or another control. I typically use hyperlinks or buttons with calls to JavaScript functions that add Query String parameters to the current url.
Display Unique Values using XSL:
Selecting a list of unique values in a column that contains multiple instances of the same value can also be achieved using an XSL template and the “following” operator. The following was achieved with the help of this article: http://www.bernzilla.com/item.php?id=333 , and displays a unique list of values from the Title column of items in the list.
<xsl:template match="/" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:asp="http://schemas.microsoft.com/ASPNET/20">
<xsl:variable name="unique-list" select="/dsQueryResponse/Rows/Row[not(@Title=following::Row/@Title)]" />
<xsl:for-each select="$unique-list">
<xsl:value-of select="@Title" />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Implementation Examples:
There are numerous circumstances where you need a distinct list of values from a specific column in a list, across all items. A common scenario may be a dynamic menu system, that provides filter options for content on a page based on existing values in a particular column.
Implementing a dynamic menu system using this technique would involve selecting one or more columns from the main list in SharePoint to be used when listing filter options dynamically. The menu should list all unique values from a specific field in the list, and be formatted in a way that allows the page to respond to a selection by filtering content.
The simplest form of this would be a dynamic filter menu displaying options from one field in a list. When an option is selected, the content on the page (from the associated list) is filtered based on the selected option. Creating a multi-dimension menu to filter using multiple columns is also achievable using this technique, where a sub-menu would also exist on the page. In this case, when an option is selected from the main menu, the sub-menu options are changed (filtered) to show options relevant to the main menu selection. Once an option is then selected from the sub-menu, the list or library on the page is then filtered using both fields.
More SharePoint Designer Training & Tutorials at SPDTraining.com
Sunday, July 11, 2010
Customise Table of Contents Web Part CSS Styles (TOCWP) MOSS 2007 - Page 2
The following is Page 2 of a two page article relating to modifying the styles of the Table of Contents web Part (TOCWP) for SharePoint.
Go to PAGE 1 of Customise Table of Contents Web Part CSS Styles (TOCWP) MOSS 2007.
Contents:
Page 1
Article Overview
1. Table of Contents Web Part Configuration
2. Using Background Images in Style Classes
3. Override default CSS classes used by a TOCWP
3.1 Overriding Default Classes
3.2 Applying the New Style Classes to Override the Default
Page 2
4. Replacing CSS Classes
5. Related Articles1. Table of Contents Web Part Configuration
2. Using Background Images in Style Classes
3. Override default CSS classes used by a TOCWP
3.1 Overriding Default Classes
3.2 Applying the New Style Classes to Override the Default
Page 2
4. Replacing CSS Classes
4. Replacing CSS Classes
This section explains how to create and apply new styles to specific presentation options for a Table of Contents Web Part. Once the new classes have been created, you need to also follow the steps later in this section relating to modifying classes via the default XSL stylesheets. The new classes will need to be included in the XSL templates used by TOC Web Parts for the site collection for the changes to be applied. Using this method would also allow you to differentiate the styles between the "Vertical with Boxed Title" and "Horizontal With Boxed Title" level presentation options, and any others if required. The replaced styles will affect all TOCWP in the site collection, so a high level of caution should be maintained.
4.1 Create new Style Classes
Firstly, I created a new CSS class for the Vertical with Boxed Title elements. For the purpose of this exercise, I have named the new class "level-band-new", which replaces the "level-band" class used when displaying the TOC Web Part to format the Vertical Boxed Title Cell. If you would like to modify the title text only, creating a class to replace the "headertitle-band" class should also work ("headertitle-band-new" example below). I have used the same styles used in earlier sections of this article relating to overriding default styles, with updated class names.
The steps below apply to a Table of Contents web Part that is configured as specified in Part 1 of this article. Please ensure that you have followed the steps to allow the new styles to be applied from the examples. Different classes and XSL templates (most likely within LevelStyle.xsl) will need to be modified to allow styles to be replaced for prosentation options other than the following, which are also explained in part 1.
1.3 Apply "Presentation" Settings
- Header Style: Default
- Display Columns: 3
- Level 1 Style: Vertical with boxed title
- Level 2 Style: Vertical with large title
- Level 3 Style: Vertical with small title
New Style Classes:
- .level-band-new : Container for Title Text
- .headertitle-band-new : Class for title Text (Boxed Title)
- .headertitle-band-new a : Class for A tag within Title Text
- .headertitle-large-new : Class for title text (Large Title)
- .headertitle-small-new : Class for Small Title text
- .level-bullet-new : Class for Bulleted text (pages)
Image Set:
The following classes replace the default classes, and includes background images and layout attributes required to position and align elements. The styles and images have been configured to allow the width of a heading and other elements in a TOCWP to be dynamic, re-sizing as required to fit the page size.
Download the TOCWP Style sheets & Image Set
New Styles:
| Original Class Name | New Class Name | Styles |
| .level-band | .level-band-new | .level-band-new { background-image: url('button63685311_mid.PNG'); background-repeat: repeat-x; background-color:#FFFFFF; width: 100%; height: 34px; padding-left: 0px; padding-top: 0px; color: #FFFFFF; margin:0px; } |
| .headertitle-band | .headertitle-band-new | .headertitle-band-new { color:#FFFFFF !important; background-image: url('button63685311_left.PNG'); background-repeat: no-repeat; width: 100%; height: 34px; padding-left: 20px; padding-top: 6px; margin:0px; } |
| .headertitle-band a | .headertitle-band-new a | .headertitle-band-new a { color:#FFFFFF !important; background-image: url('button63685311_right.PNG'); background-repeat: no-repeat; background-position: right top; border: 0; width: 100%; height: 34px; padding-right: 0px; padding-bottom:0px; padding-top: 6px; margin:0px; margin-top:-6px; } |
| .headertitle-large | .headertitle-large-new | .headertitle-large-new { width: 100%; padding: 6px; background-image: url('LargeTitleFade.jpg'); background-repeat: repeat-x; background-position: left top; border-bottom-color: #D5E9FF; } |
| .headertitle-small | .headertitle-small-new | .headertitle-small-new { background-image: url('arrow.jpg'); background-repeat: no-repeat; height: 15px; padding-left: 34px; padding-top: 1px; padding-bottom: 2px; width: 100%; border-bottom:1px #BFDFFF dotted; } |
| .level-bullet | .level-bullet-new | .level-bullet-new { margin-left: 34px; padding-left:14px; list-style-type: none !important; background-image: url('page-icon.jpg'); background-repeat: no-repeat; } |
Apply the new Styles to make Available for Use by the TOCWP
There are a number of methods that can be used to apply additional styles to pages on SharePoint containing a TOCWP. Each require you to include the CSS classes into the page by doing one of the following:
- Setting a stylesheet with the new styles as the stylessheet for the SharePoint Site
- Including into an existing stylesheet which is already included used by SharePoint sites/pages, but not core.css.
- Including directly into the page containing the TOCWP.
Each of the above methods are explained in more detail, including instructions for implementation in Part 3.2 Applying the New Style Classes to Override the Default.
4.2 Customise the (default) XSL Style Sheet to the TOCWP
I was unsuccessful when attempting to apply a custom set of XSL stylesheets
to a specific TOC Web Part on a page. If anyone knows how to do this, I would
be very interested to find out the process. My attempt was update the link to
the stylesheets included in the TOC Web Part by default, to point to my
customised version of each stylesheet. I found that this had no affect on the
styles of the TOC Web Part, and needed to modify the default stylesheets for the
changes to be applied. I also found that removing the "<xsl:import href=... "
elements from inside the "<xsl:stylesheet"
element within the TOCWP altogether didn't stop the Web Part from working, which
I assume is why attempting to import alternate stylesheets into the Web Part was
unsuccessful.
to a specific TOC Web Part on a page. If anyone knows how to do this, I would
be very interested to find out the process. My attempt was update the link to
the stylesheets included in the TOC Web Part by default, to point to my
customised version of each stylesheet. I found that this had no affect on the
styles of the TOC Web Part, and needed to modify the default stylesheets for the
changes to be applied. I also found that removing the "<xsl:import href=... "
elements from inside the "<xsl:stylesheet"
element within the TOCWP altogether didn't stop the Web Part from working, which
I assume is why attempting to import alternate stylesheets into the Web Part was
unsuccessful.
The following processes allowed me to customise the default styles for the Table Of Contents Web Part, however the new style classes are then applied to all TOC Web Parts accross the site collection.
4.2.1 Locate the default TOCWP XSL Stylesheets
4.2.1 Locate the default TOCWP XSL Stylesheets
The XSL stylesheets associated with the Table of Contents Web Part are generally located in the following library of a SharePoint (MOSS) site collection:
- http://sitecollectionurl/Style Library/XSL Style Sheets/Header.xsl
- http://sitecollectionurl/Style Library/XSL Style Sheets/LevelStyle.xsl
- http://sitecollectionurl/Style Library/XSL Style Sheets/TableOfContentsMain.xsl
The main Style sheet I needed to work with was the LevelStyle.xsl sheet, which contains the template html and style classes for the various level types used by the TOCWP. For the purpose of this exercise, I customised the default "Vertical with boxed title", "Vertical with large title" and "Vertical with small title" presentation options by replacing the default styles defined in the XSL style sheet, with the new style classses from the table above.
4.2.2 Replacing Default CSS Classes in LevelStyle.xsl
VerticalBoxedTitle: (approx. line 41)
VerticalLargeTitle:(approx. line 73)
VerticalSmallTitle:(approx. line 105)
Once the modified XSL Style Sheet has been applied, Table of Contents web Parts accross the site collection will be rendered using the new classes. You need to ensure that the CSS styles are available to each TOCWP by included in the page using one of the method described earlier in the article.
VerticalBoxedTitle: (approx. line 41)
- find: <div class="level-band">
- replace with: <div class="level-band-new">
- Find: <span id="header" class="headertitle-band">
- Replace with: <span id="header" class="headertitle-band-new">
- Find (within VerticalBoxedTitle): <div class="level-item-pos level-item
level-bullet"> - Replace with: <div class="level-item-pos level-item level-bullet-new">
VerticalLargeTitle:(approx. line 73)
- Find: <span id="header" class="headertitle-large">
- Replace with: <span id="header" class="headertitle-large-new">
- Find (within VerticalLargeTitle): <div class="level-item-pos
level-item level-bullet"> - Replace with: <div class="level-item-pos level-item
level-bullet-new">
VerticalSmallTitle:(approx. line 105)
- Find: <span id="header" class="headertitle-small">
- Replace with: <span id="header" class="headertitle-small-new">
- Find (within VerticalSmallTitle): <div class="level-item-pos
level-item level-bullet"> - Replace with: <div class="level-item-pos level-item
level-bullet-new">
Once the modified XSL Style Sheet has been applied, Table of Contents web Parts accross the site collection will be rendered using the new classes. You need to ensure that the CSS styles are available to each TOCWP by included in the page using one of the method described earlier in the article.
5. Related:
Page 1: Customise Table of Contents Web Part CSS Styles (TOCWP) MOSS 2007Customise Table of Contents Web Part CSS Styles (TOCWP) MOSS 2007 - Page 1
The following explains (with examples), how to modify the Table of Contents Web Part (TOCWP) using CSS to display content from a SharePoint site and sub-sites based on the site navigation with a custom appearance. This allows content to be displayed dynamically by the web part based on the current site and any sub-site navigation and content without using Data Views or having to maintain link lists or similar.
There are a number of methods that can be used to customise the layout of the Table of Contents Web Part. Some methods will result in the new styles being applied to every TOCWP across the entire site collection, where others allow you to customise the styles for a specific TOCWP on only one, or a selection of pages. The first method that I use is to override the default style classes for the TOCWP. This allows flexibility with the application of the new styles, as the new style classes that override the default can be place in a global style sheet, or on a page containing a Table of Contents Web Part.
Before making changes to SharePoint's default styles (or any core configuration for that matter), you should ensure that the environment is backed up appropriately. Changes to core functionality and styles should always be completed and testing in a non-production environment prior to applying to live environment.
Contents:
Page 1
1. Table of Contents Web Part Configuration
The following is the specific configuration for the Table of Contents Web Part that will display using the customised styles. The following steps will provide the required configuration for the new styles in this example to be successfully applied. These settings can vary, but may produce results other than the output of this example.
1.1 Load the web Part Properties Pane, Set the "Start From" value
I have set the "Start From" address to a SharePoint site with a number of example sub sites and some customisation of the site-level navigation. You will need to set this to the address for the SharePoint site you with to display content from dynamically.
1.2 Apply "Content" Settings
1.3 Apply "Presentation" Settings
1.4 Apply "Organization" Settings
If you are replacing or overriding the default styles for the TOC Web Part and want to include a background image, you need to ensure that the image address will be correct for all TOCWPs using the new styles. This can be achieved using relative urls from a stylesheet, where the image url is relative to the location of the style sheet. Alternatively, you could use the full url including the host name which will work as long as the SharePoint environment is accessed by all users using the same hostname. You can also use everything in the address after the hostname from the root of the site collection: "/graphics/toc-level-bg.jpg" which will also work if you are using AAM (Alternate Access mappings).
To obtain the correct element name/IDs and styles used by the Table of Contents Web Part, I used the default XSL templates used to format TOC Web Parts. I then applied CSS styles that override or replace the default styles for each of the required elements. The default XSL style sheets for TOCWPs can be found in the following location: "http:///Style Library/XSL Style Sheets/LevelStyle.xsl"
The following table provides a list of the styles used for each of the presentation options available when configuring a TOCWP. Note that some CSS classes are used by multiple presentation options.
All Table of Contents Web Parts are contained within a table with the ID "tocwp" and the class "toc-layout-main".
Adding new Presentation layouts for the Table of Contents Web Part:
If you would like the default presentation layouts for Table of Contents web parts accross a site collection to remain unchanged, but need to customise the styles of one or more TOC Web Parts, you can add additional presentation layouts. For details, see PANVEGA's post: Customizing Styles of Table of Contents WebPart (TOC).
In the examples below, I replace the default styles for the "Vertical with boxed title", "Vertical with large title" and "Vertical with small title" presentation option with a new styles including a background image, and the standard vertical list items of the TOC second level. Overriding default styles allows your to customise a TOCWP on a specific page, and not all across the entire site collection.
I chose the "Vertical with boxed title" option, as the CSS classes used to format this presentation option differ from more of the classes used by other presentation options. This meant that if overriding classes, the default XSL style sheet won't have to be edited to allow new styles to be applied without affecting other presentation options (Vertical/horizontal with large/small title). To modify the styles of presentation options other than Vertical with boxed title, you may need to create new style classes that are not currently in use, then replace the classes used by default via the XSL style sheet used by a TOCWP (See Part 3 of this article below).
3.1 Overriding Default Classes
The CSS styles used by a TOC Web Part can be customised by overriding the default style classes used by the Web Part. If overriding classes used to format a Table of Contents Web Part, the changes can be applied without modifying the XSL style sheets used to display the TOC data. To override an existing CSS class, you must rewrite using the same class name, then include the new styles or stylesheet link in the page after the default stylesheet has been loaded. Styles placed in the head section of a page should override default style sheets due to the cascading nature of CSS.
For the "Vertical with boxed title" option, the "level-band" class is used by the DIV container for the title text. Overriding this class in a style sheet used across the site collection will result in all TOC Web Parts displaying the custom styles for both the "Vertical with Boxed Title" and "Horizontal with Boxed Title" as they both share the same style classes.
Adding the styles directly to the page will allow you to override the styles of a single TOC Web Part on a specific page.
Override both "Vertical with Boxed Title" and "Horizontal with Boxed Title"
The following example classes will override the default classes used for the Vertical/Horizontal with boxed title layouts if included in the page appropriately. The names of the classes being overwritten are as follows. CSS properties are provided for each classs to format the TOCWP as shown in this example. The image set and stylesheet is also available for download below:
Style Classes:
Image Set:
The following classes replace the default classes, and includes background images and layout attributes required to position and align elements. The styles and images have been configured to allow the width of a heading and other elements in a TOCWP to be dynamic, re-sizing as required to fit the page size.
Download the TOCWP Style sheets & Image Set
Styles:
.level-band {
background-image: url('button63685311_mid.PNG');
background-repeat: repeat-x;
background-color:#FFFFFF;
width: 100%;
height: 34px;
padding-left: 0px;
padding-top: 0px;
color: #FFFFFF;
margin:0px;
}
.headertitle-band
{
color:#FFFFFF !important;
background-image: url('button63685311_left.PNG');
background-repeat: no-repeat;
width: 100%;
height: 34px;
padding-left: 20px;
padding-top: 6px;
margin:0px;
}
.headertitle-band a
{
color:#FFFFFF !important;
background-image: url('button63685311_right.PNG');
background-repeat: no-repeat;
background-position: right top;
border: 0;
width: 100%;
height: 34px;
padding-right: 0px;
padding-bottom:0px;
padding-top: 6px;
margin:0px;
margin-top:-6px;
}
.headertitle-large
{
width: 100%;
padding: 6px;
background-image: url('LargeTitleFade.jpg');
background-repeat: repeat-x;
background-position: left top;
border-bottom-color: #D5E9FF;
}
.headertitle-small
{
background-image: url('arrow.jpg');
background-repeat: no-repeat;
height: 15px;
padding-left: 34px;
padding-top: 1px;
padding-bottom: 2px;
width: 100%;
border-bottom:1px #BFDFFF dotted;
}
.level-bullet {
margin-left: 34px;
padding-left:14px;
list-style-type: none !important;
background-image: url('page-icon.jpg');
background-repeat: no-repeat;
}
3.2 Applying the New Style Classes to Override the Default
If overriding the default styles, you need to make sure the styles are on the page with the TOC Web Part, in a Style Sheet which is loaded after the the SharePoint core.css file. You could also modify the styles in the default class in the core.css file, but making changes to the core.css style sheet in my opinion is not good practice. You should always at least create a new stylesheet and copy styles from core.css across that are to be overridden.
3.2.1 Applying to an existing (global) style sheet
A style sheet separate to the default core.css may be used to apply company styles and branding to sites and pages in the site collection. As configurations similar to this generally override default classes from the core.css stylesheet, adding new classes to override default TOCWP styles can be placed in the secondary style sheet. Alternatively, you could include the styles in a new style sheet, then import into the existing style sheet that is separate to core.css. Using this method will result in all TOC Web Parts across the site collection being rendered with the updated styles.
If you are not using a separate global stylesheet for company branding, you could place the updated CSS classes into a new style sheet then set the new style sheet as the style sheet for a SharePoint Site via the site's Master Page settings.
Note: If changing the style sheet used by a SharePoint site, you need to ensure that the new style sheet imports style sheets containing styles for company branding, or any that may have been used in the previous style sheet if it was not the default stylesheet. Any styles which have not been overridden in the new style sheet will default to the style classes in core.css.
3.2.2 Applying directly to a page in SharePoint
The new styles can be applied directly to a page with a TOCWP, allowing the styles to override the default core.css classes. Styles can be included in a page with a TOCWP by importing the stylesheet when editing the page with Sharepoint Designer, or by including the classes in a style tag in the head section of the rendered page.
Attach a new or additional stylesheet to a page using SharePoint Designer:
Manage Styles (Sharepoint Designer)
Apply to the head section of the rendered page:
This will create a new <asp:Content... tag ( <asp:Content
ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> ) with a
<style.. > element containing the new style class. If there are already CSS
styles defined in an existing "PlaceHolderAdditionalPageHead" element,
SharePoint Design (SPD) may add the new styles to this instead of a new
element. Alternatively, you can add the element and style tag to the page
yourself:
View Page 2 of this article for XSL Style Sheet and CSS Class manupulation for Table of Contents Web Parts:
There are a number of methods that can be used to customise the layout of the Table of Contents Web Part. Some methods will result in the new styles being applied to every TOCWP across the entire site collection, where others allow you to customise the styles for a specific TOCWP on only one, or a selection of pages. The first method that I use is to override the default style classes for the TOCWP. This allows flexibility with the application of the new styles, as the new style classes that override the default can be place in a global style sheet, or on a page containing a Table of Contents Web Part.
Before making changes to SharePoint's default styles (or any core configuration for that matter), you should ensure that the environment is backed up appropriately. Changes to core functionality and styles should always be completed and testing in a non-production environment prior to applying to live environment.
Contents:
Page 1
Article Overview
1. Table of Contents Web Part Configuration
2. Using Background Images in Style Classes
3. Override default CSS classes used by a TOCWP
3.1 Overriding Default Classes
3.2 Applying the New Style Classes to Override the Default
Page 2
4. Replacing CSS Classes
5. Related Articles1. Table of Contents Web Part Configuration
2. Using Background Images in Style Classes
3. Override default CSS classes used by a TOCWP
3.1 Overriding Default Classes
3.2 Applying the New Style Classes to Override the Default
Page 2
4. Replacing CSS Classes
1. Table of Contents Web Part Configuration
The following is the specific configuration for the Table of Contents Web Part that will display using the customised styles. The following steps will provide the required configuration for the new styles in this example to be successfully applied. These settings can vary, but may produce results other than the output of this example.
1.1 Load the web Part Properties Pane, Set the "Start From" value
I have set the "Start From" address to a SharePoint site with a number of example sub sites and some customisation of the site-level navigation. You will need to set this to the address for the SharePoint site you with to display content from dynamically.
1.2 Apply "Content" Settings
- Show 3 Levels of Content (Checked)
- Don't Show content from Starting location (Unchecked)
- Show Pages (Checked)
- Don't Show Hidden Pages/Sites (Unchecked)
1.3 Apply "Presentation" Settings
- Header Style: Default
- Display Columns: 3
- Level 1 Style: Vertical with boxed title
- Level 2 Style: Vertical with large title
- Level 3 Style: Vertical with small title
1.4 Apply "Organization" Settings
- Sort contents as sorted in navigation
2. Using Background Images in Style Classes
If you are replacing or overriding the default styles for the TOC Web Part and want to include a background image, you need to ensure that the image address will be correct for all TOCWPs using the new styles. This can be achieved using relative urls from a stylesheet, where the image url is relative to the location of the style sheet. Alternatively, you could use the full url including the host name which will work as long as the SharePoint environment is accessed by all users using the same hostname. You can also use everything in the address after the hostname from the root of the site collection: "/graphics/toc-level-bg.jpg" which will also work if you are using AAM (Alternate Access mappings).
3. Customise by overriding CSS styles used on a page with a TOCWP
In this section, the default style classes are overridden with new CSS properties.To obtain the correct element name/IDs and styles used by the Table of Contents Web Part, I used the default XSL templates used to format TOC Web Parts. I then applied CSS styles that override or replace the default styles for each of the required elements. The default XSL style sheets for TOCWPs can be found in the following location: "http://
The following table provides a list of the styles used for each of the presentation options available when configuring a TOCWP. Note that some CSS classes are used by multiple presentation options.
| Presentation Label | Outer Container (div) CSS Class Name | Text Container (div) CSS Class Name | Text Class (span) CSS Class Name |
| Vertical | .level-section | .level-header | .headertitle |
| Vertical with boxed title | .level-section | .level-band | .headertitle-band |
| Vertical with large title | .level-section | .level-header | .headertitle-large |
| Vertical with small title | .level-section | .level-header | .headertitle-small |
| Vertical with descriptions | .level-section | .level-header | .headertitle |
| Horizontal | .level-section | .level-header | .headertitle |
| Horizontal with boxed title | .level-section | .level-band | .headertitle-band |
| Horizontal with large title | .level-section | .level-header | .headertitle-large |
| Horizontal with small title | .level-section | .level-header | .headertitle-small |
All Table of Contents Web Parts are contained within a table with the ID "tocwp" and the class "toc-layout-main".
Adding new Presentation layouts for the Table of Contents Web Part:
If you would like the default presentation layouts for Table of Contents web parts accross a site collection to remain unchanged, but need to customise the styles of one or more TOC Web Parts, you can add additional presentation layouts. For details, see PANVEGA's post: Customizing Styles of Table of Contents WebPart (TOC).
In the examples below, I replace the default styles for the "Vertical with boxed title", "Vertical with large title" and "Vertical with small title" presentation option with a new styles including a background image, and the standard vertical list items of the TOC second level. Overriding default styles allows your to customise a TOCWP on a specific page, and not all across the entire site collection.
I chose the "Vertical with boxed title" option, as the CSS classes used to format this presentation option differ from more of the classes used by other presentation options. This meant that if overriding classes, the default XSL style sheet won't have to be edited to allow new styles to be applied without affecting other presentation options (Vertical/horizontal with large/small title). To modify the styles of presentation options other than Vertical with boxed title, you may need to create new style classes that are not currently in use, then replace the classes used by default via the XSL style sheet used by a TOCWP (See Part 3 of this article below).
3.1 Overriding Default Classes
The CSS styles used by a TOC Web Part can be customised by overriding the default style classes used by the Web Part. If overriding classes used to format a Table of Contents Web Part, the changes can be applied without modifying the XSL style sheets used to display the TOC data. To override an existing CSS class, you must rewrite using the same class name, then include the new styles or stylesheet link in the page after the default stylesheet has been loaded. Styles placed in the head section of a page should override default style sheets due to the cascading nature of CSS.
For the "Vertical with boxed title" option, the "level-band" class is used by the DIV container for the title text. Overriding this class in a style sheet used across the site collection will result in all TOC Web Parts displaying the custom styles for both the "Vertical with Boxed Title" and "Horizontal with Boxed Title" as they both share the same style classes.
Adding the styles directly to the page will allow you to override the styles of a single TOC Web Part on a specific page.
Override both "Vertical with Boxed Title" and "Horizontal with Boxed Title"
The following example classes will override the default classes used for the Vertical/Horizontal with boxed title layouts if included in the page appropriately. The names of the classes being overwritten are as follows. CSS properties are provided for each classs to format the TOCWP as shown in this example. The image set and stylesheet is also available for download below:
Style Classes:
- .level-band : Container for Title Text
- .headertitle-band : Class for title Text (Boxed Title)
- .headertitle-band a : Class for A tag within Title Text
- .headertitle-large : Class for title text (Large Title)
- .headertitle-small : Class for Small Title text
- .level-bullet : Class for Bulleted text (pages)
Image Set:
The following classes replace the default classes, and includes background images and layout attributes required to position and align elements. The styles and images have been configured to allow the width of a heading and other elements in a TOCWP to be dynamic, re-sizing as required to fit the page size.
Download the TOCWP Style sheets & Image Set
Styles:
.level-band {
background-image: url('button63685311_mid.PNG');
background-repeat: repeat-x;
background-color:#FFFFFF;
width: 100%;
height: 34px;
padding-left: 0px;
padding-top: 0px;
color: #FFFFFF;
margin:0px;
}
.headertitle-band
{
color:#FFFFFF !important;
background-image: url('button63685311_left.PNG');
background-repeat: no-repeat;
width: 100%;
height: 34px;
padding-left: 20px;
padding-top: 6px;
margin:0px;
}
.headertitle-band a
{
color:#FFFFFF !important;
background-image: url('button63685311_right.PNG');
background-repeat: no-repeat;
background-position: right top;
border: 0;
width: 100%;
height: 34px;
padding-right: 0px;
padding-bottom:0px;
padding-top: 6px;
margin:0px;
margin-top:-6px;
}
.headertitle-large
{
width: 100%;
padding: 6px;
background-image: url('LargeTitleFade.jpg');
background-repeat: repeat-x;
background-position: left top;
border-bottom-color: #D5E9FF;
}
.headertitle-small
{
background-image: url('arrow.jpg');
background-repeat: no-repeat;
height: 15px;
padding-left: 34px;
padding-top: 1px;
padding-bottom: 2px;
width: 100%;
border-bottom:1px #BFDFFF dotted;
}
.level-bullet {
margin-left: 34px;
padding-left:14px;
list-style-type: none !important;
background-image: url('page-icon.jpg');
background-repeat: no-repeat;
}
3.2 Applying the New Style Classes to Override the Default
If overriding the default styles, you need to make sure the styles are on the page with the TOC Web Part, in a Style Sheet which is loaded after the the SharePoint core.css file. You could also modify the styles in the default class in the core.css file, but making changes to the core.css style sheet in my opinion is not good practice. You should always at least create a new stylesheet and copy styles from core.css across that are to be overridden.
3.2.1 Applying to an existing (global) style sheet
A style sheet separate to the default core.css may be used to apply company styles and branding to sites and pages in the site collection. As configurations similar to this generally override default classes from the core.css stylesheet, adding new classes to override default TOCWP styles can be placed in the secondary style sheet. Alternatively, you could include the styles in a new style sheet, then import into the existing style sheet that is separate to core.css. Using this method will result in all TOC Web Parts across the site collection being rendered with the updated styles.
If you are not using a separate global stylesheet for company branding, you could place the updated CSS classes into a new style sheet then set the new style sheet as the style sheet for a SharePoint Site via the site's Master Page settings.
Note: If changing the style sheet used by a SharePoint site, you need to ensure that the new style sheet imports style sheets containing styles for company branding, or any that may have been used in the previous style sheet if it was not the default stylesheet. Any styles which have not been overridden in the new style sheet will default to the style classes in core.css.
3.2.2 Applying directly to a page in SharePoint
The new styles can be applied directly to a page with a TOCWP, allowing the styles to override the default core.css classes. Styles can be included in a page with a TOCWP by importing the stylesheet when editing the page with Sharepoint Designer, or by including the classes in a style tag in the head section of the rendered page.
Attach a new or additional stylesheet to a page using SharePoint Designer:
- Open the "Manage Styles" pane (from the "Task Panes" menu).
- Click the "Attach Style Sheet..." link
- Browse to the location of the new style sheet, or paste the address into the URL field.
- Ensure the "Current page" option is selected
Manage Styles (Sharepoint Designer)
Apply to the head section of the rendered page:
- Open the "Manage Styles" pane (screenshot above).
- Click the "New Style..." link
- Type the name of the new wtyle into the "Selector" (eg ".level-band" )
- Set the value for the "Define in" option to "Current Page"
This will create a new <asp:Content... tag ( <asp:Content
ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> ) with a
<style.. > element containing the new style class. If there are already CSS
styles defined in an existing "PlaceHolderAdditionalPageHead" element,
SharePoint Design (SPD) may add the new styles to this instead of a new
element. Alternatively, you can add the element and style tag to the page
yourself:
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> <style type="text/css"> classes... </style> </asp:Content>
View Page 2 of this article for XSL Style Sheet and CSS Class manupulation for Table of Contents Web Parts:
Customise Table of Contents Web Part CSS Styles (TOCWP) MOSS 2007 - Page 2
Tuesday, September 22, 2009
XSLT String Manipulation - Remove spaces in Field Value for use in URL
XSLT function sets the value of a parameter to the value
of the required field, after processing to remove spaces.
The parameter is then used to set part of url in the href attribute of an <a> tag.
<xsl:template name="dvt_1.groupheader0">
<xsl:param name="fieldtitle" />
<xsl:param name="fieldname" />
<xsl:param name="fieldvalue" />
....... other template params
1. Add a parameter to store
<xsl:param name="stringNoSpaces" >
<xsl:call-template name="stringreplace">
<xsl:with-param name="stringvalue" select="@Field-XPath" />
<xsl:with-param name="from" select="string(' ')" />
</xsl:call-template>
</xsl:param>
....... main template code
<a href="/FirstURLComponent/{$stringNoSpaces}"><xsl:value-of select="$fieldvalue" /></a>
....... remaining template code
</xsl:template>
2. Add string replace template after the main template:
<xsl:template name="stringreplace">
<xsl:param name="stringvalue" />
<xsl:param name="from" />
<xsl:choose>
<xsl:when test="contains($stringvalue, $from)"><xsl:value-of select="substring-before($stringvalue, $from)" />
<xsl:if test="contains(substring($stringvalue, 1, string-length($stringvalue) - 1), $from)">
<xsl:call-template name="stringreplace">
<xsl:with-param name="stringvalue" select="substring-after($stringvalue, $from)" />
<xsl:with-param name="from" select="$from" />
</xsl:call-template>
</xsl:if>
</xsl:when>
<xsl:otherwise><xsl:value-of select="$stringvalue" /></xsl:otherwise>
</xsl:choose>
</xsl:template>
The value of the @Field-XPath field will processed by the string replace template to remove all spaces from the string.
The processed string is stored in the stringNoSpaces parameter to be used or displayed by the XSLT template
for a Data View Web Part.
Sunday, March 22, 2009
SharePoint XSL String Replacement Function
Creating a list view Web Part to display data from a look-up field containing multiple look-ups.
I ran into a problem when creating a list view Web Part in SharePoint Designer that displays data from look-up fields. If the field only allowed a single look-up, the list view was easy to create with no customisation required for the Web Part to display properly.
After adjusting the look-up column/field to allow multiple selections, the result was an "Unable to display Web Part" message. To allow the multiple selection look-ups to be listed I needed to customise the XSL template to list each value in the look-up field.
The following XSL template I adapted from http://wwww.maya.com/local/doc/xslt/FAQ/html_format/xsl/sect2/replace.htmll, which solved my problem.
The data from the multiple selection lookup field is returned in a string format, with each selection delimited with a ";". The following function replaces each occurance of the first string ";" with the entire second string
. The result is a line break between each value, instead of the ";". I then adjusted the template to add "- " before each value.
Output without template:
Lookup Value 1; Lookup Value 2
Output using template below:
- Lookup Value 1
- Lookup Value 2
<xsl:template name="replaceCharsInString">
I ran into a problem when creating a list view Web Part in SharePoint Designer that displays data from look-up fields. If the field only allowed a single look-up, the list view was easy to create with no customisation required for the Web Part to display properly.
After adjusting the look-up column/field to allow multiple selections, the result was an "Unable to display Web Part" message. To allow the multiple selection look-ups to be listed I needed to customise the XSL template to list each value in the look-up field.
The following XSL template I adapted from http://wwww.maya.com/local/doc/xslt/FAQ/html_format/xsl/sect2/replace.htmll, which solved my problem.
The data from the multiple selection lookup field is returned in a string format, with each selection delimited with a ";". The following function replaces each occurance of the first string ";" with the entire second string
. The result is a line break between each value, instead of the ";". I then adjusted the template to add "- " before each value.
Output without template:
Lookup Value 1; Lookup Value 2
Output using template below:
- Lookup Value 1
- Lookup Value 2
<xsl:variable name="myString" select="@Todays_x0020_Tasks"/>
<xsl:call-template name="replaceCharsInString"><xsl:with-param name="stringIn" select="string($myString)"/></xsl:call-template>
<xsl:with-param name="charsIn" select="';'"/>
<xsl:with-param name="charsOut" select="'<br>'"/>
<xsl:template name="replaceCharsInString">
<xsl:param name="stringIn"/></xsl:template>
<xsl:param name="charsIn"/>
<xsl:param name="charsOut"/>
<xsl:choose><xsl:when test="contains($stringIn,$charsIn)"></xsl:choose><xsl:value-of select="'- '"/></xsl:when>
<xsl:value-of select="concat(substring-before($stringIn,$charsIn),$charsOut)" disable-output-escaping="yes" />
<xsl:call-template name="replaceCharsInString"><xsl:with-param name="stringIn" select="substring-after($stringIn,$charsIn)"/></xsl:call-template>
<xsl:with-param name="charsIn" select="$charsIn"/>
<xsl:with-param name="charsOut" select="$charsOut"/>
<xsl:otherwise><xsl:value-of select="'- '"/></xsl:otherwise>
<xsl:value-of select="$stringIn"/>
Subscribe to:
Posts (Atom)
Posts
