vLookup inline editing examples

There is no built in support for inline editing in the vLookup script, but you can add custom code to add support. Here is a few examples.

Add this to your Custom CSS

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

Add these shared functions to your Custom JS

 // Field type choice - dropdown
function edit_inline_dropdown(val, id, listGuid, fin, choices) {
    var dVal = val, b = [];
    if (dVal === "") {
        dVal = " ";
    }
    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 + "\")'>✔</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 = " ";
    }
    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 + "\")'>✔</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 = " ";
    }
    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 + "\")'>✔</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 = " ";
    }
    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 + "\")'>✔</span>");
    b.push("</div>");
    b.push("</div>");
    return b.join("");
}

// 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);
}

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;'>!</span>");
        setTimeout(function () {
            var prev = jQuery("#" + eId).prev();
            jQuery(prev).show().next().remove();
        }, 5000);
    }
} 

Text field example

Add this to your text field in the vlookup ViewFields Special configuration:

{"function":"edit_inline_title"}

Then add this to your Custom JS:

function edit_inline_title(val, item){
    var listGuid = "{ccbbf922-f0af-481b-b2c0-b12ea24d224e}", fin = "Title", id = item.get_item("ID");
    return edit_inline_text(val, id, listGuid, fin);
} 

Change the variable listGuid and fin to match the vLookup child list and the field name you are editing.

Multiline plain text field

Add this to your multiline plain text field in the vLookup ViewFields Special configuration:

{"function":"edit_inline_description"}

Then add this to your Custom JS:

function edit_inline_description(val, item){
    var listGuid = "{ccbbf922-f0af-481b-b2c0-b12ea24d224e}", fin = "Description", id = item.get_item("ID");
    return edit_inline_textarea(val, id, listGuid, fin);
} 

Change the variable listGuid and fin to match the vLookup child list and the field name you are editing.

Dropdown choice field

Add this to your choice field in the vlookup ViewFields Special configuration:

{"function":"edit_inline_status"}

Then add this to your Custom JS:

 function edit_inline_status(val, item) {
    var listGuid = "{ccbbf922-f0af-481b-b2c0-b12ea24d224e}", fin = "Status", choices = ["Not started", "In progress", "Completed"], id = item.get_item("ID");
    return edit_inline_dropdown(val, id, listGuid, fin, choices);
}

Change the variable listGuid and fin to match the vLookup child list and the field name you are editing and change the choices array to match your fields choices.

Multichoice field

Add this to your choice field in the vlookup ViewFields Special configuration:

{"function":"edit_inline_color"}

Than add this to your Custom JS:

function edit_inline_color(val, item) {
    var listGuid = "{ccbbf922-f0af-481b-b2c0-b12ea24d224e}", fin = "Color", choices = ["Red", "Blue", "Green"], id = item.get_item("ID");
    return edit_inline_multichoice(val, id, listGuid, fin, choices);
}

Change the variable listGuid and fin to match the vLookup child list and the field name you are editing.

People picker field

Thanks to Brett Anderson for writing up most of this example.

Add this to your people picker field in the vlookup ViewFields Special configuration:

{"function":"edit_inline_AssignedTo"}

Than add this to your Custom JS:

function edit_inline_AssignedTo(val, item){
     var listGuid = "{ccbbf922-f0af-481b-b2c0-b12ea24d224e}", fin = "AssignedTo", id = item.get_item("ID");
     return edit_inline_pp(val, id, listGuid, fin);
 }
 
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 + "\")'>✔</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;'>!</span>");
        setTimeout(function () {
            var prev = jQuery("#" + eId).prev();
            jQuery(prev).show().next().remove();
        }, 5000);
    }
} 

Change the variable listGuid and fin to match the vLookup child list and the field name you are editing.

Post any comments below, or create a new forum topic (if you do, please add the link to the post in the comments below so other users can find it).

Alexander

5 thoughts on “vLookup inline editing examples”

  1. 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

Leave a Reply

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