SharePoint List Formatting
Back to column formats
Column formattingSharePoint 2019SharePoint Online

ISBN to Book Cover Image

This example retrieves book cover images based on their ISBN numbers by utilizing the Open Library Covers API. The API works by building a cover image URL with the ISBN.

Get this format View on GitHub

Shared by Aaron Miao
Updated Aug 20, 2018

text-isbn-image
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
    "src": "='http://covers.openlibrary.org/b/isbn/' + @currentField + '-S.jpg'"
  }
}
View sourceLink to this definitiontext-isbn-image.json

From the contributor

How to use this sample

Summary

This example retrieves book cover images based on their ISBN numbers by utilizing the Open Library Covers API. The API works by building a cover image URL with the ISBN.

This sample retrieves the small (S) image, but there are also medium (M) and large (L) sizes available. Simply swap out the S in -S.jpg portion of the src attribute in the img element to retrieve one of the other sizes.

screenshot of the sample

The values are expected to be the ISBN numbers for the books. However, this sample could easily be switched to utilize the OCLC, LCCN, OLID, or ID values for a given book.

View requirements

  • This format can be applied to a text/choice column and expects the values to be ISBN numbers corresponding to books

Sample

Solution Author(s)
text-isbn-image.json Aaron Miao

Version history

Version Date Comments
1.0 November 27, 2017 Initial release
1.1 March 22, 2018 Added details about API
1.2 August 20, 2018 Switched to Excel-style expression

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

This sample can be applied to render, for example, product number to product icon/image.

An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported.