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;}
Comments
Post a Comment