I have a JavaScript page which is querying a SharePoint list. I'm getting the result of column called DevicePriority which is either Red, Amber or Green. The results are returned to a HTML page. I need to change these to the relevant jpgs eg ://xxx.com/IT/SiteAssets/amber.png

To do this I think I'll need a onload function with an if statement, so

<body onload="imageswap()">

if DevicePriority = "Red" 
Don't know what condition to put here?

Do I place this in the JavaScript or the HTML? Both codes below:


function getDeviceDetails() {
var txtTitle = "";
var txtOverview = "";
var txtAccessories = "";
var txtDevicetype = "";
var txtTypicalDeviceUsage ="";
var txtKnownSystemIssues ="";
var txtLifeCycles = "";
var txtTrafficlight = "";

var tempLCS2 = "";

var query = "http://collaboration-xxxx/sites/it/SystemInventory/_vti_bin/listdata.svc/Devices?$expand=LifeCycleStatus&Priority&$filter=Id eq " + window.DeviceId + "";

var call = $.ajax({
        url: query,
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
call.done(function (data,textStatus, jqXHR){
$.each(data.d.results, function(index, item) {
        var tempID = item.Id;
        var tempTitle = item.Title;

         var LifeCycleStart = item.DeviceAvailableFrom;
        var LifeCycleStatus = item.LifeCycleStatusValue;
        var DeviceOverView = item.Description;
        var AccessDetails = item.Accessories;
        var DeviceKind = item.Devicetype;
        var Usage = item.TypicalUsage;
        var DevicePriority = item.PriorityValue;

        txtTitle = "<p>" + LifeCycleStart + "</p><p>" + LifeCycleStatus  
+ "</p>";
        txtOverview = "<p>" + DeviceOverView + "</p>";
        txtAccessories = "<p>" + AccessDetails + "</p>";  
        txtDevicetype = "<p>" + DeviceKind  + "</p>";
        txtTypicalDeviceUsage = "<p>" + Usage + "</p>";
        txtTrafficlight = "<p>" + DevicePriority + "</p>";



  call.fail(function (jqXHR,textStatus,errorThrown){
    alert("Error retrieving data: " + jqXHR.responseText);



 <html xmlns:mso="urn:schemas-microsoft-com:office:office"  
  <script src="/jquery-1.10.1.min.js"></script>
<script src="/sites/it/SystemInventory/SiteAssets/getDevices.js"></script>
 <script type="text/javascript">

     function parseQueryString(queryString)
    var params = {}, queries, temp, i, l;
    queries = queryString.split("&");
    for ( i = 0, l = queries.length; i < l; i++ ) {
        temp = queries[i].split('=');
        params[temp[0]] = temp[1];
return params;

function getDeviceID() {
    if(typeof parseQueryString === "function") {
        if(window.location.href.indexOf("?") >= 0) {
            var qs = parseQueryString(window.location.href.split("?")[1])
            window.DeviceId = qs.did;


 <!--[if gte mso 9]><xml>
 <mso:_dlc_DocId msdt:dt="string">ITDOCUMENTS-135-47</mso:_dlc_DocId>
 <mso:_dlc_DocIdItemGuid msdt:dt="string">1d6007ea-9e58-4298-b2d6-

 <mso:_dlc_DocIdUrl msdt:dt="string">http://collaboration-
 ID=ITDOCUMENTS-135-47, ITDOCUMENTS-135-47</mso:_dlc_DocIdUrl>
 <style type="text/css">
 .tg  {border-collapse:collapse;border-spacing:0;}
 .tg td{font-family:Arial, sans-serif;font-size:16px;padding:10px     

.tg .tg-yw4l{vertical-align:top}

 <table class="tg">

<td rowspan="3" class="tg-yw4l"><h2>Devices</h2>
 <div id="devices"></div>


<td class="tg-yw4l"><h2>Devise Details</h2> 

<div id="devicedetails">

    <td class="tg-yw4l"><h2>Specification</h2>

 <div id="deviceoverview">
     <div id="devicekind">   

<td class="tg-yw4l"><h2>Known Issues</h2> 
  <div id="knowntitle">
      <input type=button onClick="location.href='http://collaboration-
     2Easpx&RootFolder='" value='Submit a known issue '> 


   <td class="tg-yw4l"><h2>Accessories </h2> 
 <div id="deviceacc"></div></td>

<td colspan="2" td class="tg-yw4l"><h2>Typical Usage</h2> 

<td colspan="3" td class="tg-yw4l" width="100"><h2>Current Status</h2> 

  • I am not getting what you are trying to do? Are you displaying multiple devices in one and based on device click you are showing device details with image or what? Jun 15 '17 at 13:06
  • No, basically it's a RAG status column. So if a user selects Red, Amber, or Green in the column choice of SharePoint (Priority) is shows the relevant coloured jpg on the HTML page.
    – Dazza
    Jun 15 '17 at 13:23

For this, you can make following change in your code.

Add a container for your image holder, e.g. <div id='imageContainer'></div>, where you want to display the image.

After getting the data of DevicePriority just call the following statement:

$('#imageContainer').append("<img src='url_to_web/SiteAssets/" + DevicePriority + ".png' />");

Just make sure, the value DevicePriority gives is the name of you image without extension and the extension is hard-coded as .png.

  • Thanks, that looks like it should work, I've put $('#imageContainer').append("<img src='/IT/SiteAssets/" + DevicePriority + ".png' />"); but nothings coming up. I've added the div tag to the HTML...
    – Dazza
    Jun 15 '17 at 13:58
  • I changed the + DevicePriority to + txtTrafficlight and an image is showing up but as the x place holder and when I look at the properties it's: collaboration-xxx.com/IT/SiteAssets/%3Cp%3EAmber%3C/p%3E.png
    – Dazza
    Jun 15 '17 at 14:02
  • Are you using rich text formatting in column? Because it is adding <p> tag around the data. If so use RegEx to remove the extra tags. Jun 15 '17 at 14:09
  • Use following js code. txtTrafficlight.replace(/<[^>]*>/g, '');. And if it does solve your problem then please mark the answer. :) Jun 15 '17 at 14:13
  • also add a .trim() function to remove white spaces around the data. Jun 15 '17 at 14:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.