I wanted to go over a bit more detail about ‘hide-whens’ in SharePoint:
As I stated in the previous post, you can use a Custom List Web Part to pull your list item UI into XSL, giving you control of the UI, which in turn lets you hide elements using xsl:if.
To begin, we need to add the Custom List Part:
- Open your SharePoint site in SharePoint designer, and navigate to your list. (Note: If using single sign-on like we do, you may need to open the site in a browser first to cache your credentials.)
- Navigate into ‘Lists’, and then into the list you want to modify.
- Open ‘DispForm.aspx’ - This is the form that SharePoint uses when displaying a new list item. (EditForm.aspx is for editing existing items, and NewForm.aspx is for creating new items. This works on any of these pages.)
- Right-click the default List Form Web Part, and select ‘Web Part Properties’. Open the ‘Layout’ settings and select ‘Hidden’. I’ve read that hiding the form works better than deleting, but I haven’t testing this out to determine why. *shrug*
- In Code view, place your cursor in front on ‘</ZoneTemplate>’ and then select from the menus ‘Insert..’ –> ‘SharePoint Controls’ –> ‘Custom List Form’
- You will be prompted for which List to show, and whether you want to use this web part for creating new items, displaying, or editing items. In general, if you make these selections match the page you are working on, all will be well. Someday, I may experiment with pulling in different list data, but I haven’t done that yet.
At this point, you should see the specific fields for your list in your designer client. If you look at Design view, it looks like the default SharePoint form. Code view will show the XSL that creates the form. Now we can edit that XSL and modify our UI.
By default, SharePoint will display each field in a table row containing the field name in the left hand column, and the field value in the right hand column. You probably will see many iterations of code that look like this:
<tr>
<td width=”190px” valign=”top” class=”ms-formlabel”>
<H3 class=”ms-standardheader”>
<nobr>Field Name</nobr>
</H3>
</td>
<td width=”400px” valign=”top” class=”ms-formbody”>
<xsl:value-of select=”@Field_x0020_Name”/>
</td>
</tr>
Looks a lot like HTML, doesn’t it? The XSLT tags surround all this HTML, so even through there is only one xsl tag in the above code, it all is programmable via XSLT if you choose to do so.
(Also, note the field name - it converts your column name by adding a @ at the beginning, and converting spaces to ‘_x0020_’. That gets easier to type after you do it a few hundred times. I thought about not using spaces in my column names, but while that would make the code cleaner, it would make the standard SharePoint UI less user-friendly, so I just deal with it.)
Now, to hide something…
In general, to hide, you will use ‘<xsl:if test=’YourCriteriaHere’>’
So, to only show the value of “Assigned To” if “Is Approved” is set to ‘Yes’, you would write the following code:
<xsl:if test=”@Is_x0020_Approved=’Yes’”><xsl:value-of select=”@Assigned_x0020_To”/></xsl:if>
Voila! Hide-whens in SharePoint.
Naturally, you will want to do something more complex than that - if you choose to hide a field value, you probably also want to hide the full table row containing that field value. I also have used this to write custom text to the browser based on a combination of field values. Use your imagination. And Have Fun.