I need to set a field called "Vehicle Picture" to hyperlink to a photo of the vehicle that opens in a new tab. The hyperlink should say "Click to View Picture" and the link itself should have mostly the same URL except the vehicle number (a required field in the form) in the link changes each time. My problem is changing both the URL and the description, as well as plugging in the vehicle number into the URL.


You can use the below script to modify how the "Vehicle Picture" field is displayed using JS Link.

  1. Create a JavasScript file and name it "vehiclePictureFieldTemplate.js"

    (function () { 
        var templatesContext = {}; 
        templatesContext.Templates = {}; 
        templatesContext.Templates.Fields = { 
            "Vehicle_x0020_Picture": { "View": vehiclePictureFieldTemplate} 
    function vehiclePictureFieldTemplate(ctx) { 
        var vehicleNumber = ctx.CurrentItem["Vehicle_x0020_Number"]; 
            return null;
        //assuming that the name of the picture of the vehicle is "{Vehicle Number}.png"
        var urlToPicture = _spPageContextInfo.webAbsoluteUrl + "/Pictures/" + vehicleNumber + ".png";
        return "<a href='" + urlToPicture + "' target='_blank'>Click to View Picture</a>";
  2. Upload the file to the "Style Library"

  3. Edit the list web part and in the "JS Link" field under "Miscellaneous" enter the line below:


enter image description here

  1. Make sure that the "Vehicle Picture" column is added to the list view

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.