13 Comments on “vLookup inline editing examples”

1. Hi Alexander,
   This is really useful, thank you for including it.
   Are you able to include sample code to edit a People-Picker field inline?
   Thanks.

   Log in to Reply

   1. Also, I noticed that the inline editing doesn’t work if the field is blank.
      Is it possible to include the option to edit blank values?

      Log in to Reply

2. Hi,
   I don’t have any examples ready to use a people picker and I don’t have time to create one right now – maybe someone else have this to share?

   You can look at this how you can load and use the poeple picker code: https://spjsblog.com/forums/topic/put-a-people-picker-in-a-regular-aspx-page/ or this one: https://spjsblog.com/forums/topic/capture-user-input-in-popup/

   What kind of field is not editable when empty? – I think maybe the clickable area is to small / hard to find when the value is an empty string or just one whitespace?

   Alexander

   Log in to Reply

3. Works perfectly, thank you.
   I would have never figured out that SaveChangesPP function.
   Sending support $ to your PayPal.
   Much appreciated.

   Log in to Reply

   1. I’m glad it worked – and thanks for the $

      Alexander

      Log in to Reply

4. I slightly modified your code to support easy changes to the icons or glyphs used for the save, error, and null value display placeholder.

   /* css */
   .vLookupDispWrap{
   padding-left:1.1em;
   cursor:pointer;
   width:100%;
   box-sizing:border-box;
   white-space: normal;
   }
   .vLookupDispWrap:hover:before{
   content:”\270f”; /* ✏ */
   float:left;
   margin-left:-1.1em;
   }
   .vLookupEditWrap{
   display:none;
   width:100%;
   box-sizing:border-box;
   }

   /* javascript */
   var inlineEdit_nullValuePlaceholder = “?”;
   var inlineEdit_saveButtonIcon = “?”;
   var inlineEdit_saveFailedIcon = “❗”;
   // Field type choice – dropdown
   function edit_inline_dropdown(val, id, listGuid, fin, choices) {
   var dVal = val, b = [];
   if (dVal === “”) {
   dVal = inlineEdit_nullValuePlaceholder;
   }
   b.push(“”);
   b.push(“”);
   b.push(“” + dVal + ” “);
   b.push(“”);
   b.push(“”);
   b.push(“”);
   jQuery.each(choices, function (i, v) {
   b.push(“” + v + “”);
   });
   b.push(“”);
   b.push(“”+ inlineEdit_saveButtonIcon +””);
   b.push(“”);
   b.push(“”);
   return b.join(“”);
   }

   // Field type choice – multichoice
   function edit_inline_multichoice(val, id, listGuid, fin, choices) {
   var dVal = val, arr = val.split(//i), b = [];
   if (dVal === “”) {
   dVal = inlineEdit_nullValuePlaceholder;
   }
   b.push(“”);
   b.push(“”);
   b.push(“” + dVal + ” “);
   b.push(“”);
   b.push(“”);
   jQuery.each(choices, function (i, v) {
   b.push(” -1) {
   b.push(” checked=’checked'”);
   }
   b.push(“/>” + v + “”);
   });
   b.push(“”+ inlineEdit_saveButtonIcon +””);
   b.push(“”);
   b.push(“”);
   return b.join(“”);
   }

   // Field type multiline plain text
   function edit_inline_textarea(val, id, listGuid, fin) {
   var dVal = val, b = [];
   if (dVal === “”) {
   dVal = inlineEdit_nullValuePlaceholder;
   }
   val = val.split(//i).join(“\n”);
   b.push(“”);
   b.push(“”);
   b.push(“” + dVal + ” “);
   b.push(“”);
   b.push(“”);
   b.push(“” + val + “”);
   b.push(“”+ inlineEdit_saveButtonIcon +””);
   b.push(“”);
   b.push(“”);
   return b.join(“”);
   }

   // Field type single line of text
   function edit_inline_text(val, id, listGuid, fin) {
   var dVal = val, b = [];
   if (dVal === “”) {
   dVal = inlineEdit_nullValuePlaceholder;
   }
   b.push(“”);
   b.push(“”);
   b.push(“” + dVal + ” “);
   b.push(“”);
   b.push(“”);
   b.push(“”);
   b.push(“”+ inlineEdit_saveButtonIcon +””);
   b.push(“”);
   b.push(“”);
   return b.join(“”);
   }

   function toggleEditField(elm) {
   jQuery(elm).hide().next().show();
   }

   function saveInline_vLookupChanges(elm, val, fin, id, listGuid) {
   var dataObj = {}, res, eId;
   dataObj[fin] = val;
   res = spjs.utility.updateItem({ “listName”: listGuid, “id”: id, “data”: dataObj });
   if (res.success) {
   // Choice columns
   val = val.split(“;#”).join(“”);
   val = val.split(“\n”).join(“”);
   jQuery(elm).parent().hide().prev().html(val + ” “).show();
   } else {
   eId = new Date().valueOf();
   jQuery(elm).hide().after(“”+ inlineEdit_saveFailedIcon +””);
   setTimeout(function () {
   var prev = jQuery(“#” + eId).prev();
   jQuery(prev).show().next().remove();
   }, 5000);
   }
   }

   function edit_inline_pp(val, id, listGuid, fin) {
   var ppid = “pp” + id, dVal = val, b = [];
   if (dVal === “”) {
   dVal = “Click to add name”;
   }
   b.push(“”);
   b.push(“”);
   b.push(” ” + dVal + ” “);
   b.push(“”);
   b.push(“”);
   b.push(“”);
   function showPP() {
   var schema = {};
   schema.PrincipalAccountType = ‘User,DL,SecGroup,SPGroup’;
   schema.SearchPrincipalSource = 15;
   schema.ResolvePrincipalSource = 15;
   schema.AllowMultipleValues = false;
   schema.MaximumEntitySuggestions = 50;
   schema.Width = ‘200px’;
   schema.Height = ’50px’;
   this.SPClientPeoplePicker_InitStandaloneControlWrapper(ppid, null, schema);
   }
   setTimeout(function () {
   showPP();
   }, 250);
   b.push(“”);
   b.push(“”+ inlineEdit_saveButtonIcon +””);
   b.push(“”);
   b.push(“”);
   return b.join(“”);
   }

   function saveChangesPP(elm, fin, id, listGuid) {
   var ppid = “pp” + id, idArr = [], pp = SPClientPeoplePicker.SPClientPeoplePickerDict[ppid + “_TopSpan”], users = pp.GetAllUserInfo(), dispNameArr = [], dataObj = {}, res, eId;
   // Get current PP values
   jQuery.each(users, function (i, o) {
   dispNameArr.push(o.DisplayText);
   idArr.push(spjs.utility.userInfo(o.Key).ID);
   });
   jQuery(elm).parent().hide().prev().html(dispNameArr.join(“, “) + ” “).show();
   dataObj[fin] = idArr.join(“;#;#”);
   res = spjs.utility.updateItem({ “listName”: listGuid, “id”: id, “data”: dataObj });
   if (!res.success) {
   eId = new Date().valueOf();
   jQuery(elm).hide().after(“”+ inlineEdit_saveFailedIcon +””);
   setTimeout(function () {
   var prev = jQuery(“#” + eId).prev();
   jQuery(prev).show().next().remove();
   }, 5000);
   }
   }
   // Save function for input, select and textarea
   function saveChangesInput(elm, fin, id, listGuid) {
   var val = jQuery.trim(jQuery(elm).prev().val());
   saveInline_vLookupChanges(elm, val, fin, id, listGuid);
   }

   // Save function for multichoice
   function saveChangesMultichoice(elm, fin, id, listGuid) {
   var arr = [], val;
   jQuery(elm).parent().find(“input:checkbox:checked”).each(function (i, o) {
   arr.push(jQuery(o).val());
   });
   val = arr.join(“;#”);
   saveInline_vLookupChanges(elm, val, fin, id, listGuid);
   }

   Log in to Reply

   1. Thanks, but unfortunately the format of your code snippet was messed up. Please repost the code and wrap it like described here:
      https://spjsblog.com/2010/01/08/how-to-post-code-in-comments

      If you are not able to post it (might not have necessary rights to post HTML) you can email it to me and I’ll update your comment with the snippet.

      Alexander

      Log in to Reply

5. var inlineEdit_nullValuePlaceholder = “?”;
   var inlineEdit_saveButtonIcon = “?”;
   var inlineEdit_saveFailedIcon = “❗”;
   // Field type choice – dropdown
   function edit_inline_dropdown(val, id, listGuid, fin, choices) {
   var dVal = val, b = [];
   if (dVal === “”) {
   dVal = inlineEdit_nullValuePlaceholder;
   }
   b.push(“<div style=’white-space:nowrap;’>”);
   b.push(“<div class=’vLookupDispWrap’ onclick=’toggleEditField(this);’>”);
   b.push(“<span class=’vLookupCurrVal’>” + dVal + ” </span>”);
   b.push(“</div>”);
   b.push(“<div class=’vLookupEditWrap’>”);
   b.push(“<select>”);
   jQuery.each(choices, function (i, v) {
   b.push(“<option value='” + v + “‘”);
   if (val === v) {
   b.push(” selected=’selected'”);
   }
   b.push(“>” + v + “</option>”);
   });
   b.push(“</select>”);
   b.push(“<span title=’Save’ style=’cursor:pointer;margin:3px;color:green;font-weight:bold;’ onclick=’saveChangesInput(this,\”” + fin + “\”,\”” + id + “\”,\”” + listGuid + “\”)’>”+ inlineEdit_saveButtonIcon +”</span>”);
   b.push(“</div>”);
   b.push(“</div>”);
   return b.join(“”);
   }

   // Field type choice – multichoice
   function edit_inline_multichoice(val, id, listGuid, fin, choices) {
   var dVal = val, arr = val.split(/<br\s*\/?>/i), b = [];
   if (dVal === “”) {
   dVal = inlineEdit_nullValuePlaceholder;
   }
   b.push(“<div style=’white-space:nowrap;’>”);
   b.push(“<div class=’vLookupDispWrap’ onclick=’toggleEditField(this);’>”);
   b.push(“<span class=’vLookupCurrVal’>” + dVal + ” </span>”);
   b.push(“</div>”);
   b.push(“<div class=’vLookupEditWrap’>”);
   jQuery.each(choices, function (i, v) {
   b.push(“<input id=’inline_” + fin + “_” + i + “‘ type=’checkbox’ value='” + v + “‘”);
   if (jQuery.inArray(v, arr) > -1) {
   b.push(” checked=’checked'”);
   }
   b.push(“/><label for=’inline_” + fin + “_” + i + “‘>” + v + “</label><br>”);
   });
   b.push(“<span title=’Save’ style=’cursor:pointer;margin:3px;color:green;font-weight:bold;’ onclick=’saveChangesMultichoice(this,\”” + fin + “\”,\”” + id + “\”,\”” + listGuid + “\”)’>”+ inlineEdit_saveButtonIcon +”</span>”);
   b.push(“</div>”);
   b.push(“</div>”);
   return b.join(“”);
   }

   // Field type multiline plain text
   function edit_inline_textarea(val, id, listGuid, fin) {
   var dVal = val, b = [];
   if (dVal === “”) {
   dVal = inlineEdit_nullValuePlaceholder;
   }
   val = val.split(/<br\s*\/?>/i).join(“\n”);
   b.push(“<div style=’white-space:nowrap;’>”);
   b.push(“<div class=’vLookupDispWrap’ onclick=’toggleEditField(this);’>”);
   b.push(“<span class=’vLookupCurrVal’>” + dVal + ” </span>”);
   b.push(“</div>”);
   b.push(“<div class=’vLookupEditWrap’>”);
   b.push(“<textarea style=’height:75px;width:100%;box-sizing:border-box;’>” + val + “</textarea>”);
   b.push(“<span title=’Save’ style=’cursor:pointer;margin:3px;color:green;font-weight:bold;’ onclick=’saveChangesInput(this,\”” + fin + “\”,\”” + id + “\”,\”” + listGuid + “\”)’>”+ inlineEdit_saveButtonIcon +”</span>”);
   b.push(“</div>”);
   b.push(“</div>”);
   return b.join(“”);
   }

   // Field type single line of text
   function edit_inline_text(val, id, listGuid, fin) {
   var dVal = val, b = [];
   if (dVal === “”) {
   dVal = inlineEdit_nullValuePlaceholder;
   }
   b.push(“<div style=’white-space:nowrap;’>”);
   b.push(“<div class=’vLookupDispWrap’ onclick=’toggleEditField(this);’>”);
   b.push(“<span class=’vLookupCurrVal’>” + dVal + ” </span>”);
   b.push(“</div>”);
   b.push(“<div class=’vLookupEditWrap’>”);
   b.push(“<input type=’text’ value='” + val + “‘>”);
   b.push(“<span title=’Save’ style=’cursor:pointer;margin:3px;color:green;font-weight:bold;’ onclick=’saveChangesInput(this,\”” + fin + “\”,\”” + id + “\”,\”” + listGuid + “\”)’>”+ inlineEdit_saveButtonIcon +”</span>”);
   b.push(“</div>”);
   b.push(“</div>”);
   return b.join(“”);
   }

   function edit_inline_integer(val, id, listGuid, fin) {
   var dVal = val, b = [];
   if (dVal === “”) {
   dVal = inlineEdit_nullValuePlaceholder;
   }
   b.push(“<div style=’white-space:nowrap;’>”);
   b.push(“<div class=’vLookupDispWrap’ onclick=’toggleEditField(this);’>”);
   b.push(“<span class=’vLookupCurrVal’>” + dVal + ” </span>”);
   b.push(“</div>”);
   b.push(“<div class=’vLookupEditWrap’>”);
   b.push(“<input type=’number’ min=’0′ step=’1′ placeholder=’#’ value='” + val + “‘>”);
   b.push(“<span title=’Save’ style=’cursor:pointer;margin:3px;color:green;font-weight:bold;’ onclick=’saveChangesInput(this,\”” + fin + “\”,\”” + id + “\”,\”” + listGuid + “\”)’>”+ inlineEdit_saveButtonIcon +”</span>”);
   b.push(“</div>”);
   b.push(“</div>”);
   return b.join(“”);
   }
   function edit_inline_date(val, id, listGuid, fin) {
   var dVal = val, b = [];
   if (dVal === “”) {
   dVal = inlineEdit_nullValuePlaceholder;
   }
   else {
   try{dVal = new Date(dVal).toISOString();}catch(err){}
   }
   b.push(“<div style=’white-space:nowrap;’>”);
   b.push(“<div class=’vLookupDispWrap’ onclick=’toggleEditField(this);’>”);
   b.push(“<span class=’vLookupCurrVal’>” + dVal + ” </span>”);
   b.push(“</div>”);
   b.push(“<div class=’vLookupEditWrap’>”);
   b.push(“<input type=’text’ placeholder=’YYYY-MM-DD’ value='” + val + “‘>”);
   b.push(“<span title=’Save’ style=’cursor:pointer;margin:3px;color:green;font-weight:bold;’ onclick=’saveChangesInput(this,\”” + fin + “\”,\”” + id + “\”,\”” + listGuid + “\”)’>”+ inlineEdit_saveButtonIcon +”</span>”);
   b.push(“</div>”);
   b.push(“</div>”);
   return b.join(“”);
   }

   function toggleEditField(elm) {
   jQuery(elm).hide().next().show();
   }

   function saveInline_vLookupChanges(elm, val, fin, id, listGuid) {
   var dataObj = {}, res, eId;
   dataObj[fin] = val;
   res = spjs.utility.updateItem({ “listName”: listGuid, “id”: id, “data”: dataObj });
   if (res.success) {
   // Choice columns
   val = val.split(“;#”).join(“<br>”);
   val = val.split(“\n”).join(“<br>”);
   jQuery(elm).parent().hide().prev().html(val + ” “).show();
   } else {
   eId = new Date().valueOf();
   jQuery(elm).hide().after(“<span id='” + eId + “‘ title='” + res.errorText + “‘ style=’cursor:default;margin:3px;color:red;font-weight:bold;’>”+ inlineEdit_saveFailedIcon +”</span>”);
   setTimeout(function () {
   var prev = jQuery(“#” + eId).prev();
   jQuery(prev).show().next().remove();
   }, 5000);
   }
   }

   function edit_inline_pp(val, id, listGuid, fin) {
   var ppid = “pp” + id, dVal = val, b = [];
   if (dVal === “”) {
   dVal = “Click to add name”;
   }
   b.push(“<div style=’white-space:nowrap;’ >”);
   b.push(“<div class=’vLookupDispWrap’ onclick=’toggleEditField(this);’ >”);
   b.push(“<span class=’vLookupCurrVal’ > ” + dVal + ” </span>”);
   b.push(“</div>”);
   b.push(“<div class=’vLookupEditWrap’ >”);
   b.push(“<div id='” + ppid + “‘ onkeydown=’event.stopPropagation()’ style=’height:22px’ >”);
   function showPP() {
   var schema = {};
   schema.PrincipalAccountType = ‘User,DL,SecGroup,SPGroup’;
   schema.SearchPrincipalSource = 15;
   schema.ResolvePrincipalSource = 15;
   schema.AllowMultipleValues = false;
   schema.MaximumEntitySuggestions = 50;
   schema.Width = ‘200px’;
   schema.Height = ’50px’;
   this.SPClientPeoplePicker_InitStandaloneControlWrapper(ppid, null, schema);
   }
   setTimeout(function () {
   showPP();
   }, 250);
   b.push(“</div>”);
   b.push(“<span title=’Save’ style=’cursor:pointer;margin:3px;color:green;font-weight:bold;’ onclick=’saveChangesPP(this,\”” + fin + “\”,\”” + id + “\”,\”” + listGuid + “\”)’>”+ inlineEdit_saveButtonIcon +”</span>”);
   b.push(“</div>”);
   b.push(“</div>”);
   return b.join(“”);
   }

   function saveChangesPP(elm, fin, id, listGuid) {
   var ppid = “pp” + id, idArr = [], pp = SPClientPeoplePicker.SPClientPeoplePickerDict[ppid + “_TopSpan”], users = pp.GetAllUserInfo(), dispNameArr = [], dataObj = {}, res, eId;
   // Get current PP values
   jQuery.each(users, function (i, o) {
   dispNameArr.push(o.DisplayText);
   idArr.push(spjs.utility.userInfo(o.Key).ID);
   });
   jQuery(elm).parent().hide().prev().html(dispNameArr.join(“, “) + ” “).show();
   dataObj[fin] = idArr.join(“;#;#”);
   res = spjs.utility.updateItem({ “listName”: listGuid, “id”: id, “data”: dataObj });
   if (!res.success) {
   eId = new Date().valueOf();
   jQuery(elm).hide().after(“<span id='” + eId + “‘ title='” + res.errorText + “‘ style=’cursor:default;margin:3px;color:red;font-weight:bold;’>”+ inlineEdit_saveFailedIcon +”</span>”);
   setTimeout(function () {
   var prev = jQuery(“#” + eId).prev();
   jQuery(prev).show().next().remove();
   }, 5000);
   }
   }
   // Save function for input, select and textarea
   function saveChangesInput(elm, fin, id, listGuid) {
   var val = jQuery.trim(jQuery(elm).prev().val());
   saveInline_vLookupChanges(elm, val, fin, id, listGuid);
   }

   // Save function for multichoice
   function saveChangesMultichoice(elm, fin, id, listGuid) {
   var arr = [], val;
   jQuery(elm).parent().find(“input:checkbox:checked”).each(function (i, o) {
   arr.push(jQuery(o).val());
   });
   val = arr.join(“;#”);
   saveInline_vLookupChanges(elm, val, fin, id, listGuid);
   }

   Log in to Reply

6. Curious if/how you can do the inline editing but for an autocomplete field?

   Log in to Reply

   1. Hi,
      The autocomplete code will unfortunately not apply when using inline editing. This means you would have to write custom code to create the autocomplete functionality.

      Alexander

      Log in to Reply

      1. Dang. Yeah, I wouldn’t even know where to start with that as I’m still learning JS. No worries, thought I would check though.

7. I added your custom js and css on to a Page via a linked CEWP for inline editing in a View (It works perfectly in the DFFS form). However, everything works in the view except that it keeps moving my cursor out of the inline edit field and unselects the row. Do you know what i am doing wrong?

   Log in to Reply

   1. I haven’t really tried it in a list view so I would have to do that first, but I guess SharePoint has some built in code that shifts the focus.

      Do you see any error messages in the F12 > Console when trying to edit?

      Alexander

      Log in to Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.