Instantiate SP.FieldUrlValue fails with "Uncaught TypeError"

Question

I am trying to change the values of SP.FieldUrlValue in a list on SharePoint 2013. The goal is to add thumbnail of some images to the image field of my list based on the name of the title field.

I have added this code as an script to the Dispform.aspx:

var fvalue = new SP.FieldUrlValue();
fvalue.set_url("Url");
fvalue.set_description("Description");
newListItem.set_item("Image", fvalue);

But it seems that the SP.FieldUrlValue() function is not defined:

Uncaught TypeError: SP.FieldUrlValue is not a function.

I have changed the code to :

function updateImageItem(){ 
   var clientContext = new SP.ClientContext(_spPageContextInfo.siteAbsoluteUrl);  
   var oList = clientContext.get_web().get_lists().getByTitle('Rooms');  
   var itemCreateInfo = new SP.ListItemCreationInformation();  
   this.newListItem = oList.addItem(itemCreateInfo);

   var fvalue = new SP.FieldUrlValue();
   fvalue.set_url(imgThumbnail);
   fvalue.set_description(roomValue);
   newListItem.set_item('Image', fvalue);

   newListItem.update();  
   clientContext.load(newListItem);  
  clientContext.executeQueryAsync(  
    Function.createDelegate(this, this.onQuerySucceeded),   
     Function.createDelegate(this, this.onQueryFailed));  

   };  function onQuerySucceeded() {
    SP.UI.Notify.addNotification('Item created: ' + newListItem.get_id());
 }

 function onQueryFailed(sender, args) {
    console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
 }

No errors now, but nothing also happens!

the variables are receiving the link and the description correctly, but still the Image field is empty (it should show the thumbnail). should I add something to the html part as well? to show the image? (I'm new to this era, if the question sounds stupid!)

Answer 1

SP.FieldUrlValue object is declared in sp.js SharePoint library, this error apparently happens since the specified library is not yet loaded when the specified code is executed.

You could utilize SP.SOD.executeFunc function to ensure that the specified library is loaded like the shown below:

SP.SOD.executeFunc('SP.js', 'SP.ClientContext', function() {

     var fvalue = new SP.FieldUrlValue();
     //...

});