How To: Add a modal dialog box in ItemStyle.xsl

Normally, you will want to use a modal dialog box to display a webpage, form, or something of the kind, without navigating away from the page you currently are. First, you need to find the location of the link you want to change in the .xsl file. It will be something like:

<div class=”item link-item bullet”>
<xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>
<a href=”{$SafeLinkUrl}” title=”{@LinkToolTip}”>
<xsl:if test=”$ItemsHaveStreams = ‘True'”>
<xsl:attribute name=”onclick”>
<xsl:value-of select=”@OnClickForWebRendering”/>
</xsl:attribute>
</xsl:if>
<xsl:if test=”$ItemsHaveStreams != ‘True’ and @OpenInNewWindow = ‘True'”>
<xsl:attribute name=”onclick”>
<xsl:value-of disable-output-escaping=”yes” select=”$OnClickTargetAttribute”/>
</xsl:attribute>
</xsl:if>
<xsl:text>PRO</xsl:text><xsl:value-of select=’substring(substring-after($ActualLinkUrl, “/PRO”), 1, 4)’/>
<xsl:text>: </xsl:text><xsl:value-of select=”$DisplayTitle”/>
</a>
</div>

The changes will only happen in <a href=…> part of this div. The following will create a modal dialog box and display the page that the users used to navigate to before the modal dialog box.

<div class=”item link-item bullet”>
<xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>
<a onclick=”ShowPopupDialog(GetGotoLinkUrl(this));return false;”>
<xsl:attribute name=”href”>
<xsl:value-of select=”$SafeLinkUrl” />
</xsl:attribute>
<xsl:attribute name=”title”>
<xsl:value-of select=”@LinkToolTip” />
</xsl:attribute>
<xsl:if test=”$ItemsHaveStreams = ‘True'”>
<xsl:attribute name=”onclick”>
<xsl:value-of select=”@OnClickForWebRendering”/>
</xsl:attribute>
</xsl:if>
<xsl:if test=”$ItemsHaveStreams != ‘True’ and @OpenInNewWindow = ‘True'”>
<xsl:attribute name=”onclick”>
<xsl:value-of disable-output-escaping=”yes” select=”$OnClickTargetAttribute”/>
</xsl:attribute>
</xsl:if>
<xsl:text>PRO</xsl:text><xsl:value-of select=’substring(substring-after($ActualLinkUrl, “/PRO”), 1, 4)’/>
<xsl:text>: </xsl:text><xsl:value-of select=”$DisplayTitle”/>
</a>
</div>