SharePoint List Template using Handlebars

Question

I have a SharePoint Online list that has a column of type "Hyperlink" named URL. The Hyperlink column in the SharePoint list had two fields by default, "Enter a URL" and "Alternative text".

I am trying to use this list to display links, and specifically the "Enter a URL" field as my href. I am getting both the "Enter a URL" and "Alternative text" fields separated by a comma as my HREF value.

For example, a link to Google with an alt text of "link to google" returns this, concatenating both the "Enter a URL" and "Alternative text" fields:

https://www.google.com%2C%20link%20to%20google/

How do I wite the code below to only use the "Enter a URL" field (https://www.google.com) in my href?

<h2>Forms &amp; Tools</h2>
<ul>
{{#each items}}
<li><a href="{{URL.textValue}}">{{Category.textValue}} - {{Title.textValue}}</a>
</li>
{{/each}}
</ul>

Adding a helper I am trying, I cannot get the helper to work. I am new to Handlebars Helpers. Can anyone give me a push in the right direction on how to get this helper setup?

<script>
Handlebars.registerHelper('splitSPUrl', this._splitSPUrl); 

    private _splitSPUrl = (urlFieldValue, propertyRequested) => {
        if (urlFieldValue == null)
            return null;

        let spurl: ISPUrl = {
            url: urlFieldValue.split(',')[0],
            description: urlFieldValue.split(',')[1]
        };
        return spurl[propertyRequested];
    }
</script>


{{splitSPUrl urlProp 'url'}}

Answer 1

You need to look into handlebars helpers. With helpers you'll be able to do something like:

<a href="{{GetCorrectUrl URL.textValue}}">{{Category.textValue}} - {{Title.textValue}}</a>

Where GetCorrectUrl is the name of your helper. It's basically a function that you pass to a value, and it returns something else. You could even pass the required values (link and text) to a helper, and it would return the whole anchor tag for you. So your code could look like this:

<h2>Forms &amp; Tools</h2>
<ul>
{{#each items}}
<li>{{{GetCustomAnchor URL.textValue Category.textValue Title.textValue}}}
</li>
{{/each}}
</ul>

That's the idea, you just have to look into it further.

Answer 2

Have you tried {{URL.Url}}? You're just looking to get the actual href value out of it, yes? I don't need anything but the column name with mine, so I'd use something like this:

<h2>Forms &amp; Tools</h2>
<ul>
{{#each items}}
<li><a href="{{URL.Url}}">{{Category}} - {{Title}}</a>
</li>
{{/each}}
</ul>

Answer 3

For anyone who had same issue as me but could not find a solution, this is the handlebar expression I used:

<a style="color:{{@root.theme.palette.themePrimary}};font-weight:600;font-family:'{{@root.theme.fonts.small.fontFamily}}'" href="{{getUrlField YourColumnOWSURLH "URL"}}">{{getUrlField YourColumnOWSURLH "Title"}}</a>