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
Leave a comment