I'm creating a custom search result page in SharePoint Online using the PnP Modern Search Web Parts. I've created a custom column called "_CatURL" of type 'hyperlink', where I've added a URL and the 'alternative text', and I've mapped ows_CatURL to RefinableString10. In my layout slots, I've attempted to swap out the Summary slot with RefinableString10 - this shows the full address (e.g. https://www.google.com) rather than the alternative name, and is not a clickable link. I also tried ows_CatURL which does not show anything, and ows_q_URLH_CatURL but it won't let me select this as an option.
I've then modified the below line in the display template but this stops the web part from displaying any results at all.
from:
<div>{{getSummary (slot item @root.slots.Summary)}}</div>
to: <div>Category: <a href={{getSummary (slot item @root.slots.Summary)}}>(slot item @root.slots.Summary)</A></div>
The end result should show "Category: alternative text of url", with the alternative text being a hyperlink. How can I achieve this, please?
UPDATE So I split the URL and the alternative name into separate String columns.
I am able to get the aesthetic and functional result by using <div><b>Category: <a href="https://www.google.com">{{getSummary (slot item @root.slots.Summary)}}</a></b></div>
, however I need to replace the "https://www.google.com" with the string value from my new column. I attempted to use:
{{getCategoryURL}}
<div><b>Category: <a href={{{(slot item @root.slots.CategoryURL)}} {{getSummary (slot item @root.slots.Summary)}}</a></b></div>
which stops any results from appearing again.
I also attempted:
var cURL = {{getCategoryURL (slot item @root.slots.CategoryURL)}}
<div><b>Category: <a href=cURL>{{getSummary (slot item @root.slots.Summary)}}</a></b></div>
but I still have no results appearing.
Can anyone help me use the string value in my a href
code, please.