Get only URL value in SharePoint CQWP ItemStyle.XSL

Question

I am using SharePoint 2019 Content Query Web Part to show links in a custom item style, I created a custom Hyperlink site column and added it to my page layout, In custom XSLT item style, I am trying to bind hyperlink custom site column to the HREF in the <a> tag. but it binds the (URL, Description), not only the URL value!

Here, my XSLT in ItemStyle.XSL, I just need to set the URL value to HREF in <A> tag and the Description Value within <A> tag, How I can do that?

<xsl:template name="Links" match="Row[@Style='Links']" mode="itemstyle">
    <xsl:variable name="SafeLinkUrl">
        <xsl:call-template name="OuterTemplate.GetSafeLink">
            <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
        </xsl:call-template>
    </xsl:variable>
    
    
            <a href="{$SiteLink}" class="btn more">
           <!-- I need to add the Description link here-->
          </a>

    </div>
</xsl:template>

How I can get only URL value in SharePoint item style.XSL from hyperlink site column in Content Query Web Part without the Description part? Then get only the Description value from the same hyperlink site column?

Answer 1

How to extract URL value and Description Value from Hyperlink field in SharePoint Itemstyle.XSL?

First, you should be aware that the value of the Hyperlink field is retried with two parts like URL,Description
In this case, you have to use substring function to get the value before and after the comma where the substring before comma will represent the URL value and the substring after the comma will represent the Description value.

To do this in SharePoint XSL Item Style,

• You can extract the URL value from the Hyperlink column, you should define a new variable and use substring-before as the following:

    <xsl:variable name="geturlLink" select="substring-before(@urlLink, ',')"/>
  

  The geturlLink is the variable name that will be used to just refrence the URL value in XSL, and the urlLink is the field that you will use to set the HyperLink field Name in your CQWP.

• Again, to extract the Description value from the Hyperlink column, you should define a new variable and use substring-after as the following:

    <xsl:variable name="getdesclLink" select="substring-after(@urlLink, ',')"/>
  

  The getdesclLink is the variable name that will be used to just refrence the Description value in XSL, and the urlLink is the same field that you will use to set the HyperLink field Name in your CQWP.

Finally, in your Item Style <A> tag, you should set the HREF parameter to {$geturlLink} to get only the URL value, and with the tag, you should use $getdesclLink to get only the Description value from the Hyperlink column as the following:

 <a href="{$geturlLink}" class="btn more">
      <xsl:value-of disable-output-escaping="yes" select="$getdesclLink"/>
 </a>

The full XSL item style should look like

<xsl:template name="Links" match="Row[@Style='Links']" mode="itemstyle">
           <a href="{$geturlLink}" class="btn more">
             <xsl:value-of disable-output-escaping="yes" select="$getdesclLink"/>
          </a>
</xsl:template>

---

How to implement More Link in SharePoint ItemStyle.XSL?

In case, you would like to Implement the MORE link from the Page URL and its Title, you have to use the below Item Style

<xsl:template name="Links" match="Row[@Style='Links']" mode="itemstyle">
           <xsl:variable name="SafeLinkUrl">
		<xsl:call-template name="OuterTemplate.GetSafeLink">
			<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
		</xsl:call-template>
	</xsl:variable>

	<xsl:variable name="DisplayTitle">
		<xsl:call-template name="OuterTemplate.GetTitle">
			<xsl:with-param name="Title" select="@Title"/>
			<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
		</xsl:call-template>
	</xsl:variable>

              <a href="{$SafeLinkUrl}" class="btn more">
      <xsl:value-of disable-output-escaping="yes" select="@Title"/>
 </a>
</xsl:template>

Note: in CQWP, you will get a Link field that should be set automatically to URL Path [Custom Columns]; to get the corresponding Page URL and its title, and you should leave it as default!

Comments

You're the best thanks for this great answer ♥