tag:blogger.com,1999:blog-2971455246201045732024-03-06T04:21:28.283+01:00Tudor's SharePoint BlogA SharePoint AdventureTudorhttp://www.blogger.com/profile/04887878575330768814noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-297145524620104573.post-65511009685129327652009-03-10T22:54:00.001+01:002009-03-11T09:38:21.222+01:00Minimize WebParts with jQuery<br />
<div align="left">
Recently I had to implement a quick way for the users to minimize and restore webparts with a single click, rather than having to use the default webpart verb to Minimize / Restore: it involves two clicks and it’s not very intuitive for the users.</div>
<div align="left">
My solution is the following <a href="http://jquery.com/" target="_blank">jQuery</a> script: </div>
<blockquote>
$(document).ready(<span style="color: navy;">function</span>() <br />{ <br /> <span style="color: green;">//display the hand cursor over the title table rows for each webpart and hook to the "onclick" event </span> <br /> $("<span style="color: grey;">tr.ms-WPHeader</span>").css("<span style="color: grey;">cursor</span>", "<span style="color: grey;">pointer</span>").css("<span style="color: grey;">cursor</span>", "<span style="color: grey;">hand</span>").bind("<span style="color: grey;">click</span>", function () <br /> { <br /> <span style="color: green;">//get the div element nesting the webpart contents: the navigation is based on standard webpart rendering behaviour</span> <br /> <span style="color: navy;">var</span> divElement = $(<span style="color: navy;">this</span>).parents('<span style="color: grey;">tr:first</span>').siblings('<span style="color: grey;">tr:first</span>').children('<span style="color: grey;">td:first</span>').children('<span style="color: grey;">div:first</span>'); <br />
<span style="color: green;">//and togle its visibility status</span> <br /> divElement.toggle();<br /> } <br /> ); <br />} <br />);</blockquote>
When triggered in the master page, a page layout or even from within the default Content Editor WebPart, this script will enable toggling the visibility of the webparts on the page with a single click on their title. It also works when the default chrome state is minimized, bypassing the default behaviour.<br />
On a side note, I think it would be great to see more out-of-the-box jQuery action in the next version of SharePoint, now that it officially supported in Visual Studio 2010.<br />Tudorhttp://www.blogger.com/profile/04887878575330768814noreply@blogger.com6tag:blogger.com,1999:blog-297145524620104573.post-76805895518250312882008-11-01T23:21:00.002+01:002009-01-25T13:45:21.522+01:00Custom Group Order in a SharePoint List: Dynamic Grouping<p> </p> <p>This is the second part of a series concerning custom group ordering in a grouped SharePoint List.</p> <p>While the <a href="http://tudorolariu.blogspot.com/2008/10/custom-group-order-in-sharepoint-list.html" target="_blank">first part</a> dealt with a hard coded group order (as the group positions were defined in a separate list), this part shows how the groups can be dynamically ordered by the number of child elements they contain.</p> <p>This article deals with the more complex case of nested groupings (two grouping categories). If the list contains only one column to group by and you want to implement custom group ordering on those groups, please see <a href="http://tudorolariu.blogspot.com/2008/10/custom-group-order-in-sharepoint-list.html?showComment=1225378200000#c3643286857476218275" target="_blank">this link</a>.</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jsKUZ1SKpUW4-fIMdXg3i8kKhCT3usApZI491uo-xon3Kw_jgN5UKZbLcgBgtPlQ9BUFeCpFhNfc2ofjgength_XffVON0HNg0j_49RdrAN5UemEKj7D7ZoCDKU7qYGzKJmifxZQ0YeO/"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="622" alt="initial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJjugu3gFIhVRItJOJ6oh2u8v1d90ft7KpppOJQX9unOBo3GuHa4NFePjEketGqy_7JfDtf2NmiidIKXqG_Qml-VeJd0Y4hxL_cSD5fE1FW42hTMM11rwj3-14Kk7hnLE_gqSyv4ePW7fO/" width="316" align="left" border="0" /></a> </p> <p> </p> <p>We will use a simple list with Employees, grouped by Country and then by Company.</p> <p>As it can be seen, next to each group name the list of child list rows is displayed (not child groups, an important notice).</p> <p>What we want to achieve is to order all the groups (first level and second level) based on the number of child list rows they nest.</p> <p> </p> <blockquote> <p> </p> </blockquote> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <ul> <li><strong> <h4><strong>Convert the list to an XSLT Data View</strong></h4> </strong></li> </ul> <p>Open your list (or the page containing the list) in SharePoint Designer, right click on the list and choose "Convert to XSLT Data View". </p> <p>The first thing you will notice after having converted the list to an XSLT Data View is that the number of child list rows contained by each group is no longer displayed. We will manually change the XSL later to display them again.</p> <ul> <li> <h4><strong>Remove the default sorting by ID ascending, and add grouping by Country and </strong><strong>Company</strong></h4> </li> </ul> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7CaDaicFqI_dLDpjZ7dGWPe_LYAuG9lj9nEzll4LijokwLAVoOrEnlCTnqW0VGvlkRZ-p4GZKr3n5i3Q49bCEcvTB1L8C-G1Oa8CtRLq4OyigzZCbEQSZyZdYAx1iQxib1PbQokCKz1V3/"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="303" alt="addnewgroupings" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTdZulb2cOx57xCKsEytKNMibLG4wLJJOBlLj-UlCMP6NQ_VSLtWqKtaM7h1_XrhIWLcTemw6rNu2O5cbHJnf02O_pW8pZwUQkHmiMvwq_WBNvXsc6bmm5ZXx0TQws3hbaYXgVUCCUK3G/" width="543" align="left" border="0" /></a> Right click on your fresh XSLT Data View to summon the "Common Data View Tasks" pane. Choose the second option, called "Sort and Group: ID+", and remove the "ID" field from the grouping columns.</p> <p>Now you need to add the new grouping and sorting criteria, by adding the "Country" and "Company" columns to the Sort list.</p> <p> </p> <p><strong>Make sure you check the "Show group header" checkbox for both columns, otherwise the groupings will not appear, and you will only achieve a nested sort.</strong></p> <p>Press OK to close this window.</p> <p></p> <ul> <li> <h4>Alter the generated XSL to implement the custom ordering</h4> </li> </ul> <p>Go to the code view of the page and search for the definition of the template called "<strong>dvt_1.body</strong>" and take a look at the <strong>second </strong><xsl:for-each> iteration through $Rows elements (the first one is used to create the $dvt_Rows variable). Just below the <xsl:f0r-each> element, append two more lines, making the code look like this:</p> <p><xsl:for-each select="$Rows"> <br /> <xsl:sort select="count(//Row[@Country=current()/@Country])" order="descending" data-type="number" /> <br /> <xsl:sort select="count(//Row[@Company=current()/@Company])" order="descending" data-type="number" /> </p> <p>... and that's it. These two lines will sort the order in which the lines are displayed (and therefore, catalogued into groups) first by the number of identical Countries contained by other rows in relationship with the current iterator value, and then by Companies.</p> <ul> <li> <h4>Display the number of child list rows contained by each group</h4> </li> </ul> <p>By default, after creating the XSLT Data View from a multi-grouped list, SharePoint creates individual templates for each group section. Even if they appear to be identical, this is a smart thing to do because it allows individual customization for each group. For us, in this example, it means we have to change both templates to have the number of child list rows displayed.</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEZI5LBKEZiQDbr2KxTMsNvpERjRblerzDA4dPZpncvg36HJid11tJFTtjVpuehT0iDkhBYXJIQV0s1OKY7KeT4FnjdAZpbRjwm67bvr0Da8tZrlubLQn6I8rzvfRWz2GQcxm92Za9cwQf/"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="286" alt="displaychildlistrows" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZs_TD9yBa855S-Tv_Or2_d0_RUc7uH9aydEKWdZRNLZwb4zfTBlxa7xk5UtZ2wCBrw3r41uWAuVspbUO4kPeT2yi4ZqZLCaTw9thu_ATfiY-THHLkgYUk0xHSq5BqCxw4GWJ0k1SvQf75/" width="245" border="0" /></a> </p> <p>From the design pane, click on the value of a group name, as seen above. Now, in the code view, the corresponding part responsible for displaying that field is automatically highlighted. You should have highlighted a part of the following line:</p> <p><xsl:otherwise><xsl:value-of select="$fieldvalue"></xsl:value-of></xsl:otherwise></p> <p>which will need to be modified to look like this:</p> <p><xsl:otherwise><xsl:value-of select="$fieldvalue"></xsl:value-of> (<xsl:value-of select="count($nodeset)" /></xsl:otherwise></p> <p>Please note that the $nodeset variable contains the XML sub-tree of child list rows nested by the current group iteration the template is applied for.</p> <p>Similarly, you need to change the template for the top-level group, by clicking on the "UK" value in the example above and changing the same line with the same value.</p> <p>Finally, the result looks like this:</p> <p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHfCJEoKg6uwAU4MsfXYljO2khtA3WThLvVvaARixUWjnghKa3iYgopHAXN_VKTXVtdaukPMQtKY1pNOFRw9xs2NzPRX1W6TnPEVOfZm9RR-odVjeeWxT6jSLMdDPASY-NtEqjVIW8KtXl/"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="492" alt="final" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEiT0oAh-foOgVw2BUKU7yjdj8-yjWAjH5VqEDhKlkrYc-_01k72hSDQgVLrxRK1__PNc-cnat1XdVX6kvHJAzTBrK_MfBIGkPBj_c_Jfsz5F9sCREMBCp3wu4IwrZs6v29UKyngQdtaR/" width="255" border="0" /></a> </p> <p>As you can see, all the groups are ordered by number of child elements, descending.</p> <p>The careful reader may notice that there is a slight difference between the sample result above and your result: the secondary groups are not as indented as they should be: that's because the indentation was lost in (the XSL) translation. To have the list displayed nicely, go to design view and click on the "Company" value (sample picture used for example), and you should have the corresponding XSL bit highlighted in code view. Two lines above that, you will find this line:</p> <p><a href="javascript:" onclick="javascript:ExpGroupBy(this);return false;"><img src="{$imagesrc}" border="0" alt="{$alttext}" name="{$altname}" /></a></p> <p>which needs to have an &#160; appended in front of it, thus becoming</p> <p>&#160; <a href="javascript:" onclick="javascript:ExpGroupBy(this);return false;"><img src="{$imagesrc}" border="0" alt="{$alttext}" name="{$altname}" /></a></p> <p>&#160; is the hex representation of the tab character.</p> <p> </p> <p>...and you're done, congratulations! :)</p>Tudorhttp://www.blogger.com/profile/04887878575330768814noreply@blogger.com2tag:blogger.com,1999:blog-297145524620104573.post-82817756590855580282008-10-16T01:21:00.082+02:002008-10-16T16:47:56.750+02:00Custom Group Order in a SharePoint List<br />
<br />
<span style="color: black; font-size: 130%;">The problem</span><br />
<br />
<div style="color: black;">
<span style="font-size: 100%;">Suppose you have a standard SharePoint list with its items grouped by a field. By default, the SharePoint interface allows you to show the groups in ascending or descending order, and the ordering is done based on the group's name.<br />
</span></div>
<div style="color: black;">
<span style="font-size: 100%;"> What do you do if you want to control the order in which the groups are shown? You may want to draw attention to a certain group and put it at the top, without changing its name or the grouping criteria, or move one down to the end of the list, and you want to do that from the user interface, without any 3rd party installations.</span></div>
<div style="color: black;">
<br />
<span style="font-size: 130%;">The solution</span></div>
<br />
<div style="color: black; text-align: left;">
<span style="font-size: 100%;"> The idea is to have a secondary list containing your group names, while the primary list contains a look-up field pointing at the secondary list's elements. The secondary list, which we will call "Lookup list", contains an extra column called GroupIndex with the index positions each group will have in the final render. We will then use SharePoint Designer to change our grouped view into a XSLT view, use the two joined tables as a linked data source, and implement a custom Sort Expression to use the GroupIndex column for the final render.</span></div>
<div style="color: black; text-align: left;">
<span style="font-size: 100%;"><br />
</span></div>
<div style="color: black; text-align: left;">
<span style="font-size: 100%;">Consider the classical example of Products and Product Categories, using sample data as depicted below:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh3.ggpht.com/tudor.olariu/SPc1TjBFMmI/AAAAAAAAEfo/ZmelaCt5-8A/ProductCategoriesList.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh3.ggpht.com/tudor.olariu/SPc1TjBFMmI/AAAAAAAAEfo/ZmelaCt5-8A/ProductCategoriesList.png" /></a></div>
<span style="font-size: 100%;"><br />
</span></div>
<div style="text-align: left;">
<br />
<div style="text-align: center;">
<span style="font-size: 78%; font-style: italic;">The Product Categories list. Note the GroupIndex column to the right contains the positions </span><span style="font-size: 78%; font-style: italic;">each group will have in the final display.</span></div>
</div>
<br />
<div style="text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh5.ggpht.com/tudor.olariu/SPc1SykSJFI/AAAAAAAAEfg/gHWZTgQYMHg/ProductsList.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/tudor.olariu/SPc1SykSJFI/AAAAAAAAEfg/gHWZTgQYMHg/ProductsList.png" /></a></div>
<br />
<div style="text-align: center;">
<span style="font-size: 78%; font-style: italic;">The Products list</span></div>
<div style="text-align: center;">
<span style="font-size: 78%; font-style: italic;"></span></div>
<br />
<span style="font-size: 100%;"><span style="color: black;">I have created a view which groups the items by category. As you can see the category groups are sorted ascending, which is </span></span><span style="font-size: 100%;"><span style="color: black;">really what we want to change.</span></span><br />
<br />
<ul>
<li><span style="color: black; font-size: 100%;">Convert the view to XSLT Data view</span><br />
<span style="color: black; font-size: 100%;"></span> </li>
</ul>
<span style="color: black; font-size: 100%;"></span><br />
<span style="color: black; font-size: 100%;">Open your site in SharePoint Designer. Navigate to the ProductsList, and then to the GroupedByCategory view. Right click on the list and choose "Convert to XSLT Data view".</span><br />
<span style="color: black; font-size: 100%;"></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh3.ggpht.com/tudor.olariu/SPc2xzwEKXI/AAAAAAAAEfw/MS7J1JUgYWs/converttoXSLT.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh3.ggpht.com/tudor.olariu/SPc2xzwEKXI/AAAAAAAAEfw/MS7J1JUgYWs/converttoXSLT.png" /></a></div>
<br />
<ul style="color: black;">
<li><span style="color: black; font-size: 100%;"> </span><span style="color: black; font-size: 100%;"><span style="color: black; font-size: 100%;">Create the linked source</span></span><br />
<span style="color: black; font-size: 100%;"></span> </li>
</ul>
<span style="color: black; font-size: 100%;"> </span> <br />
<div style="color: black;">
<span style="font-size: 100%;">Make sure the Task Pane "Data Source Library" is selected from the main Task Pane menu.</span></div>
<div style="color: black;">
<span style="font-size: 100%;"> Right click on your XSLT Data view and select the last option "Data View Properties". This will automatically display the Data Source Details Pane containing the current source for your Data View. Click on the "Related Data Sources" button and choose the only available option in order to change the Data Source:</span></div>
<a href="http://tudorsharepointblog.googlegroups.com/web/Step3ChangeDataSource.png?gda=ftJYUUsAAADkS4KiKlOMcGrI88nJlv7i7fMpN-Q9ZYyuaWpQryBu-5jqX3N9Kjf7qZEWBEOSvh8UUFmPu5RmzzCCYEsK7dk1BkXa90K8pT5MNmkW1w_4BQ" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><span style="color: black; font-size: 100%;"></span></a><span style="color: black; font-size: 100%;"></span><br />
<div style="color: black;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh4.ggpht.com/tudor.olariu/SPc2yGmQc3I/AAAAAAAAEgQ/iFE7RhQjYJM/Step3ChangeDataSource.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/tudor.olariu/SPc2yGmQc3I/AAAAAAAAEgQ/iFE7RhQjYJM/Step3ChangeDataSource.png" /></a></div>
<br />
<span style="font-size: 100%;">Say "OK" to the warning dialogue. This view will be used just for information, while CRUD functionality can be employed elsewhere.</span></div>
<div style="color: black;">
<span style="font-size: 100%;">The ProductsList already exists as a data source, we need to link it with the look-up list. In order to do this, add the ProductCategoriesList to the SelectedDataSources control and click Next.</span></div>
<br />
<div style="color: black;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh5.ggpht.com/tudor.olariu/SPc2x7dCgoI/AAAAAAAAEf4/MdLez-q11lQ/LinkedDataSourceStep1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/tudor.olariu/SPc2x7dCgoI/AAAAAAAAEf4/MdLez-q11lQ/LinkedDataSourceStep1.png" /></a></div>
<br />
<span style="font-size: 100%;">In the next window, select "Join the contents …": this will allow us to specify the field used to join the two tables and establish the relation between them. You can also give it a name (in the General tab), for example "ProductsDataSource":</span></div>
<div style="color: black;">
</div>
<div style="color: black;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh4.ggpht.com/tudor.olariu/SPc2x0MRqjI/AAAAAAAAEgA/t71cDYHuhgE/LinkedDataSourceStep2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/tudor.olariu/SPc2x0MRqjI/AAAAAAAAEgA/t71cDYHuhgE/LinkedDataSourceStep2.png" /></a></div>
<br />
<ul style="color: black;">
<li>Apply the Custom Sort Expression<br />
</li>
</ul>
<span style="font-size: 100%;"><span style="color: black;">Now that we have our linked source added to your XSLT Data View, we can add the Custom Sort Expression. Inside the "Common Data View Tasks" Pane, click on "Sort and Group". The following window will appear:</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh5.ggpht.com/tudor.olariu/SPc23DVl5RI/AAAAAAAAEgY/Ab8B8qmqIDM/Step3AddSortExpression.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/tudor.olariu/SPc23DVl5RI/AAAAAAAAEgY/Ab8B8qmqIDM/Step3AddSortExpression.png" /></a></div>
<br />
<div style="color: black;">
<span style="font-size: 100%;"> Choose "Add Sort Expression" from the list of Available feeds and click "Add". In the next window, scroll all the way to the bottom, expand the Rows/Row tree nodes inside the ProductCategoriesList node, and drag the GroupIndex column to the Xpath Expression control. You should see something like this:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh5.ggpht.com/tudor.olariu/SPc23REsBRI/AAAAAAAAEgg/rYem6W3yfbk/Step3EditSortExpression1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/tudor.olariu/SPc23REsBRI/AAAAAAAAEgg/rYem6W3yfbk/Step3EditSortExpression1.png" /></a></div>
</div>
<div style="color: black;">
</div>
<div style="color: black;">
<br />
<span style="font-size: 100%;">Now we finally get to change the sort expression:<br />
</span></div>
<div style="color: black;">
<span style="font-size: 100%;">Instead of<br />
</span></div>
<div style="color: black;">
<span style="font-size: 100%;"><span style="font-weight: bold;">../../../ProductCategoriesList/Rows/Row/@GroupIndex</span>
</span><br />
<span style="font-size: 100%;"><br /></span></div>
<div style="color: black;">
<span style="font-size: 100%;">we edit it to</span><br />
<span style="font-size: 100%;"><br />
</span></div>
<div style="color: black;">
<span style="font-size: 100%;"><span style="font-weight: bold;">../../../ProductCategoriesList/Rows/Row<span style="color: #333333;">[@Title=current()/@ProductCategory]</span>/@GroupIndex</span></span><br />
<span style="font-size: 100%;"><span style="font-weight: bold;"> </span><br />
</span></div>
<div style="color: black;">
<span style="font-size: 100%;">We will see later the purpose of this line and how it is applied. For now, let's finish with the custom sort order. Click OK and you will return to the previous window. Make sure you check the "Show group header" checkbox under Group Properties (see picture below), otherwise your group header will not be rendered:
</span><br />
<span style="font-size: 100%;"><br /></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh5.ggpht.com/tudor.olariu/SPc23TRsbxI/AAAAAAAAEgo/CzCpRFyJxM4/Step3FinishAddingSortExpression.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/tudor.olariu/SPc23TRsbxI/AAAAAAAAEgo/CzCpRFyJxM4/Step3FinishAddingSortExpression.png" /></a></div>
<span style="font-size: 100%;"><br /></span></div>
<div style="color: black;">
</div>
<div style="color: black;">
<span style="font-size: 100%;">Click OK and now your Data View will be rendered again using the new sorting criteria.<br />
</span></div>
<div style="color: black;">
<span style="font-size: 100%;">So much work and there's already a first problem: our group names have vanished! Instead, we now see the GroupIndex values. This is perfectly correct because the default XSLT uses for display the attribute used for sorting, and we need change this: back into SharePoint Designer, click on Split view mode to see the code behind the page. Now click on the first grouping header ("1" in our case) to see the corresponding part in the XSLT:</span><br />
<span style="font-size: 100%;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh5.ggpht.com/tudor.olariu/SPc23fFIOqI/AAAAAAAAEg4/jDPqkKAmb2M/Step4LocateXSLTContent1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/tudor.olariu/SPc23fFIOqI/AAAAAAAAEg4/jDPqkKAmb2M/Step4LocateXSLTContent1.png" /></a></div>
<span style="font-size: 100%;"><br />
</span></div>
<div style="color: black;">
</div>
<div style="color: black;">
<span style="font-size: 100%;"> As you can see, the transormation displays the value of the <span style="font-weight: bold;">$fieldvalue</span> parameter, which will need to have a new value according to our needs. If we scroll up a little bit, we can see the name of the template that generates the group headers. In this case, it is defined like this:</span><br />
<span style="font-size: 100%;"><br />
</span></div>
<div style="color: black;">
<span style="font-size: 100%;"><</span><span style="font-size: 100%;">xsl:template </span><span style="font-size: 100%;"><xsl:with-param style="color: #990000;">name</xsl:with-param>=</span><span style="color: #3333ff; font-size: 100%;">"dvt_1.groupheader0"</span><span style="font-size: 100%;">></span><span style="font-size: 100%;">
</span><br />
<span style="font-size: 100%;"><br /></span></div>
<div style="color: black;">
<span style="font-size: 100%;">We now need to search for the place where the template is called. The call looks like this:<br />
</span></div>
<br />
<div style="color: black; font-family: courier new;">
<span style="font-size: 100%;"><</span><span style="font-size: 100%;">xsl:call-template </span><span style="font-size: 100%;"><xsl:with-param style="color: #990000;">name</xsl:with-param>=</span><span style="color: #3333ff; font-size: 100%;">"dvt_1.groupheader0"</span><span style="font-size: 100%;">></span></div>
<div style="color: black; font-family: courier new;">
<span style="font-size: 100%;"><</span><span style="font-size: 100%;">xsl:with-param </span><span style="font-size: 100%;"><xsl:with-param style="color: #990000;">name</xsl:with-param>=</span><span style="color: #3333ff; font-size: 100%;">"fieldtitle"</span><span style="font-size: 100%;">></span></div>
<div style="color: black; font-family: courier new;">
<span style="font-size: 100%;"><</span><span style="font-size: 100%;">xsl:with-param <span style="color: #990000;">name</span>=<span style="color: #3333ff;">"fieldname"</span></span><span style="font-size: 100%;">></span><span style="font-size: 100%;">../../../ProductCategoriesList/Rows/Row[@Title=current()/@ProductCategory]/@GroupIndex</span><span style="font-size: 100%;">></span></div>
<div style="color: black; font-family: courier new;">
<span style="font-size: 100%;"><</span><span style="font-size: 100%;">xsl:with-param <span style="color: #990000;">name</span>=<span style="color: #3333ff;">"fieldvalue"</span> <span style="color: #990000;">select</span>=<span style="color: #3333ff;">"$groupheader0" </span>/</span><span style="font-size: 100%;">></span></div>
<div style="color: black;">
<span style="font-size: 100%;">The value for the $fieldvalue parameter is <span style="font-weight: bold;">$groupheader0</span>, which was previously initialised with the exact value of our custom sort criteria. We simply need to change
</span><br />
<span style="font-size: 100%;"><br /></span></div>
<div style="color: black; font-family: courier new;">
<span style="font-size: 100%;"><</span><span style="font-size: 100%;">xsl:with-param <span style="color: #990000;">name</span>=<span style="color: #3333ff;">"fieldvalue"</span> <span style="color: #990000;">select</span>=<span style="color: #3333ff;">"$groupheader0"</span> /</span><span style="font-size: 100%;">></span></div>
<div style="color: black;">
<span style="font-size: 100%;">to
</span><br />
<span style="font-size: 100%;"><br /></span></div>
<div style="color: black; font-family: courier new;">
<span style="font-size: 100%;"><</span><span style="font-size: 100%;">xsl:with-param <span style="color: #990000;">name</span>=<span style="color: #3333ff;">"fieldvalue"</span> <span style="color: #990000;">select</span>=<span style="color: #3333ff;">"@ProductCategory"</span> /</span><span style="font-size: 100%;">></span></div>
<span style="font-size: 100%;"><span style="color: black;">... and our job is finished. Now, the list looks like this:</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lh4.ggpht.com/tudor.olariu/SPc23SHDUxI/AAAAAAAAEgw/H7QQ-uuk8KE/Step4Final.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://lh4.ggpht.com/tudor.olariu/SPc23SHDUxI/AAAAAAAAEgw/H7QQ-uuk8KE/Step4Final.png" /></a></div>
<br />
<a href="http://groups.google.com/group/tudorsharepointblog/web/Step4Final.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><br />
</a><br />
<span style="font-size: 100%;">The groups are sorted in ascending order based on the group's GroupIndex column, defined in the ProductCategories list.</span><br />
<br />
<br />
<span style="color: black; font-size: 130%;">Behind the scenes</span><br />
<br />
<span style="font-size: 100%;">So what does really happen when we change the custom sort expression? If you are curious enough to look inside the generated XSLT, you will see that our modified line </span><span style="font-size: 100%;"><span style="font-weight: bold;">../../../ProductCategoriesList/Rows/Row<span style="color: #333333;">[@Title=current()/@ProductCategory]</span>/@GroupIndex </span></span><span style="font-size: 100%;">is used, among other places, as an argument to the <xsl:sort/> when iterating through $Rows. In plain English, the sort expression above would translate to: "For each of the Rows to be displayed (which are Products), order and group them by the value of the GroupIndex attribute for the Row inside the ProductCategories list that has the Title equal to the current Product's ProductCategory." ; Note that the current() XSL function is needed because the </span><span style="font-size: 100%;"><xsl:sort/></span><span style="font-size: 100%;"> call is placed inside a </span><span style="font-size: 100%;"><xsl:foreach/></span><span style="font-size: 100%;"> element.</span><br />
<span style="color: black; font-size: 130%;"><br />
</span><br />
<span style="color: black; font-size: 130%;">Conclusion</span><br />
<br />
<span style="font-size: 100%;">Hopefully you have taken a glimpse at just how much you can customize a view using SharePoint Designer. Should you take a further look inside the default XSLT template, you may find new layers of customization, some of which will be outlined in future posts on this blog.</span><br />
<span style="font-size: 85%;"><br />
</span>Tudorhttp://www.blogger.com/profile/04887878575330768814noreply@blogger.com5