1

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/

Screen Shot of SharePoint Online List Item

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'}}
1

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>
0

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.

2
  • Thank you, very helpful. – Gregg Machel Jun 24 '20 at 18:32
  • Need help figuring out how to implement a handlebars helper, I am totally new to helpers. Can you offer some advice? I have updated the lower portion of my question. – Gregg Machel Aug 31 '20 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.