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

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

Leave a Reply

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