Popup window to a data field from a DataView

A request was made to have a list shown in a dashboard view with bubbles for certain statuses. Red, Yellow, Green, and White. When the user clicks on Red or Yellow the Comments field for the list should popup in a new window showing only the comments.

1.

Create a new custom list form in SharePoint Designer in the same folder as the other views. Go to the lists folder and then the folder for the list, create a new blank aspx page. I named mine: comments.aspx. In the form tag insert a custom list form. (Insert --> SharePoint Controls --> Custom List Form) Choose the list, uncheck the toolbar, and select the view layout.

This will create a form with all of the fields. You must delete any you do not want. In this case I removed everything except the Comments field, I rearranged the layout so the title and the data are on separate rows, thus allowing the comments title to be above and centered over the data in the list.

I then removed the toolbar rows and the footer rows with the created by fields.

2.

Next we will use javascript inside xsl tags to open a new window and pull the data:

<td style="text-align:center;">

<xsl:choose>

<xsl:when test="@StaffBubble='3 - Red - Late'">

<a class="ButtonHover">

<xsl:attribute name="href">#</xsl:attribute>

<xsl:attribute name="onclick">

javascript:window.open('http://yoursite/lists/list/comments.aspx?ID=<xsl:value-of disable-output-escaping="yes" select="@ID"/>','PopupComment','status=0,toolbar=0,scrollbars=0,width=400,height=200')

</xsl:attribute>

<img alt="" border="0px" src="/images/red_button_24.png"/>

</a>

<xsl:when>

<xsl:when>(otherconditions)</xsl:when>

<xsl:otherwise>(final condition)</xsl:otherwise>

</xsl:choose>

</td>

When you click on the red bubble, a new window pops up and shows the comments field for that list item. I left out the other <xsl:when> conditions and the final <xsl:otherwise> because that is standard.

 

Note: Setting the xsl:attribute name='target' to _blank removes the cursor action on the hover for the image link. I corrected this by adding a style (ButtonHover) and setting the cursor action to the help.

Here is the style:

.ButtonHover {cursor:help;}