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

Ashok Raja
 
Solutions Architect
November 13, 2013
 
Rate this article
 
Views
818

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.NoArticle
1Introducing KoSpJs – Knockout binding handlers for SharePoint REST API and SPServices
2Beginning SharePoint development with KoSpJs, REST API and SP Services
3SharePoint Lookup fields, Choice Fields and it’s multi select variants in KoSpJs
4Formatting Date, Number Fields in SharePoint REST API and SPServices with KoSpJs
5Binding Hyperlink and Image URLs with KoSpJs in SharePoint REST API and SPServices  – This Article
6Retrieving 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

PropertySharePoint Field TypesRemarks
spSrcHyperlink or PictureBinds to src attribute of HTML img element
spHrefHyperlink or PictureBinds to href attribute of anchor element
spLinkHyperlink or PictureBinds to text / value attribute of HTML elements
spLinkTextHyperlink or PictureBinds 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

Author Info

Ashok Raja
 
Solutions Architect
 
Rate this article
 
I am Ashok Raja, Share Point Consultant and Architect based out of Chennai, India. ...read more
 

Leave a comment