Welcome to deBUG.to Community where you can ask questions and receive answers from Microsoft MVPs and other experts in our community.
0 like 0 dislike
in SharePoint Server by 29 37 42
edited by

I have a custom ItemStyle.xsl in SharePoint 2019, and I need to open a SharePoint Modal PopUp Dialog window in ItemStyle.xsl when a link was clicked.

<a href="{@TwitterAccount}"><xsl:value-of  select="@Title" disable-output-escaping="yes" /></a> 

My SharePoint cusotm style in ItemsStye.XSL is

<xsl:template name="UserProfile" match="Row[@Style='UserProfile']" mode="itemstyle">
		<xsl:variable name="SafeLinkUrl">
			<xsl:call-template name="OuterTemplate.GetSafeLink">
				<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
		<xsl:variable name="SafeImageUrl">
			<xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
				<xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
		<xsl:variable name="DisplayTitle">
			<xsl:call-template name="OuterTemplate.GetTitle">
				<xsl:with-param name="Title" select="@Title"/>
				<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>

		<a href="{@TwitterAccount}"><xsl:value-of  select="@Title" disable-output-escaping="yes" /></a> 


How to open Modal Pop up Dialog window in SharePoint ItemStyle.XSL?

1 Answer

1 like 0 dislike
by 152 169 345
selected by
Best answer

How to show SharePoint Modal Popup Dialog in ItemStyle.XSL file?

To show a Popup dialog in SharePoint ItemStyle.XSL file, you have to use SP.UI.ModalDialog.showModalDialog as the following:

  1. Create a JS file, and add the below code

     <script language = "javascript">
          function openpopupDialog(pageUrl) { var options = { url: pageUrl, allowMaximize: true, showClose: true,  width: 700,  height: 700};
               SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options); }

    Set the Width and Height as you prefer

  2. Upload the JS file to Site Assets or Style Library.
  3. Open SharePoint Designer, Open your Site and Navigate to Master Page.
  4. Edit the HTML file for your Master Page, and attach the newly created JS file.
  5. Check-in and publish your Master Page.
  6. Go back to open the ItemStyle.XSL file, Check out, and Edit file in Advanced Mode.
  7. In your Custom Item Style, and specifically in the Hyperlink tag, add the following

     <a href="{$SafeLinkUrl}" onclick="openpopupDialog('{$SafeLinkUrl}'); return false;" title="debug.to">
         <xsl:value-of  select="@Title" disable-output-escaping="yes" /></a>
  8. Check-in and Publish your Item Styel.xsl file.
  9. Go to your page, and add a Content Query Webpart, and configure it with your custom style.
  10. Test your link now, that should be open in a Modal Pop up dialog as shown below
    popup Window in Itemstyle.xsl sharepoint

    If the Modal Popup Dialog is not working as expected, so you have to ensure that you have referenced the JS code correctly.
    For more details, Please check Open URL in SharePoint Modal PopUp Dialog

If you don’t ask, the answer is always NO!