Virginia Tech® home

Lists for JSON Datasource

Adding a List Component

Pamplin Utility Class

Ensure the Pamplin Ensemble Utility Javascript is added to your site
https://pamplin-cdn.azureedge.net/website_assets/all_local_assets/utility_2020.js

  1. Add a HTML Element to page
  2. Add Class to HTML Element
    pamplin-listFromJSON
  3. Add following script to the body of the HTML element
    <script type="text/javascript">
    {"datasource":"{URL of JSON Data}",
    "title":"{HTML of Title Component}",
    "desc":"{HTML of Description Component}",
    "image":"{IMAGE URL}" }
    </script>

To reference the fields in the JSON data, use the convention of json.fieldName for Example, json.First if you have a field called First. 

  • datasource (required): full URL of JSON datasource. Preferred to be in Assets Folder
  • listclass: class to be added to the list component (Default: "pam-list-samesize-4-5")
  • cols: Options: 1,2,3,4,6. Number of columns  (Default: "2")
  • sortfield: method to sort photos. 
  • title (required):  Title of List Component Element
  • description: HTML below the Title
  • link:  link for where the <a> for the list component

Sample List

Example Configuration File

<script type="text/javascript">
{"datasource":"https://cbia.pamplin.vt.edu/content/dam/cbia_pamplin_vt_edu/students-of-cohort-4-/cohort4.json",
"listclass":"pam-list-samesize-1-1",
"cols":4,
"title":"json.First json.Last",
"desc":"<b>Capstone Project:</b><br/> json.Capstone",
"image":"json.PhotoURL" }
</script>

Questions