Ashok Raja's Blog
Binding Hyperlink and Image URLs with KoSpJs in SharePoint REST API and SPServices
by Ashok Raja T 13. November 2013 00:26

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

Sl.No Article
1 Introducing KoSpJs - Knockout binding handlers for SharePoint REST API and SPServices
2 Beginning SharePoint development with KoSpJs, REST API and SP Services
3 SharePoint Lookup fields, Choice Fields and it's multi select variants in KoSpJs
4 Formatting Date, Number Fields in SharePoint REST API and SPServices with KoSpJs
5 Binding Hyperlink and Image URLs with KoSpJs in SharePoint REST API and SPServices  – This Article
6 Retrieving and binding User and User Group Details in SharePoint REST API with KoSpJs

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

Property SharePoint Field Types Remarks
spSrc Hyperlink or Picture Binds to src attribute of HTML img element
spHref Hyperlink or Picture Binds to href attribute of anchor element
spLink Hyperlink or Picture Binds to text / value attribute of HTML elements
spLinkText Hyperlink or Picture Binds to text / value attribute of HTML elements

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

blog comments powered by Disqus