Sp-dev-fx-webparts: React Content Query Web part: Help or code snippet needed to format hyperlink output

[JenniferUN]

Sample (which sample are you talking about)

React Content Query web part

Authors

@PopWarner
@hugoabernier
@PaoloPia

Question (the more details, the better)

I've been using the content query web part for some time and it's fantastic. There is one small issue that I haven't been able to resolve and wondered if you could help.

When you display a hyperlink column it seems to output the URL and description as a single string. This means that the URL cannot be used in href tag.

Is there a way to strip away the description from the URL so that it can become a clickable link?

Question

[msftbot[bot]]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Abderahman88]

Hi @JenniferUN,

Yes, there is a way.

_Steps_

1. Open the property panel of the webpart
2. Go to 'Edit template content'
3. Change {{MyLinkField.textValue}} to {{{MyLinkField.htmlValue}}} _(use 3 curly brackets, not 2)_
4. Click on 'Save' and close

Example

[JenniferUN]

Hi @JenniferUN,

Yes, there is a way.

_Steps_

1. Open the property panel of the webpart
2. Go to 'Edit template content'
3. Change {{MyLinkField.textValue}} to {{{MyLinkField.htmlValue}}} _(use 3 curly brackets, not 2)_
4. Click on 'Save' and close

Example

Hi @Abderahman88 ,

Thank you very much! This is just what I needed!!! :)