Binding Hyperlink and Image URLs with KoSpJs in SharePoint REST API and SPServices

This article explains how to handle and bind URLs associated with SharePoint Hyperlink Fields, Image Fields to html elements in SharePoint REST API and SPServices with KoSpJs – Knockout Js for SharePoint.

Other articles in KoSpJs  documentation series

The below are the KoSpJs binders that are discussed in this article

Well, too many options to handle links and URLs, so let us see when to use what.

spSrc

Should be used to bind SharePoint Image Field. It binds directly to src attribute of the html image tag.

Binding Example (Applicable for both REST and SP Services)

<img width=”200px” height=”110px” data-bind=”spSrc:CoverPhoto” />

spHref

Can be used for binding SharePoint URL fields. This binder binds directly to href attribute of an anchor tag.

By default, SharePoint URL field returns both display text and actual URL as output while data is retrieved via REST API and SPServices. spHerf binder takes care of parsing this data and binds the URL to href attribute and sets the display text. If you require a different display text other than the one available in SharePoint field (if display text is left as blank in SharePoint, the URL will be treated as display text) then displayText attribute (not mandatory) can be used.

Binding Example (Applicable for both REST and SP Services)

<a href=”#” data-bind=”spHref:DownloadURL,displayText:’Download Book'”></a>

The above anchor tag will be rendered with “Download Book” as its display text irrespective of the display text available in the corresponding SharePoint URL Field. (‘DownloadURL’ is the name of the SharePoint Field). If you would like to show a different field’s value as a display text then displayField attribute can be used. If both displayText and displayField attributes are used then displayField attribute will be ignored.

The below sample binds URL to href attribute and sets the display text with the original display text available in SharePoint field.

<a href=”#” data-bind=”spHref:DownloadURL “></a>

spLink and spLinkText

These binders can be used with SharePoint Image and Hyper Link Field. Unlike spSrc (binds to src attribute of img tag) and spHref (binds to href attribute of anchor tag), spLink and spLinkText are not bound to any specific attribute of an html element. It’s bound as a text/value of an html tag. So this can be used with any html tag like td, div, span etc. The key difference between spLink and spLinkText is binding URL and display text. spLink binds the URL to the element and spLinkText binds the display text of the URL field to the html element

Binding Example (Applicable for both REST and SP Services)

<span data-bind=”spLink:DownloadURL”/>

<span data-bind=”spLinkText:DownloadURL”/>

Download KoSpJs from Code Plex
Knockout Js binders for SharePoint REST API and SP Services