vLookup inline editing example

Forums vLooup for SharePoint vLookup inline editing example

This topic contains 2 replies, has 2 voices, and was last updated by  Alexander Bautz 1 month ago.

  • Author
    Posts
  • #16616

    Alexander Bautz
    Keymaster

    This example show how to allow inline editing in a vLookup table. You must set up each field individually, and in this example I have added two fields. It will let you click to edit the field value (in this example number fields) and save each change individually.

    Add this to the “Special configuration” in the vLookup config for each of the fields you are setting up. Please note that you must use different function names for each field as the “fin” won’t be passed trough to the function:

    {"function":"editField_1"}

    Add this code to the Custom JS in DFFS:

    // First field code
    function editField_1(val,item){
        var fin = "NumberFieldOne";
        return getEditFieldControls(fin,val,item);
    }
    // Second field code
    function editField_2(val,item){
        var fin = "NumberFieldTwo";
        return getEditFieldControls(fin,val,item);
    }
    
    // Shared functions between all fields - 
    function getEditFieldControls(fin,val,item){
        var id = item.get_item("ID"), b = [];
        b.push("<div style='white-space:nowrap;'>");
        b.push("<div class='vLookupDispWrap' onclick='toggleEditVal(this);' style='width:100px;'>");
        b.push("<span class='vLookupCurrVal'>"+val+" </span>");
        b.push("</div>");
        b.push("<div class='vLookupEditWrap' style='display:none;'>");
        b.push("<input type='text' value='"+val.replace(/[^0-9|,|.]/,"")+"' style='width:100px;text-align:right;' />");
        b.push("<span style='cursor:pointer;margin:3px;color:green;font-weight:bold;' onclick='saveChanges(this,\""+fin+"\",\""+id+"\")'>✓</span>");
        b.push("</div>");
        b.push("</div>");
        return b.join("");
    }
    
    function toggleEditVal(elm){
        jQuery(elm).hide().next().show().find("input:text").focus();
    }
    
    // Change "listName" to match your GUID or DisplayName
    function saveChanges(elm,fin,id){
        var listName = "{ccbbf922-f0af-481b-b2c0-b12ea24d224e}", dataObj = {}, val = jQuery(elm).prev().val(), res, eId;
        dataObj[fin] = val;
        res = spjs.utility.updateItem({"listName":listName,"id":id,"data":dataObj});
        if(res.success){
            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);
        }
    }

    Add this to Custom CSS:

    .vLookupDispWrap{
        border:1px transparent dashed;
        cursor:default;
    }
    .vLookupDispWrap:hover{
        border:1px #cccccc dashed;
    }
    .vLookupDispWrap:hover:before{
        content:"\270e";
        float:left;
    }

    The result should look like the attached images.

    Please ask if you have any questions.

    Please note that this example if for number fields and it will strip away the first character if this is not numeric – change

    val.replace(/[^0-9|,|.]/,"")

    in the code with

    val

    if you want to use it with text value.

    Alexander

    • This topic was modified 5 months ago by  Alexander Bautz. Reason: Gave some more instructions about number vs text entries
  • #18172

    Charlene
    Participant

    Thank you for such amazing instructions! I tried this out and it works great on a multichoice field and a single line of text field, but when I try to edit a people picker field and a date field, the values don’t save because they say they’re invalid. See attached image.

    Do you have any tips you can share for this?

    Attachments:
  • #18227

    Alexander Bautz
    Keymaster

    Sorry for the late reply. Unfortunately this would require a custom functions for looking up the user id from the name you type in as the value accepted by a people picker when writing to it with this method is the user id and not the name.

    The date must also have its own custom function / date picker as the format must be ISO8601 like this: “2017-09-20T20:15:00”.

    Unfortunately I’m a bit behind on other things and cannot help you with this now.

    Maybe someone else has already made this and are willing to share it here?

    Alexander

You must be logged in to reply to this topic.